[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