Flash AS入门教程第七课综合练习：制作拼图游戏

【 tulaoshi.com - Flash 】

本系列Flash教程由中国Flash互助课堂专为Flash新手制作，更多教程和练习请点击这里，在这里有系列的教程、练习，并有老师对练习进行点评与指导，欢迎朋友们的光临！

上一节：Flash AS入门教程第七课：影片剪辑第6节使用遮罩

更多Flash AS教程：http://www.jcwcn.com/portal-topic-topicid-1.html

AS入门教程第7课综练习-拼图游戏制作

效果演示：

[next]

本练习通过一个拼图游戏制作，进一步熟悉MC的拖放与撞碰检测的应用。为了使碰撞检测的几种方式都能得到应用，我们将游戏分为高、中、低三个级别。现在我们来分析一下游戏的实现和级别找分依据。我们将一张图片撕碎以后，将碎片转换为MC，并复制一份，将其中一份拼回原图。碎片被点下鼠标时实现拖动，当拖到图片上时，放开鼠标，停止拖动，并检测碰撞，如果实现碰撞则自动将碎片与相应位置对齐。碰撞检测有两种方式，一种是碎片MC与原图MC进行碰撞检测，这种碰撞检测是检测两个MC的外框（矩形）是否发生碰撞，这个范围是很大的，当碎片被拖到原图上相应碎片附近时，即使两个图实际并没有发生交叉，但它们的外框已经相交了。那么这个定为初级。这种碰撞检测就比较简单，只要批碎片拖到原图附近就行了，大致差不多都行。另一种检测是碎片MC与原图中碎片MC的注册点进行检测，同时将参数中的布尔值设为true，那么碎片MC的实际图片部分与原图碎片的注册点相交才行。很显然这个难度增大了很多，位置必须准确才行。这个定为中级。第三种方式是不进行碰撞检测，碎片不会自动定位，你把它拖到哪，它就在哪，正不正确不知道。看起来这种方式应该是最难的。所以定为高级。

好，现在开始制作：

1． 新建一flash文档，导入一张图片，并放到舞台上的右半部，宽为舞台的一半的样子。如下图：

2． 点击修改分离，将图片打散。用套索工具，在图上画一小块图形，这样这块图形被选中，然后点击：修改转换为元件，转换为 MC.名称为tu1双击它，居中对齐。回到主场景，打开属性面板，实例名称为：tu1.将这块图形移开一定距离，移开的目的，是为了好画下一个。所以现在画下一个，一样的做法，只是实例名称是：tu2.直到将图片全部切碎。需要注意的是：碎片元件名称和实例名称都从tu1开始连续取名，如 tu2,tu3..，不要重复，也不要漏掉，要连续。以下将这些碎片称为原图MC。

3． 将图片拼回去，位置在舞台的右半部，一定要拼好，因为这个是要作为标准的。可以将舞台放大，也可以在下面插入一层，将图片放进来，把透明度降低一点，然后比到拼，拼好后，再将这层删了就行。拼好的图层上锁。

4． 新插入一图层，将tu1元件从库中拖到舞台的左边稍上一点，下面留一点空间放按钮。打开属性面板，实例名称为：mc1。接下来拖tu2，实例名称为mc2..，直到将碎片全部拖到舞台上。上锁。以下将这些碎片称为碎片MC。

5． 新插入一层，新建6个按钮元件，放到舞台相应位置。标签和实例名称分别为：
重玩-cw_btn
看原图-yt_btn
隐藏-yc_btn
初级-cj_btn
中级-zj_btn
高级-gj_btn

6．画一个无填充红色笔触的矩形，框住初级按钮，将它转换为元件，实例名称为xz_mc。

[next]

7．新插入一层，命名为：action,输入如下代码：

var dj = 1;
for (i=1;i<29;i++){
mymc_mc = this["mc"+i];
tumc_mc = this["tu"+i];
tumc_mc._visible=false;
td(mymc_mc,tumc_mc);

}

function td (my_mc,tu_mc){
mymc_mc.onPress = function(){
this.startDrag();
dx = this._x;
dy = this._y;
}
mymc_mc.onRelease = function(){
stopDrag();
if (dj==1){
if(this.hitTest(tu_mc)){
this._x = tu_mc._x;
this._y = tu_mc._y;
} else {
this._x=dx;
this._y = dy;
}
} else if (dj==2){
if(this.hitTest(tu_mc._x,tu_mc._y,true)){
this._x = tu_mc._x;
this._y = tu_mc._y;
} else {
this._x=dx;
this._y = dy;
}
}

}
}
cw_btn.onRelease=function(){
for(j=1;j<29;j++){
mymc_mc =eval("mc"+j);
mymc_mc._x = 50+random(150);
mymc_mc._y =50+random(200);
}
}
yt_btn.onRelease = function(){
for(k=1;k<29;k++){
tumc_mc = eval("tu"+k);
tumc_mc._visible=true;
}
}
yc_btn.onRelease = function(){
for(k=1;k<29;k++){
tumc_mc = eval("tu"+k);
tumc_mc._visible=false;
}
}
cj_btn.onRelease=function(){
dj = 1;
xz_mc._y = 323;
}
zj_btn.onRelease=function(){
dj = 2;
xz_mc._y = 349;
}
gj_btn.onRelease=function(){
dj = 3;
xz_mc._y = 380;
}

完成，测试影片，祝你成功！

下面我们来分析一下代码。

[next]

代码分析：
首先声明一个变量，用来保存用户的等级选择：
var dj = 1;
然后，使用一个循环分别以每一个原图MC：tu1,tu2..和碎片MC:mc1,mc2为参数调用一个叫td的函数，这个函数将实现拖动及碰撞检测。有多少个碎片就执行多少次，我的碎片是28个。你应该用你的碎片数量加1，替换下面的29。同时让原图MC不可见。
for (i=1;i<29;i++){
mymc_mc = this["mc"+i];
tumc_mc = this["tu"+i];
tumc_mc._visible=false;
td(mymc_mc,tumc_mc);
}
下面来创建这个td函数：
function td (my_mc,tu_mc){
当在碎片mc,(mc1,mc2..)上点下鼠标时，碎片mc开始拖动，并记录下它的x,y位置。
mymc_mc.onPress = function(){
this.startDrag();
dx = this._x;
dy = this._y;
}
放开鼠标时，停止拖动：
mymc_mc.onRelease = function(){
stopDrag();
如果dj等于1，这时用户应该是点了初级按钮，那么检测碎片MC与相应原图MC是否发生碰撞，如果发生了碰撞，则将碎片MC定位到相应的原图MC上。如果没有发生碰撞，则碎片mc回到原位。
if (dj==1){
if(this.hitTest(tu_mc)){
this._x = tu_mc._x;
this._y = tu_mc._y;
} else {
this._x=dx;
this._y = dy;
}
如果dj等于2，这时用户应该是点了中级按钮，那么检测碎片MC与相应原图MC的注册点是否发生碰撞，如果发生了碰撞，则将碎片MC定位到相应的原图MC上。如果没有发生碰撞，则碎片mc回到原位。
else if (dj==2){
if(this.hitTest(tu_mc._x,tu_mc._y,true)){
this._x = tu_mc._x;
this._y = tu_mc._y;
} else {
this._x=dx;
this._y = dy;
}
下面是重玩按钮的代码，当点击时，使碎片MC堆到舞台的左面。
cw_btn.onRelease=function(){
for(j=1;j<29;j++){
mymc_mc =eval("mc"+j);
mymc_mc._x = 50+random(150);
mymc_mc._y =50+random(200);
}
}
原图按钮上的代码，使原图MC可见：
yt_btn.onRelease = function(){
for(k=1;k<29;k++){
tumc_mc = eval("tu"+k);
tumc_mc._visible=true;
}
}
隐藏MC上的代码，使原图MC不可见。
yc_btn.onRelease = function(){
for(k=1;k<29;k++){
tumc_mc = eval("tu"+k);
tumc_mc._visible=false;
}
}
初级按钮上的代码：使dj等于1，红框框住初级按钮。
cj_btn.onRelease=function(){
dj = 1;
xz_mc._y = this._y;
}
中级按钮：
zj_btn.onRelease=function(){
dj = 2;
xz_mc._y = this._y;
}
高级按钮：
gj_btn.onRelease=function(){
dj = 3;
xz_mc._y = this._y;
}

对本文感兴趣的朋友请到这里提交作业，老师会为作业点评加分：http://bbs.jcwcn.com/viewthread.php?tid=214228