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

//塔类
 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);
    }
}

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;
    }
 }

//绑定右侧塔的事件
    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();
    },

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