Canvas前端游戏开发——FlappyBird详解
一直想自己做点小东西,直到最近看了本《HTML5游戏开发》,才了解游戏开发中的一点点入门知识。
本篇就针对学习的几个样例,自己动手实践,做了个FlappyBird,源码共享在度盘;也可以参考github,里面有更多的游戏样例。 (可点击底部【阅读原文】下载源码)
游戏截图
HTML5之Canvas
Canvas是Html5中用于绘图的元素,它可以绘制各种图形,比如长方形,多边形,圆形等等。如果想要了解Canvas的使用可以参考:
http://www.w3school.com.cn/tags/html_ref_canvas.asp
//如果想要使用canvas,首先需要获得上下文对象:
ctx=document.getElementById('canvas').getContext('2d');
//然后使用这个ctx绘制图形
在cavas每个绘制都是独立操作。比如下图的两个绘制图形,第二个会以覆盖的形式绘制,因此绘制图形的顺序就显得十分重要了。
canvas之drawImage
本篇的游戏开发中,主要使用的是依据图片绘制的api:drawImage,它有两个基本的使用方法:
ctx.drawImage(image,this.bx,this.by,this.bwidth,this.bheight);
ctx.drawImage(image,x,y,width,height,this.px,this.py,this.pwidth,this.pheight);
第一个api中,指定Image对象,然后给出绘制图片的x,y坐标以及宽度和高度即可。
第二个api中,第一组x,y,width,height则指定了裁剪图片的坐标尺寸,这在使用多元素的矢量图时很常用。比如:
上面的图片中为了减少图片资源的请求数量,把很多的元素放在了一个图片中,此时就需要通过裁剪的方式,获取指定的图片元素。
FlappyBird原理解析
其实这个游戏很简单,一张图就可以看懂其中的奥妙:
其中背景和地面是不动的。
小鸟只有上和下两个动作,可以通过控制小鸟的y坐标实现。
上下的管子只会向左移动,为了简单实现,游戏中一个画面仅仅会出现一对管子,这样当管子移出左边的背景框,就自动把管子放在最右边!
if(up_pipe.px+up_pipe.pwidth>0){
up_pipe.px -= velocity;
down_pipe.px -= velocity;
}else{
up_pipe.px = 400;
down_pipe.px = 400;
up_pipe.pheight = 100+Math.random*200;
down_pipe.py = up_pipe.pheight+pipe_height;
down_pipe.pheight = 600-down_pipe.py;
isScore = true;
}
很简单吧!
由于该游戏一共就这几个元素,因此把他们都放入一个Objects数组中,通过setInteral方法,在一定间隔时间内,执行一次重绘。
重绘的时候会先清除画面中的所有元素,然后按照新的元素的坐标一次绘制图形,这样就会出现移动的效果。
模拟小鸟重力
由于这个游戏不涉及小鸟横向的运动,因此只要模拟出小鸟下落的动作以及上升的动作就可以了。
上升:这个很简单,只要把小鸟的y坐标减去一定的值就可以了
下落:其实重力不需要使用gt^2来模拟,可以简单的指定两个变量,v1和gravity,这两个变量与setInterval中的时间共同作用,就能模拟重力。
ver2 = ver1+gravity;
bird.by += (ver2+ver1)*0.5;
碰撞检测
游戏中小鸟碰到管子或者地面都会算游戏结束:
其中条件1上管道的检测为:
((bird.bx+bird.bwidth>up_pipe.px)&&(bird.by>up_pipe.py)&&(bird.bx+bird.bwidth<up_pipe.px+up_pipe.pwidth)&&(bird.by<up_pipe.py+up_pipe.pheight))||
((bird.bx+bird.bwidth>up_pipe.px)&&(bird.by>up_pipe.py)&&(bird.bx+bird.bwidth<up_pipe.px+up_pipe.pwidth)&&(bird.by<up_pipe.py+up_pipe.pheight))
条件2下管道的检测为:
((bird.bx>down_pipe.px)&&(bird.by>down_pipe.py)&&(bird.bx<down_pipe.px+down_pipe.pwidth)&&(bird.by<down_pipe.py+down_pipe.pheight))||
((bird.bx>down_pipe.px)&&(bird.by+bird.bheight>down_pipe.py)&&(bird.bx<down_pipe.px+down_pipe.pwidth)&&(bird.by+bird.bheight<down_pipe.py+down_pipe.pheight))
条件3地面的检测最简单,为:
bird.by+bird.bheight>ground.bgy
如果满足这三个条件,就算游戏结束,会清除循环以及提示游戏结束信息。
分数计算
分数的计算与碰撞检测类似,设置一个开关,当管子重新出现时,设置为true。当分值加1时,设置为false。
小鸟的最左边的x坐标如果超出了管子的x+width,就认为成功通过。
if(isScore && bird.bx>up_pipe.px+up_pipe.pwidth){
score += 1;
isScore = false;
if(score>0 && score%10 === 0){
velocity++;
}
}
通过后,分值加1,速度+1。
全部源码
<!DOCTYPE html>
<html>
<head>
<title>Flappy Bird</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
// Edit by xingoo
// Fork on my github:https://github.com/xinghalo/CodeJS/tree/master/HTML5
var ctx;
var cwidth = 400;
var cheight = 600;
var objects = ;
var birdIndex = 0;
var ver1 = 10;
var ver2;
var gravity = 2;
var pipe_height = 200;
var velocity = 10;
var tid;
var score = 0;
var isScore = false;
var birds = ["./images/0.gif","./images/1.gif","./images/2.gif"];
var back = new Background(0,0,400,600,"./images/bg.png");
var up_pipe = new UpPipe(0,0,100,200,"./images/pipe.png");
var down_pipe = new DownPipe(0,400,100,200,"./images/pipe.png");
var ground = new Background(0,550,400,200,"./images/ground.png");
var bird = new Bird(80,300,40,40,birds);
objects.push(back);
objects.push(up_pipe);
objects.push(down_pipe);
objects.push(ground);
objects.push(bird);
function UpPipe(x,y,width,height,img_src){
this.px = x;
this.py = y;
this.pwidth = width;
this.pheight = height;
this.img_src = img_src;
this.draw = drawUpPipe;
}
function DownPipe(x,y,width,height,img_src){
this.px = x;
this.py = y;
this.pwidth = width;
this.pheight = height;
this.img_src = img_src;
this.draw = drawDownPipe;
}
function drawUpPipe{
var image = new Image;
image.src = this.img_src;
ctx.drawImage(image,150,500,150,800,this.px,this.py,this.pwidth,this.pheight);
}
function drawDownPipe{
var image = new Image;
image.src = this.img_src;
ctx.drawImage(image,0,500,150,500,this.px,this.py,this.pwidth,this.pheight);
}
function Background(x,y,width,height,img_src){
this.bgx = x;
this.bgy = y;
this.bgwidth = width;
this.bgheight = height;
var image = new Image;
image.src = img_src;
this.img = image;
this.draw = drawbg;
}
function drawbg{
ctx.drawImage(this.img,this.bgx,this.bgy,this.bgwidth,this.bgheight);
}
function Bird(x,y,width,height,img_srcs){
this.bx = x;
this.by = y;
this.bwidth = width;
this.bheight = height;
this.imgs = img_srcs;
this.draw = drawbird;
}
function drawbird{
birdIndex++;
var image = new Image;
image.src = this.imgs[birdIndex%3];
ctx.drawImage(image,this.bx,this.by,this.bwidth,this.bheight);
}
function calculator{
if(bird.by+bird.bheight>ground.bgy ||
((bird.bx+bird.bwidth>up_pipe.px)&&(bird.by>up_pipe.py)&&(bird.bx+bird.bwidth<up_pipe.px+up_pipe.pwidth)&&( bird.by<up_pipe.py+up_pipe.pheight))||
((bird.bx+bird.bwidth>up_pipe.px)&&(bird.by>up_pipe.py)&&(bird.bx+bird.bwidth<up_pipe.px+up_pipe.pwidth)&&( bird.by<up_pipe.py+up_pipe.pheight))||
((bird.bx>down_pipe.px)&&(bird.by>down_pipe.py)&&(bird.bx<down_pipe.px+down_pipe.pwidth)&&(bird.by<down_pipe.py+down_pipe.pheight))||
((bird.bx>down_pipe.px)&&(bird.by+bird.bheight>down_pipe.py)&&(bird.bx<down_pipe.px+down_pipe.pwidth)&&(bird.by+bird.bheight<down_pipe.py+down_pipe.pheight))){
clearInterval(tid);
ctx.fillStyle = "rgb(255,255,255)";
ctx.font = "30px Accent";
ctx.fillText("You got "+score+"!",110,100)
return;
}
ver2 = ver1+gravity;
bird.by += (ver2+ver1)*0.5;
if(up_pipe.px+up_pipe.pwidth>0){
up_pipe.px -= velocity;
down_pipe.px -= velocity;
}else{
up_pipe.px = 400;
down_pipe.px = 400;
up_pipe.pheight = 100+Math.random*200;
down_pipe.py = up_pipe.pheight+pipe_height;
down_pipe.pheight = 600-down_pipe.py;
isScore = true;
}
if(isScore && bird.bx>up_pipe.px+up_pipe.pwidth){
score += 1;
isScore = false;
if(score>0 && score%10 === 0){
velocity++;
}
}
ctx.fillStyle = "rgb(255,255,255)";
ctx.font = "30px Accent";
if(score>0){
score%10!==0?ctx.fillText(score,180,100):ctx.fillText("Great!"+score,120,100);
}
}
function drawall{
ctx.clearRect(0,0,cwidth,cheight);
var i;
for(i=0;i<objects.length;i++){
objects[i].draw;
}
calculator;
}
function keyup(e){
var e = e||event;
var currKey = e.keyCode||e.which||e.charCode;
switch (currKey){
case 32:
bird.by -= 80;
break;
}
}
function init{
ctx = document.getElementById('canvas').getContext('2d');
document.onkeyup = keyup;
drawall;
tid = setInterval(drawall,80);
}
</script>
</head>
<body onLoad="init;">
<canvas id="canvas" width="400" height="600" style="margin-left:200px;">
Your browser is not support canvas!
</canvas>
</body>
</html>
总结
在学习游戏开发的时候,我突然怀念起大学的物理。当时很纳闷,学计算机学什么物理,后来再接触游戏开发才知道,没有一定的物理知识,根本无法模拟游戏中的各个场景。而通过这个简单的小游戏,也捡起来了很多旧知识。
Canvas前端游戏开发——FlappyBird详解的更多相关文章
- [Canvas前端游戏开发]——FlappyBird详解
一直想自己做点小东西,直到最近看了本<HTML5游戏开发>,才了解游戏开发中的一点点入门知识. 本篇就针对学习的几个样例,自己动手实践,做了个FlappyBird,源码共享在度盘 :也可以 ...
- unity3D游戏开发之详解Animation类和Animator类
详解Animator类和Animation类 链接: http://wenku.baidu.com/link?url=SiaUYcdrNYjOYrWVDJSKGAYdJOntMTOhsVJtyBk2i ...
- 当里个当,免费的HTML5连载来了《HTML5网页开发实例详解》连载(一)
读懂<HTML5网页开发实例详解>这本书 你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信“Flash之我见”中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得 ...
- Extjs MVC开发模式详解
Extjs MVC开发模式详解 在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式, ...
- Cocos2d-x 3.X手游开发实例详解
Cocos2d-x 3.X手游开发实例详解(最新最简Cocos2d-x手机游戏开发学习方法,以热门游戏2048.卡牌为例,完整再现手游的开发过程,实例丰富,代码完备,Cocos2d-x作者之一林顺和泰 ...
- 免费的HTML5连载来了《HTML5网页开发实例详解》连载(二)
最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...
- Python开发技术详解(视频+源码+文档)
Python, 是一种面向对象.直译式计算机程序设计语言.Python语法简捷而清晰,具有丰富和强大的类库.它常被昵称为胶水语言,它能够很轻松的把用其他语言制作的各种模块(尤其是C/C++)轻松地联结 ...
- 前端技术之_CSS详解第三天
前端技术之_CSS详解第三天 二.权重问题深入 2.1 同一个标签,携带了多个类名,有冲突: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
- 前端技术之_CSS详解第四天
前端技术之_CSS详解第四天 一.第三天的小总结 盒模型box model,什么是盒子? 所有的标签都是盒子.无论是div.span.a都是盒子.图片.表单元素一律看做文本. 盒模型有哪些组成: wi ...
随机推荐
- OSSEC
[科普]入侵检测系统ossec配置文件详解 http://www.freebuf.com/articles/system/11862.html http://www.freebuf.com/autho ...
- 常用SNS开源系统比较
常用SNS开源系统比较 这 几天看了很多关于SNS(社交网络服务) 的东西..得到了不少启发..目前的IDEA是..可以在学校弄一个试试..主打的东西不能和现有的SNS冲突(如校内网).利用本地优势. ...
- linux mount / umount 命令的基本用法
linux mount / umount 命令的基本用法 及 开机自动挂载 格式:mount [-参数] [设备名称] [挂载点] 其中常用的参数有: -a 安装在/etc/fstab文件中类出的所有 ...
- POJ2524 Ubiquitous Religions(并查集)
题目链接. 分析: 给定 n 个点和 m 条无项边,求连通分量的数量.用并查集很简单. #include <iostream> #include <cstdio> #inclu ...
- EditText输入长度动态控制,最大长度为16位,小数点后面最大为2位,输入整数只能为13位
首先在xml 中把inputType设置为numberDecimal (包含小数点)然后在把maxLeng设置为16 package com.example.numbertest; import an ...
- HDU_1874——最短路问题,Dijkstra算法模版
Problem Description 某省自从实行了很多年的畅通工程计划后,终于修建了很多路.不过路多了也不好,每次要从一个城镇到另一个城镇时,都有许多种道路方案可以选择,而某些方案要比另一些方案行 ...
- Java学习日记-6 继承
继承1.基本介绍 面向对象程序设计三大原则之一.被继承的称为父类,继承类称为子类.关键字:extends例子: class TwoDshape{ double width; double height ...
- [Design Pattern] Filter Pattern 简单案例
Filter Pattern,即过滤模式,通过不同的过滤标准,或者低耦合将过滤标准组合在一起,对一组对象进行过滤,属于结构类的设计模式. 下面是一个过滤模式的简单案例. Criteria 定义过滤接口 ...
- linux下服务器管理
0.更新国内yum源,参考:http://blog.csdn.net/zhaoyue007101/article/details/8456188 1.创建用户.用户组: 新增用户组 groupadd ...
- 共享一个防止脚本重复启动的shell脚本
项目的一个需求:为防止脚本重复调度,导致同时运行时相互冲突,需要在脚本运行开始前创建一个文件,结束时删除. 脚本启动时判断一下文件是否存在,如果存在则退出. 最开始这样做没发现问题,但跑一段时间后,发 ...