HTML5+JS游戏开发模块----canvas图片拖放

边学边做笔记，现在游戏开发进入下一个阶段，canvas图片拖放模块，如果要做塔防类游戏，少不了拖放炮塔之类的。HTML5提供拖放标签，draggable，ondrop，ondragover,ondragup等标签实现元素拖放，但是，canvas内部图片是无法使用这种方式的。

canvas拖放难点：

1.鼠标移动到canvas上，记录鼠标坐标

2.怎样确定鼠标是否在图片上

3.怎样让图片跟随鼠标移动（模拟拖图片过程）

4.怎样让图片落到指定方块内

首先，鼠标移动到canvas上记录坐标，这个简单，只需要注意下兼容就好

if(e.offSetX||e.layerX){//兼容浏览器
		this.mx=e.offSetX==undefined?e.layerX:e.offSetX;
		this.my=e.offSetY==undefined?e.layerY:e.offSetY;
	}

鼠标是否在图片上，需要增加范围判断，然后在给个变量赋值this.isDown=true;，作为是否让图片跟随依据

//对比坐标位置，是否点击图片
	if(this.mxX){
		if(this.myY){
			this.isDown=true;
		}
	}else{
		this.isDown=false;
	}

鼠标点击了图片，那么接下来就要图片跟随鼠标运动，原理就是鼠标的xy坐标作为绘画点，插入绘制图片的函数中去，然后不断的清理屏幕，重新画图

//如果isDown为真
	if(this.isDown){
		X=this.mx-W/2;//图片跟随鼠标移动
		Y=this.my-H/2;
	}

清理屏幕，画图函数就不说了

然后就是确定图片落在那个方块中

if(XparseInt(X/50)*50){
		if(YparseInt(Y/50)*50){
			if(X<500&&Y<500&&X>0&&Y>0){
				X=parseInt(X/50)*50; //转换为方块坐标
				Y=parseInt(Y/50)*50;	
			}}

上面简单说一下，之前图片跟随时候，鼠标是保持在图片中间的部分，所以XY点就不是方块左上角的点，故我们要把XY重新赋值

到这里，上面几个难点基本解决，之后就是程序简单框架搭建，turret.js是炮塔类，但由于个人初学者，搞不明白鼠标事件为何接收不到内部this.x坐标，同样也无法改变，所以搞几个全局变量，但有违类搭建原则，而我无能为力，后期重新分配类的属性吧，暂时将就一下。

html页面

炮塔类，好失败的类，汗！！！

var X,Y,W,H,isRect;

//炮塔类
function Turret(img){//传入图片地址
	this.x=X;
	this.y=Y;
	this.w=W;//图片宽
	this.h=H;
	this.mx;//鼠标坐标
	this.my;
	this.img=img;
	this.isDown=false;//是否点中图片
	this.ctx;
	this.isRect=isRect;
}
//初始化炮塔
Turret.prototype.init=function(){
	X=515;
	Y=200;//图片坐标
	W=50;
	H=50;
	isDown=false;//默认鼠标没有点击图片
}
//重绘制炮塔
Turret.prototype.draw=function(){
	if(isRect&&X<500&&Y<500){
		this.ctx.arc(X+W/2,Y+H/2,150,0,2*Math.PI,false);
		this.ctx.fillStyle='rgba(232,225,225,0.2)';//火力范围
		this.ctx.fill();
		this.ctx.strokeStyle='red';
		this.ctx.stroke();
	}
	this.ctx.drawImage(this.img,X,Y,W,H);
}
//鼠标按下，确定是否点击到炮塔图片
Turret.prototype.OnMouseDown=function(e){
	isRect=true;
	if(e.offSetX||e.layerX){//兼容浏览器
		this.mx=e.offSetX==undefined?e.layerX:e.offSetX;
		this.my=e.offSetY==undefined?e.layerY:e.offSetY;
	}
	//对比坐标位置，是否点击图片
	if(this.mxX){
		if(this.myY){
			this.isDown=true;
		}
	}else{
		this.isDown=false;
	}
	
}
//鼠标移动
Turret.prototype.OnMouseMove=function(e){
	if(e.offSetX||e.layerX){//兼容浏览器
		this.mx=e.offSetX==undefined?e.layerX:e.offSetX;
		this.my=e.offSetY==undefined?e.layerY:e.offSetY;
	}
	//如果isDown为真
	if(this.isDown){
		X=this.mx-W/2;//图片跟随鼠标移动
		Y=this.my-H/2;
	}
}
//鼠标按键松开
Turret.prototype.OnMouseUp=function(e){
	if(e.offSetX||e.layerX){//兼容浏览器
		this.mx=e.offSetX==undefined?e.layerX:e.offSetX;
		this.my=e.offSetY==undefined?e.layerY:e.offSetY;
	}
	//接收图片
	//如果图片当前坐标在某一个格子内，重画
	if(XparseInt(X/50)*50){
		if(YparseInt(Y/50)*50){
			if(X<500&&Y<500&&X>0&&Y>0){
				X=parseInt(X/50)*50; //转换为方块坐标
				Y=parseInt(Y/50)*50;	
			}
			else{
				X=515;
				Y=200;
				this.isDown=false;
			}
			this.isDown=false;
			isRect=false;
		}
	}

}

实现鼠标拖放功能，接下来可能是要出塔防游戏，不过目前遇到问题，子弹跟随目标移动，目标寻路算法（压根看不懂算法），子弹碰撞，子弹飞行范围等一系列难题等待我慢慢解决。加油。

游戏截图

完整代码下载