# 从零开始手把手教你使用javascript+canvas开发一个塔防游戏05拖拽塔到地图上

+关注继续查看

### 新增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:{
},
level_2:{
},
level_3:{
}
},
{
level_1:{
},
level_2:{
},
level_3:{
}
},
{
level_1:{
},
level_2:{
},
level_3:{
}
},
{
level_1:{
},
level_2:{
},
level_3:{
}
},
{
level_1:{
},
level_2:{
},
level_3:{
}
}
]
//更新塔
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){

return false;

},
//判断矩形与圆相交
rectInCircle : function(rect,cir){

var x1 = rect.x,y1 = rect.y,
x2 = rect.x+rect.width,y2= rect.y+rect.height;

return true;

return false;
}

}

### 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])){
//金钱不够,推出
//绑定移动移动事件,也可以说是拖动
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);
//更新金钱
}
//取消绑定
this.onmousemove = null;
this.onmouseup = null;
}

break;
}
}
}
//如果鼠标释放的位置还在左侧,则取消此次操作
info.onmouseup = function(){

Canvas.clear(cxt,500,500);

select.onmousemove = null;
select.onmousedown = null;
}
},
//更新金钱
this.score += score;

this.redraw();
},

......
this.bindEvent();

### 项目源码：

|
2月前
|
JavaScript 前端开发 定位技术
JavaScript如何操作实现一个地图并标记到自身当前位置（本文从创建key值开始，到实现标点结束）
JavaScript如何操作实现一个地图并标记到自身当前位置（本文从创建key值开始，到实现标点结束）
26 0
|
4月前
|
JavaScript 前端开发 定位技术
js实现地图选点获取经纬度
js实现地图选点获取经纬度
60 0
|
5月前
|

477 0
|
5月前
|
XML 存储 JavaScript
Echarts实战案例代码(18)：GIS地图中GeoJson、TopoJson、SVG、SHP、JS常见格式相互转化的基础知识
Echarts实战案例代码(18)：GIS地图中GeoJson、TopoJson、SVG、SHP、JS常见格式相互转化的基础知识
239 0
|
5月前
|
JavaScript 数据可视化 定位技术
Echarts实战案例代码(11)：利用geojson数据地图map组件生成js本地版直接访问的解决方案
Echarts实战案例代码(11)：利用geojson数据地图map组件生成js本地版直接访问的解决方案
177 0
|
7月前
|

74 0
|
10月前
|
JavaScript 定位技术

195 0
|
JavaScript 前端开发 定位技术

508 0
|
JavaScript 定位技术 API

1181 0
1款3D地图实景开发工具，JS前端工程师轻松构建 ThingJS 3D地图 全景 可视化
ThingJS是市场上1款3D软件开发方法，为了创业项目团队的拓展，更应保证做到普适化，这是轻量化研发设计3D地图可视化的核心价值。 先来看看ThingJS-CityBuilder城市地图可视化的郊果。
5840 0