FLASH CS3实例拼图游戏.docx

FLASH CS3实例拼图游戏.docx

《FLASH CS3实例拼图游戏.docx》由会员分享，可在线阅读，更多相关《FLASH CS3实例拼图游戏.docx（15页珍藏版）》请在冰豆网上搜索。

FLASHCS3实例拼图游戏

FLASHCS3实例拼图游戏

拼图游戏是通过鼠标拖动裁切的小图片，将其放置到拼图框中，以组成一幅完整的图片。

如果拖动的小图片处于正确位置附近时，即会自动被吸附到正确位置。

当所有小图片都放置到拼图框中且位置正确，就会宣布游戏胜利。

另外，该拼图游戏中的图片是调用的外部图片，所以可以自行更改拼图图片，以增强游戏的可玩性。

如图12-60所示。

图12-60拼图游戏

准备游戏元素

利用【矩形工具】绘制黑色调的游戏机外壳，通过在【颜色】面板中设置渐变填充色，并调整填充效果形成绿色的显示屏、白色玻璃罩等十分逼真的游戏机外形。

（1）在空白的文档中，将BG.jpg背景图像导入到舞台中，并设置文档尺寸的大小与图像大小相同，如图12-61所示。

图12-61导入背景图像

（2）使用【基本矩形工具】

和【线条工具】

绘制游戏机的外形，并通过【颜料桶工具】

为其填充渐变色，如图12-62所示。

图12-62绘制圆角矩形

填充完渐变色后，可以通过【渐变变形工具】

调整渐变颜色。

（3）在外壳的中间部分绘制一个白色矩形，通过【选择工具】

调整其四个角。

然后，为其填充白色透明渐变，如图12-63所示。

图12-63绘制高光效果

（4）新建“roll”影片剪辑，在2个图层中分别绘制彩条和矩形，然后创建遮罩动画，如图12-64所示。

图12-64创建彩条滚动动画

（5）返回场景。

将“roll”影片剪辑拖入到舞台中，并在游戏机外壳下面绘制灰色渐变矩形，如图12-65所示。

图12-65绘制矩形

（6）使用【矩形工具】

绘制两个圆角矩形，分别设置颜色为#212F0B和#AAED45。

然后，将两个矩形重叠，形成游戏面的显示屏，如图12-66所示。

图12-66绘制显示屏

（7）利用【线条工具】在最底层矩形左边的上下两缺口之间绘制装饰用的图形。

然后，复制并旋转该图形，将其放置在矩形右边，如图12-67所示。

图12-67绘制装饰物

（8）在舞台中绘制一个白色的矩形，在【颜色】面板中设置其为渐变透明，该矩形为游戏机的玻璃罩，如图12-68所示。

图12-68绘制玻璃罩

（9）新建“button”按钮元件，创建一个开始按钮，并将该按钮元件转换为“playB”影片剪辑元件，如图12-69所示。

图12-69创建开始按钮

（10）返回场景。

将“playB”影片剪辑拖入到舞台中，然后在游戏机外壳上输入文字，并绘制阴影，如图12-70所示。

图12-70拖入按钮

（11）使用【矩形工具】

在舞台中绘制一个小些的圆角矩形，然后在该圆角矩形范围内再绘制两个直角矩形，如图12-71所示。

图12-71绘制矩形

（12）将“roll”影片剪辑拖到最小矩形的上面，并改变其大小。

然后，复制并缩小刚才绘制的屏幕，将其放置在最大的圆角矩形上面，如图12-72所示。

图12-72复制屏幕图形并调整大小

（13）复制玻璃罩图形和阴影图形，调整其大小并移动到适当的位置。

然后，在小圆角矩形上输入文字，如图12-73所示。

图12-73复制玻璃屏和阴影

（14）至此拼图游戏的各个元素制作完成，保存文档后按快捷键Ctrl＋Enter预览动画，如图12-74所示。

图12-74预览效果

制作拼图动画

本例首先通过复制位图中的像素，将大图片裁切成25个小图片。

然后，通过startDrag（）方法和stopDrag（）方法来拖动小图片至拼图框中。

最后，根据小图片的坐标和剩余个数为判断是否达到胜利的条件。

（1）选择舞台中的开始按钮，在【属性】面板中设置其实例名称为“playB”，如图12-75所示。

图12-75设置实例名称

（2）新建“win”影片剪辑，在舞台中输入“WIN”文字，创建文字由小变大的补间动画，并在最后一帧输入“stop（）;”代码。

然后，设置该元件的类名称为“win”，如图12-76所示。

图12-76创建补间动画

（3）新建“together”AS文件，将其保存在与Flash源文件同一目录的code文件夹中，如图12-77所示。

图12-77新建AS文件

（4）在AS文件中创建package包、together类以及together（）函数，并导入所有要用到的类，代码如图12-78所示。

图12-78创建package包

（5）将光标置于together类中，声明本例中用到的所有变量，代码如图12-79所示。

图12-79声明变量

（6）将光标置于第31行，创建loaderPic（）函数，该函数用来加载外部图片，并侦听加载图片的进度，代码如图12-80所示。

图12-80loaderPic（）函数

（7）将光标置于第41行，创建onComplete（）函数，该函数将外部的图片绘制在picBD位图图像上并显示在舞台中。

然后，调用copyPixel（）函数，代码如图12-81所示。

图12-81onComplete（）函数

（8）将光标置于第71行，创建copyPixel（）函数，该函数用来创建小图片，并根据坐标和大小将大图片的区域像素复制到小图片中，代码如下所示。

publicfunctioncopyPixel（）{

massWidth=Math.round（picWidth/n）

//小图片的宽,round是让空隙出现在边缘

massHeight=Math.round（picHeight/n）

//小图片的高,同上

leaveNum=n*n

//剩下的块数

varmassBD:

BitmapData

varmassBitmap:

Bitmap

varmassSprite:

Sprite

//小图片置放的容器

for（vari=0;i

for（varj=0;j

massBD=newBitmapData（massWidth,massHeight）

//小图片的BitmapData

massBD.copyPixels（picBD,newRectangle（i*massWidth,j*massHeight,massWidth,massHeight）,newPoint（0,0））

//根据坐标和大小复制picBD位图中的区域至小图片上

massBitmap=newBitmap（massBD）

massSprite=newSprite（）

massSprite.x=stage.stageWidth-275+Math.random（）*180-picx

//massSprite实例的X坐标

massSprite.y=stage.stageHeight-440+Math.random（）*180-picy

//massSprite实例的Y坐标

massSprite.addEventListener（MouseEvent.MOUSE_DOWN,massDown）

//侦听对massSprite实例按下鼠标事件调用massDown（）函数

massSprite.addEventListener（MouseEvent.MOUSE_UP,massUp）

//侦听对massSprite实例弹起鼠标事件调用massUp（）函数

massSprite.name="MS"+i+j

//massSprite实例名称

massSprite.addChild（massBitmap）

//将小图片加入到massSprite实例的显示清单中

mySprite.addChild（massSprite）

//将massSprite实例加入到mySprite容器的显示清单中

}

}

}

（9）将光标置于第107行，创建massDown（）函数，该函数响应鼠标按下事件，用来拖动小图片，并显示在舞台的最上层，如图12-82所示。

图12-82massDown（）函数

（10）将光标置于第114行，创建massUp（）函数，该函数响应鼠标弹起事件，判断小图片放置的位置是否正确，以及是否达到胜利的条件，代码如下所示。

functionmassUp（e:

MouseEvent）{

e.target.stopDrag（）

//停止拖动图片

varpici=Number（e.target.name.charAt

（2））

varpicj=Number（e.target.name.charAt（3））

if（Math.abs（e.target.x-pici*massWidth）<=20&&Math.abs（e.target.y-picj*massHeight）<=20）{

//如果放置小图片的坐标与正确位置的坐标小于等于20

e.target.removeEventListener（MouseEvent.MOUSE_UP,massUp）

//删除侦听鼠标弹起事件

e.target.removeEventListener（MouseEvent.MOUSE_DOWN,massDown）

//删除侦听鼠标按下事件

e.target.x=pici*massWidth

e.target.y=picj*massHeight

//小图片粘合到正确位置

leaveNum--

//小图片剩余个数减1

if（leaveNum<=0）{

//如果小图片的剩余个数小于或等于0时

varwins=newwin;

wins=newwin（）;

wins.x=333;

wins.y=250;

stage.addChild（wins）;

//在舞台中显示wins对象

}

}

}

（11）至此together.as文件制作完成。

然后，在code文件夹下创建名称为“loadMC”的AS文件，并创建package包，代码如图12-83所示。

图12-83package包

（12）将光标置于第10行，创建侦听鼠标单击playB按钮事件，以及所调用的onMcDown（）函数，该函数用来删除拼图框中的图片，并重新加载外部图片，如图12-84所示。

图12-84loadMC文件

try…catch语句表示如果try代码块内的任何代码抛出了一个错误，控制将传递给catch代码块。

（13）至此loadMC文件制作完成。

返回到Flash源文件中，在【属性】面板的【文档类】文本框中输入“code.loadMC”，用来调用该AS文件，如图12-85所示。

图12-85调用loadMC文件

（14）保存文档后按快捷键Ctrl＋Enter预览动画，如图12-86所示。

单击开始按钮即可开始拼图游戏。

图12-86预览效果