用flashAS3.0做一个连线题

AS3.0做连线题

     博主最近在做一个数学题的项目，根据要求做一些简单的动画或者藏蓄实现其功能。第一次接触项目，感觉很兴奋，正好可以练练手。其中，有一个连线的题目，之前一直没有遇到过，感觉蛮复杂的，现在分享一下如何实现的吧。

     实现的功能：点击选项---出现红线且跟随鼠标移动---只有到正确答案面前才能落下，且有正确铃声。若是错误答案不落下且有错误铃声---有重新连线和正确答案功能

     代码如下：

import flash.media.Sound;

var i:int;
var p1 = new Point;//记录划线开始点
var p2 = new Point;//记录划线结束点
var cricleEnd:Shape = new Shape;//用于画点
var c_size:int = 3;//点的半径
var stopLine:Shape = new Shape;//用于跟随画线
var newLine:Shape = new Shape;//用于直接画线
var last_qus: int;//用于判断答案是否正确 
var sound: Sound;//用于播放音效

start_btn.addEventListener(MouseEvent.CLICK, start_line);//开始连线
replay_btn.addEventListener(MouseEvent.CLICK, replay_line);//重新连线
ans_btn.addEventListener(MouseEvent.CLICK, show_ans);//重新连线
function start_line(e)
{
	replay_line(Event)//清除连线
	//点击问题
	for (i=1; i<=4; i++)
	{
		this["mc" + i].buttonMode = true;
		this["mc" + i].addEventListener(MouseEvent.CLICK, draw_point);
	}
	//点击答案
	for (i=1; i<=4; i++)
	{
		this["ans" + i].buttonMode = true;
		this["ans" + i].addEventListener(MouseEvent.CLICK, stop_line);
	}
}

//画点
function draw_point(e)
{
	last_qus = e.currentTarget.name.charAt(e.currentTarget.name.length - 1);
	p1.x = e.currentTarget.x;
	p1.y = e.currentTarget.y;
	var c_size:int = 3;
	cricleEnd.graphics.beginFill(0xFF3300,1);
	cricleEnd.graphics.drawCircle(p1.x, p1.y, c_size);
	cricleEnd.graphics.endFill();
	this.addChild(cricleEnd);
	//点击完之后移除点击事件和手型
	this["mc" + last_qus].buttonMode = false;
	this["mc" + last_qus].removeEventListener(MouseEvent.CLICK, draw_point);
	//加上鼠标跟随的监听
	stage.addEventListener(MouseEvent.MOUSE_MOVE,draw_line);
}
function draw_line(e)
{
	stopLine.graphics.clear();
	stopLine.graphics.lineStyle(3,0xFF3300,1);
	stopLine.graphics.moveTo(p1.x, p1.y);
	stopLine.graphics.lineTo(mouseX,mouseY);
	this.addChild(stopLine);
}

function stop_line(e)
{
	var a: int= e.currentTarget.name.charAt(e.currentTarget.name.length - 1);
	if ( last_qus !=  a)//选择错误
	{
		sound = new wrong_sound();
		sound.play();
	}
	else
	{
		//选择正确
	sound = new right_sound();
	sound.play();
	stage.removeEventListener(MouseEvent.MOUSE_MOVE,draw_line);
	p2.x = e.currentTarget.x-10;
	p2.y = e.currentTarget.y;
	cricleEnd.graphics.beginFill(0xFF3300,1);
	cricleEnd.graphics.drawCircle(p2.x, p2.y, c_size);
	cricleEnd.graphics.endFill();
	this.addChild(cricleEnd);
	//划线
	stopLine.graphics.clear();
	newLine.graphics.lineStyle(3,0xFF3300,1);//颜色和粗细
	newLine.graphics.moveTo(p1.x, p1.y);//起点
	newLine.graphics.lineTo(p2.x, p2.y);//终点
	this.addChild(newLine);//显示
	
	//移除事件
	this["ans" + a].buttonMode = false;
	this["ans" + a].removeEventListener(MouseEvent.CLICK, stop_line);
	}
}

大多采用鼠标侦听事件，重新连线和正确答案的代码如下：

//清除连线
function replay_line(e)
{
	newLine.graphics.clear();//清除线
	cricleEnd.graphics.clear();//清除点
}

//显示答案
function show_ans(e)
{
	replay_line(Event);
	//画点
	cricleEnd.graphics.beginFill(0xFC0000,1);
	cricleEnd.graphics.drawCircle(mc1.x, mc1.y, c_size);
	cricleEnd.graphics.drawCircle(mc2.x, mc2.y, c_size);
	cricleEnd.graphics.drawCircle(mc3.x, mc3.y, c_size);
	cricleEnd.graphics.drawCircle(mc4.x, mc4.y, c_size);
	cricleEnd.graphics.drawCircle(ans1.x-10, ans1.y, c_size);
	cricleEnd.graphics.drawCircle(ans2.x-10, ans2.y, c_size);
	cricleEnd.graphics.drawCircle(ans3.x-10, ans3.y, c_size);
	cricleEnd.graphics.drawCircle(ans4.x-10, ans4.y, c_size);
	cricleEnd.graphics.endFill();
	this.addChild(cricleEnd);
	//划线
	newLine.graphics.lineStyle(3,0xFC0000,1);
	newLine.graphics.moveTo(mc1.x, mc1.y);
	newLine.graphics.lineTo(ans1.x-10, ans1.y);
	newLine.graphics.moveTo(mc2.x, mc2.y);
	newLine.graphics.lineTo(ans2.x-10, ans2.y);
	newLine.graphics.moveTo(mc3.x, mc3.y);
	newLine.graphics.lineTo(ans3.x-10, ans3.y);
	newLine.graphics.moveTo(mc4.x, mc4.y);
	newLine.graphics.lineTo(ans4.x-10, ans4.y);
	this.addChild(newLine);
}

希望该博客能对你有所帮助，也可以留言提问。。。