从零开始手把手教你使用javascript+canvas开发一个塔防游戏04右侧信息展板

豆约翰

于 2020-12-30 17:58:02 发布

阅读量173

点赞数

分类专栏： javascript开发塔防游戏系列

本文链接：https://blog.csdn.net/douyh/article/details/111995769

版权

游戏开发 Canvas 信息显示 JavaScript 项目演示

关键词由CSDN通过智能技术生成

javascript开发塔防游戏系列专栏收录该内容

7 篇文章 6 订阅

订阅专栏

项目演示

项目演示地址：

体验一下

项目源码：

项目源码

代码结构

本节做完效果

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