HTML5:Animate cc交互之“拖拽”“碰撞”功能

1.实现效果:鼠标对某图片按下，并拖动，拖动的物体变成“移液枪”，鼠标不见。移液枪拖拽到试管口时，松开会触发“正确”，如果移液枪没有拖拽到试管口就松开了，会弹出，“错误”

2.实现步骤：

a.在第一帧帧输入

 

//封装拖拽

//zqnum,rq
//那个工具，那个热区

istouch1 = false;//判断拖拽对错

arrwz = [//默认位置
	[S.tzgj1.x, S.tzgj1.y],
	[S.tzgj2.x, S.tzgj2.y],
	[S.tzgj3.x, S.tzgj3.y],
	[S.tzgj4.x, S.tzgj4.y],
	[S.tzgj5.x, S.tzgj5.y],
];


Tzfun = function (zqnum, rq) {


	/*按下事件*/
	for (var i = 1; i < 6; i++) {
		S["tzgj" + i].x = arrwz[i - 1][0];
		S["tzgj" + i].y = arrwz[i - 1][1];
		S["tzgj" + i].addEventListener("mousedown", gj_Down);
	}

	function gj_Down(e) {
		num = e.currentTarget.name.substr(4, 2);

		S["tzgj" + num].x = stage.mouseX / stage.scaleX;
		S["tzgj" + num].y = stage.mouseY / stage.scaleY;

		stage.addEventListener("pressmove", gj_Move);
		stage.addEventListener("pressup", gj_Up);

	}
	/*经过事件*/
	function gj_Move(event) {
		//S.cursor = "none";
		S["tzgj" + num].x = stage.mouseX / stage.scaleX;
		S["tzgj" + num].y = stage.mouseY / stage.scaleY;
		if (num == zqnum) {
			var pt = S["tzgj" + num].localToLocal(0, 0, rq); //yyq_mc是移液枪 shi_guang是热区
			istouch1 = rq.hitTest(pt.x, pt.y);
		}


	}



	/*松开事件*/
	function gj_Up(event) {
		//S.cursor = "default";
		stage.removeEventListener("mousedown", gj_Down); //删除按下事件
		stage.removeEventListener("pressup", gj_Up); //删除松开事件
		stage.removeEventListener("pressmove", gj_Move); //删除鼠标经过事件

		for (var i = 1; i < 6; i++) {
			S["tzgj" + i].x = arrwz[i - 1][0];
			S["tzgj" + i].y = arrwz[i - 1][1];
		}
		if (istouch1) {
			//拖拽正确
			alert(1);
			for (var i = 1; i < 6; i++) {
				S["tzgj" + i].removeEventListener("mousedown", gj_Down);
			}
		nextPlay();

		} else {

			alert(2);
			//拖拽错误


		}

		istouch1 = false;

	}

}

Tzfun(1, S.rq_gj1)