项目演示
项目演示地址：
项目源码：
代码结构
本节做完效果
新增tower.js
//塔类
function Tower(cxt,img,type,x,y,width,height){
this.cxt = cxt;
this.img = img;
this.x = x;
this.y = y;
this.width = width;
this.height = height;
//塔的类型
this.type = type;
//塔的级别
this.level = 1;
//塔的攻击冷却时间
this.cd = 0;
}
Tower.prototype = {
//塔的图片位置
towerMap : [{x:0,y:0},{x:50,y:0},{x:100,y:0},{x:150,y:0},{x:200,y:0}],
//画塔
draw : function(){
Canvas.drawImg(this.cxt,this.img,this.towerMap[this.type].x,this.towerMap[this.type].y,this.width,this.height,this.x,this.y,this.width,this.height);
},
}
var TowerType = [
{
level_1:{
scope:100,buyIt:50,bullet:1,cd:20
},
level_2:{
scope:110,buyIt:50,bullet:1,cd:18
},
level_3:{
scope:120,buyIt:50,bullet:1,cd:15
}
},
{
level_1:{
scope:120,buyIt:75,bullet:1,cd:18
},
level_2:{
scope:130,buyIt:75,bullet:1,cd:15
},
level_3:{
scope:140,buyIt:75,bullet:2,cd:12
}
},
{
level_1:{
scope:140,buyIt:100,bullet:3,cd:18
},
level_2:{
scope:150,buyIt:100,bullet:4,cd:15
},
level_3:{
scope:160,buyIt:100,bullet:5,cd:12
}
},
{
level_1:{
scope:130,buyIt:125,bullet:1,cd:50
},
level_2:{
scope:140,buyIt:125,bullet:1,cd:40
},
level_3:{
scope:150,buyIt:125,bullet:1,cd:30
}
},
{
level_1:{
scope:150,buyIt:150,bullet:1,cd:20
},
level_2:{
scope:160,buyIt:150,bullet:1,cd:15
},
level_3:{
scope:170,buyIt:150,bullet:1,cd:12
}
}
]
//更新塔
function updateTower(){
var tower;
for(var i=0,l=Game.towerList.length;i<l;i++){
tower = Game.towerList[i];
if(!tower)continue;
tower.update(Game.enemyList);
}
}
tool.js
新增
以及
var T = {
//判断一个点是否在一个矩形中
pointInRect : function(point,rect){
if(point.x >= rect.x && point.x <= (rect.x+rect.width)
&& point.y >= rect.y && point.y <= (rect.y + rect.height))
return true;
return false;
},
//判断两个圆是否相交
circleInCircle : function(cir1,cir2){
if(Math.sqrt(Math.pow(cir1.x-cir2.x,2)+Math.pow(cir1.y-cir2.y,2)) < (cir1.radius+cir2.radius))return true;
return false;
},
//判断矩形与圆相交
rectInCircle : function(rect,cir){
var x1 = rect.x,y1 = rect.y,
x2 = rect.x+rect.width,y2= rect.y+rect.height;
if(Math.sqrt(Math.pow(x1-cir.x,2)+Math.pow(y1-cir.y,2)) < cir.radius ||
Math.sqrt(Math.pow(x1-cir.x,2)+Math.pow(y2-cir.y,2)) < cir.radius ||
Math.sqrt(Math.pow(x2-cir.x,2)+Math.pow(y2-cir.y,2)) < cir.radius ||
Math.sqrt(Math.pow(x2-cir.x,2)+Math.pow(y1-cir.y,2)) < cir.radius)
return true;
return false;
}
}
game.js
info.js
新增
//绑定右侧塔的事件
bindEvent : function(){
var self = this,info = document.getElementById("info"),
select = document.getElementById("select"),
main = Game.canvasList.tower,
cxt = Game.canvasList.select;
//鼠标按下
info.onmousedown = function(e){
var x = e.offsetX || e.layerX,
y = e.offsetY || e.layerY,
xIndex,yIndex;
//遍历右侧的塔位置
for(var i=0;i<self.towerPosition.length;i++){
//点击的是塔
if(T.pointInRect({x:x,y:y},self.towerPosition[i])){
//金钱不够,推出
if(self.score - TowerType[i]["level_1"].buyIt < 0)break;
//绑定移动移动事件,也可以说是拖动
select.onmousemove = function(e){
x = e.offsetX || e.layerX;
y = e.offsetY || e.layerY;
xIndex = Math.floor(x / 50);
yIndex = Math.floor(y / 50);
Canvas.clear(cxt,500,500);
//画出塔在左侧区域
Canvas.drawImg(cxt,self.towerImg,i*50,0,50,50,x-25,y-25,50,50);
//画出范围,如果当前位置没有塔而且是可放塔的
if(MapData[xIndex][yIndex] == 0 && !self.installTower[xIndex+"_"+yIndex])Canvas.fillArc(cxt,x,y,TowerType[i]["level_1"].scope,"rgba(25,174,70,0.5)");
else Canvas.fillArc(cxt,x,y,TowerType[i]["level_1"].scope,"rgba(252,82,7,0.5)");
//画出塔具体的放置位置
Canvas.drawRect(cxt,xIndex*50,yIndex*50,50,50,'black');
}
//绑定鼠标释放事件,就是拖动结束
select.onmouseup = function(e){
Canvas.clear(cxt,500,500);
//此位置可以放塔
if(MapData[xIndex][yIndex] == 0 && !self.installTower[xIndex+"_"+yIndex]){
//新增一个塔
var img = document.getElementById("tower_img");
var tower = new Tower(main,img,i,xIndex*50,yIndex*50,50,50);
tower.draw();
//标记当前位置有塔
self.installTower[xIndex+"_"+yIndex] = i+"";
//加入塔的列表中
Game.towerList.push(tower);
//更新金钱
self.updateScore(TowerType[i]["level_1"].buyIt * -1);
}
//取消绑定
this.onmousemove = null;
this.onmouseup = null;
}
break;
}
}
}
//如果鼠标释放的位置还在左侧,则取消此次操作
info.onmouseup = function(){
Canvas.clear(cxt,500,500);
select.onmousemove = null;
select.onmousedown = null;
}
},
//更新金钱
updateScore : function(score){
this.score += score;
this.redraw();
},
并在init中调用
......
this.bindEvent();
