Flappy bird web小游戏
文章平均质量分 81
通过javascript canvas制作的web小游戏。
HuPanIT
这个作者很懒,什么都没留下…
展开
-
网页游戏Flappy Birds从0开始制作(一):项目前准备
网页游戏Flappy Birds从0开始制作(一):项目前准备首先需要新建一个工程文件存放工程资源及脚本。接下来找到我峨嵋你需要的资源文件,关于Flappy bird网上有很多素材,我找到的也粘贴出来:将以上资源存放在工程文件下的img文件下,有利于后于利用。首先网页游戏需要放在Canvas进行,首先创建html文件,定义一个canvas标签并通过javascript获取到该canvas<!...原创 2018-05-12 10:34:22 · 454 阅读 · 0 评论 -
网页游戏Flappy Birds从0开始制作(二):场景Land类
网页游戏Flappy Birds从0开始制作(二):场景Land类整个游戏的思维方式是背景层向后移动,而bird是在原地上下跳跃来躲避管道,这种方式在2D游戏中很常见,比如某某跑酷类游戏。Land类的编写实质上分为4个主要函数:构造函数:给地图一个构造函数,并赋予其图片,位置,速度,以及canvas的绘制var Land=function(img,x,speed,ctx){ this.img=i...原创 2018-05-12 10:47:58 · 516 阅读 · 1 评论 -
网页游戏Flappy Birds从0开始制作(三):场景Sky类
网页游戏Flappy Birds从0开始制作(三):场景Sky类同Land类类似,Sky也属于背景层,也是以一定速度向后方移动。原理一样,我直接上代码://同Land类似设置sky的构造函数var Sky=function (img,x,speed,ctx) { this.img=img; this.x=x; this.speed=speed; this.ctx=ctx} this.ctx....原创 2018-05-12 11:09:00 · 276 阅读 · 0 评论 -
网页游戏Flappy Birds从0开始制作:补充canvas知识
网页游戏Flappy Birds从0开始制作:补充canvas知识1.对于HTML5的内容,为了处理浏览器兼容问题,所以我们首先需要判断浏览器是否支持canvas标签,判断方法如下:<body> <h1>判断浏览器是否支持canvas</h1> <canvas> 你的浏览器不支持canvas标签 </canvas&...原创 2018-05-12 11:41:11 · 282 阅读 · 0 评论 -
网页游戏Flappy Birds从0开始制作(四):场景Tunnel类 管道
网页游戏Flappy Birds从0开始制作(四):场景Tunnel类 管道管道和背景其实类似,不过canvas里的管道比背景land,sky多一些罢了,管道分为上下两部分,横向以相同间距设置,直接上源码://管道的构造函数var Tunnel=function(up,down,x,speed,ctx){ this.up=up; this.down=down; th...原创 2018-05-12 15:49:41 · 478 阅读 · 0 评论 -
网页游戏Flappy Birds从0开始制作(五):场景Player小鸟类
网页游戏Flappy Birds从0开始制作(五):场景Player小鸟类//为鸟构造函数var Bird = function (img,x,y,speed,a,ctx){ this.img = img; this.x = x; this.y = y; this.speed = speed; this.a =a ; this.ctx = ctx;...原创 2018-05-12 15:55:56 · 311 阅读 · 0 评论 -
网页游戏Flappy Birds从0开始制作(六):场景LoadSource类
为了使脉络更清晰,资源的获取我也专门生命了一个类:具体代码如下所示:function load(source,callback){ var imgs={}; var imgCount=source.length; for(var i=0;i<imgCount;i++){ var name=source[i].name; var newImg=new Image(); new...原创 2018-05-12 16:01:19 · 219 阅读 · 0 评论 -
网页游戏Flappy Birds从0开始制作(七):初步完成游戏制作,可以开始游戏。
网页游戏Flappy Birds从0开始制作(七):初步完成游戏制作,可以开始游戏。这一章则使一一加入场景元素,land,birds,Tunnel,sky,完成游戏初步demo.第一步加入资源,即将用到上一章节的loadSource方法。首先声明一个资源的对象数组并初始化数据:var imglist = [ { "name":"birds","src":"img/birds...原创 2018-05-12 16:21:06 · 1499 阅读 · 0 评论