Animate 中HTMLCanvas 画布下实现拖拽、释放、吸附的拼图游戏

1.舞台上物体拖拽 2.松手以后，检查是否移动到范围内，是则自动吸附 3.播放音效 4.变量+1，显示在舞台的动态文本中

1.实现拖拽

下面代码实现拖拽和释放 地图模块

//记录原始位置
var OriX=this.my_mc.x;
var OriY=this.my_mc.y;this.my_mc.on("pressmove", function(evt) {console.log("开始拖拽");// 同时演示两种访问方式evt.currentTarget.x = evt.stageX;evt.currentTarget.y = evt.stageY;    this.stage.update(); // 访问舞台必须加this
}.bind(this)); // 重要！绑定当前作用域this.my_mc.on("pressup", function(evt) {console.log("开始释放");// 同时演示两种访问方式evt.currentTarget.x = OriX;evt.currentTarget.y = OriY;    this.stage.update(); // 访问舞台必须加this
}.bind(this)); // 重要！绑定当前作用域

2.实现自动吸附

1.首先记录目标点坐标

2.实现自动吸附

在目标位置创建一个看不见的元件叫target

松开鼠标后，判断下地图块的X坐标是否在targetx附近，如果在就直接让地图块坐标等于target的坐标！

  console.log("开始释放");// 松开鼠标if(evt.currentTarget.x>targetPosX-60&&evt.currentTarget.x<targetPosX+60)	{console.log("开始释放");evt.currentTarget.x =targetPosX;		evt.currentTarget.y=targetPosY;	//加分this.score.text+=10;this.music.gotoAndPlay(1);}else{evt.currentTarget.x = OriX;evt.currentTarget.y = OriY; }	

3.播放音效和加分

    this.score.text+=10;
        this.music.gotoAndPlay(1);

最终源码：

//记录原始位置
var OriX=this.Shanxi.x;
var OriY=this.Shanxi.y;var targetPosX=this.target01.x;
var targetPosY=this.target01.y;
//===============this.Shanxi.on("pressmove", function(evt) 
{console.log("开始拖拽");// 同时演示两种访问方式evt.currentTarget.x = evt.stageX;evt.currentTarget.y = evt.stageY;    this.stage.update(); // 访问舞台必须加this
}.bind(this)); // 重要！绑定当前作用域this.Shanxi.on("pressup", function(evt) {console.log("开始释放");// 松开鼠标if(evt.currentTarget.x>targetPosX-60&&evt.currentTarget.x<targetPosX+60)	{console.log("开始释放");evt.currentTarget.x =targetPosX;		evt.currentTarget.y=targetPosY;	//加分this.score.text+=10;this.music.gotoAndPlay(1);}else{evt.currentTarget.x = OriX;evt.currentTarget.y = OriY; }	this.stage.update(); // 访问舞台必须加this
}.bind(this)); // 重要！绑定当前作用域var _this = this;
/*
单击指定元件实例时将执行相应函数。
*/
_this.music.on('click', function(){
/*
将播放头移动到时间轴中的指定帧编号并继续从该帧播放。
可在主时间轴或影片剪辑时间轴上使用。
*/
_this.music.gotoAndPlay(1);
});