从零开始手把手教你使用javascript+canvas开发一个

项目演示

项目演示地址：

体验一下

项目源码：

项目源码

代码结构

本节做完效果

修改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");
    }
    
}

项目源码：

项目源码