博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[Canvas前端游戏开发]——FlappyBird详解
阅读量:5864 次
发布时间:2019-06-19

本文共 2624 字,大约阅读时间需要 8 分钟。

一直想自己做点小东西,直到最近看了本《》,才了解游戏开发中的一点点入门知识。

本篇就针对学习的几个样例,自己动手实践,做了个FlappyBird, ;也可以参考,里面有更多的游戏样例。

游戏截图

HTML5之Canvas

Canvas是Html5中用于绘图的元素,它可以绘制各种图形,比如长方形,多边形,圆形等等。如果想要了解Canvas的使用可以参考:

 

//如果想要使用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)&&(bird.by>up_pipe.py)&&(bird.bx+bird.bwidth

条件2下管道的检测为:

((bird.bx>down_pipe.px)&&(bird.by>down_pipe.py)&&(bird.bx
down_pipe.px)&&(bird.by+bird.bheight>down_pipe.py)&&(bird.bx

条件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。

全部源码

    Flappy Bird    
Your browser is not support canvas!
View Code

总结

在学习游戏开发的时候,我突然怀念起大学的物理。当时很纳闷,学计算机学什么物理,后来再接触游戏开发才知道,没有一定的物理知识,根本无法模拟游戏中的各个场景。

而通过这个简单的小游戏,也捡起来了很多旧知识。

参考

【1】:

【2】:《》

【3】:EdisonChou的

转载地址:http://veunx.baihongyu.com/

你可能感兴趣的文章
前嗅ForeSpider教程:采集需要登陆的网页内容
查看>>
SID 的变化
查看>>
Python学习--subprocess
查看>>
基于bootstrap的简单响应式菜单
查看>>
如何在同一篇文章里不同位置引用同一篇参考文献
查看>>
程序员不可不知的Linux性能工具
查看>>
Tornado框架的初步使用
查看>>
PostgreSQL Redo 出错的恢复
查看>>
Collections笔记
查看>>
django RESTful研究一第一个测试例子
查看>>
be yet to用法
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
JAVA EE 学习路线
查看>>
Android电源管理之wake_lock
查看>>
git在错误的分支上提交了代码如何优雅的迁移到正确的分支
查看>>
linux date的几个简单使用
查看>>
the vmrc console has disconnected attempting to reconnect
查看>>
Linux 之HA集群配置
查看>>
Linux远程命令
查看>>