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