使用HTML5 Canvas制作一个容易的打飞机游戏

this.name==="badPlan"){ ctx.save(); ctx.translate(this.left , this.top); ctx.rotate(this.rotateAngle); this.painter.paint(this); ctx.restore(); }else { this.painter.paint(this); } } }, update:function(time){ if(this.behaviors){ for(var i=0;i<this.behaviors.length;i++){ this.behaviors[i].execute(this,time); } } } }

写出精灵类后，就可以通过编写每个的painter以及behavior来生成不同的对象了。接下来就是写painter了，painter分成两种，一种是普通的painter，一种就是精灵表painter，因为像爆炸动画，飞机开枪动画，都不是一张图片就能搞定的，所以就需要用到精灵表了：

而绘制这些就要为他们定制一个精灵表绘制器，下面这个是最简单的精灵表绘制器，针对游戏的复杂性可以相对的修改精灵表写法，直到合适，不过原理都大同小异，就是小修小改而已：

XML/HTML Code复制内容到剪贴板

var SpriteSheetPainter = function(cells){   
            this.cells = cells 

关键词：运用HTML5 Canvas制作一个容易的打飞机游戏