项目演示
项目演示地址:
项目源码:
代码结构
本节做完效果
修改game.js
新增info.js
//右侧信息显示类 var Info = { score : 100, life : 10, mission : 1, //塔的图片对象 towerImg : null, //每种塔在右侧的位置信息 towerPosition : [], //已经安装的塔的位置信息 installTower : {}, init : function(cxt,img){ this.redraw(); //画塔 for(var i = 0;i<5;i++){ Canvas.drawImg(cxt,img,i*50,0,50,50,25,100+i*70,50,50); this.towerPosition.push({x:25,y:100+i*70,width:50,height:50}); } //画塔下的描述信息 Canvas.drawText(cxt,"50(↑50)",25,160,'orange'); Canvas.drawText(cxt,"75(↑75)",25,230,'orange'); Canvas.drawText(cxt,"100(↑100)",20,300,'orange'); Canvas.drawText(cxt,"125(↑125)",20,370,'orange'); Canvas.drawText(cxt,"150(↑150)",20,440,'orange'); this.towerImg = img; }, //重画 redraw : function(){ Canvas.clear(Game.canvasList.info,100,100); Canvas.drawText(Game.canvasList.info,"金钱:"+this.score,20,30,"red"); Canvas.drawText(Game.canvasList.info,"第"+this.mission+"波",20,60,"red"); Canvas.drawText(Game.canvasList.info,"剩余:"+this.life,20,90,"red"); } }