一直想自己做点小东西，直到最近看了本《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详解的更多相关文章

  1. [Canvas前端游戏开发]——FlappyBird详解

    一直想自己做点小东西,直到最近看了本<HTML5游戏开发>,才了解游戏开发中的一点点入门知识. 本篇就针对学习的几个样例,自己动手实践,做了个FlappyBird,源码共享在度盘 :也可以 ...

  2. unity3D游戏开发之详解Animation类和Animator类

    详解Animator类和Animation类 链接: http://wenku.baidu.com/link?url=SiaUYcdrNYjOYrWVDJSKGAYdJOntMTOhsVJtyBk2i ...

  3. 当里个当，免费的HTML5连载来了《HTML5网页开发实例详解》连载（一）

    读懂<HTML5网页开发实例详解>这本书 你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信“Flash之我见”中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得 ...

  4. Extjs MVC开发模式详解

    Extjs MVC开发模式详解   在JS的开发过程中,大规模的JS脚本难以组织和维护,这一直是困扰前端开发人员的头等问题.Extjs为了解决这种问题,在Extjs 4.x版本中引入了MVC开发模式, ...

  5. Cocos2d-x 3.X手游开发实例详解

    Cocos2d-x 3.X手游开发实例详解(最新最简Cocos2d-x手机游戏开发学习方法,以热门游戏2048.卡牌为例,完整再现手游的开发过程,实例丰富,代码完备,Cocos2d-x作者之一林顺和泰 ...

  6. 免费的HTML5连载来了《HTML5网页开发实例详解》连载（二）

    最近新浪.百度.腾讯.京东.大众点评.淘宝等流行的网站都加大了招聘HTML5的力度,HTML5开发人员成了抢手货,本次连载的是由大众点评前端工程师和一淘网前端工程师基情奉献的<HTML5网页开发 ...

  7. Python开发技术详解（视频+源码+文档）

    Python, 是一种面向对象.直译式计算机程序设计语言.Python语法简捷而清晰,具有丰富和强大的类库.它常被昵称为胶水语言,它能够很轻松的把用其他语言制作的各种模块(尤其是C/C++)轻松地联结 ...

  8. 前端技术之_CSS详解第三天

    前端技术之_CSS详解第三天 二.权重问题深入 2.1 同一个标签,携带了多个类名,有冲突: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  9. 前端技术之_CSS详解第四天

    前端技术之_CSS详解第四天 一.第三天的小总结 盒模型box model,什么是盒子? 所有的标签都是盒子.无论是div.span.a都是盒子.图片.表单元素一律看做文本. 盒模型有哪些组成: wi ...

随机推荐

  1. udp丢包原因分析

    1.  发送方没有进行频率控制(令牌桶算法),短时间内大量的包发送到server端,server端是单线程,先epoll wait,再process,就会造程process时丢掉server传过来的包 ...

  2. perl 分析mysql binlog

    binlog 日志格式: use `zjzc`/*!*/; SET TIMESTAMP=1476326343/*!*/; UPDATE `ProductAccess` pa SET pa.access ...

  3. 【转】android 4.3 BLE onCharacteristicWrite没有回调

    原文网址:http://bbs.csdn.net/topics/390882717?page=1 问题1.我在自己程序有开一个Timer定时去readCharacteristic, 每次read可以成 ...

  4. HiveServer连接优化

    引言   数据平台目前通过Hive SQL的方式提供数据分析服务,系统使用多台HiveServer(JDBCServer)接收客户端连接请求,实际使用场景中频频出现HiveServer内存消耗过多导致 ...

  5. Delphi中文本文件的操作

    Delphi中文本文件的操作 相关知识内容: 在对文本文件进行任何处理之前,首先要打开此文本文件.声明变量:通过此变量可以来引用一个文本文件. 打开一个文件需要两步:首先是 AssignFile(), ...

  6. LeetCode——Remove Duplicates from Sorted Array

    Given a sorted array, remove the duplicates in place such that each element appear only once and ret ...

  7. 甲骨文公司 Oracle

    甲骨文公司 甲骨文公司,全称甲骨文股份有限公司,是全球最大的企业软件公司,总部位于美国加利福尼亚州的红木滩.甲骨文是继Microsoft之后,全球收入第二多的软件公司.甲骨文公司1989年正式进入中国 ...

  8. bda_百度百科

    bda_百度百科 bda

  9. windows server 2003 64x 读取office数据终极解决办法 The 'Microsoft.Jet.OLEDB.4.0' provider is not registered

    微软老子信了你的邪!      试了各种办法没有效果 网友解决办法一: The 'Microsoft.Jet.OLEDB.4.0' provider is not registered on the ...

  10. jQuery.holdReady()方法用法实例

    调用此方法可以延迟jQuery的ready事件,也就是说尽管文档已经加载完成,也不会执行ready事件处理方法.可以多次调用jQuery.holdReady()方法,以延迟jQuery的ready事件 ...