FLASH CS4 设计拼图游戏

FLASH CS4 设计拼图游戏

在本例拼图游戏中，如果拖动的小图片处于正确位置的附近时，释放鼠标即会将图片吸附到该位置上。当所有的小图片都放置在正确位置时（即拼合成为一张完整的图像），就会提示游戏胜利。另外，本游戏采用的是外部图片，游戏者可以自定义所要进行拼图的图片，以增强游戏的可玩性。Flash拼图游戏如图13-24所示。

图13-24 Flash拼图游戏

设计过程：

（1）新建588×442像素的空白文档，在舞台中制作开始游戏界面，如图13-25所示。

图13-25 制作开始游戏界面

（2）新建“猴子”影片剪辑元件，在舞台中制作两只猴子，并将其转换为影片剪辑。然后，制作猴子上下飘动的动画，如图13-26所示。

图13-26 制作猴子上下飘动动画

（3）返回场景，将“猴子”影片剪辑元件拖至舞台中，并为其绘制阴影，如图16-27所示。

图13-27 拖入猴子影片剪辑

（4）新建“开始游戏”按钮元件，在舞台中制作按钮弹起、经过和按下的形状，并分别将其转换为影片剪辑元件，如图13-28所示。

图13-28 制作开始游戏按钮

（5）返回场景，将“开始游戏”按钮元件拖至舞台的右下角，并设置其【实例名称】为Play_Btn，如图13-29所示。

图13-30 拖入开始游戏按钮

（6）新建“背景”影片剪辑元件，在舞台中绘制一个渐变矩形，并在其左上角输入puzzleGame文字。然后，将该影片剪辑元件导出为bg自定义类，如图13-31所示。

图13-31 制作游戏背景

（7）新建“计时器”影片剪辑，在舞台中制作计时器界面，并设置“时间进度条”影片剪辑和动态文本的【实例名称】分别为timebar和Time_txt。然后，将该影片剪辑导出为time_mc类，如图13-32所示。

图13-32 制作计时器

（8）新建“计分器”影片剪辑，在舞台中制作计分器背景，并在其上插入一个动态文本，设置其【实例名称】为Score_txt。然后，将该影片剪辑元件导出为score_mc，如图13-33所示。

图13-33 制作计分器

（9）新建“卡通[游戏进行时]”影片剪辑元件，在舞台中制作卡通人物加油的动画。然后，将该影片剪辑导出为player类，如图13-34所示。

图13-34 卡通人物加油动画

（10）新建“卡通[游戏胜利时]”影片剪辑元件，在舞台中制作卡通人物胜利的动画，并将其导出为winner类，如图13-35所示。

图13-35 制作卡通人物胜利动画

（11）新建“卡通[游戏失败时]”影片剪辑，在舞台中制作卡通人物失败的动画，并将其导出为falser类，如图13-36所示。

图13-36 制作卡通人物失败动画

（12）在相同的文件夹中新建名称为Game的ActionScript文件。然后在该文件中，使用import语句导入所需的类，以及创建Game自定义类和主函数。代码如下所示：package{

import flash.display.Sprite;

import flash.display.MovieClip;

import flash.display.Bitmap;

import flash.display.BitmapData;

import flash.events.MouseEvent;

import flash.text.TextField;

import flash.events.Event;

import flash.display.Loader;

import .URLRequest;

import flash.geom.Rectangle;

import flash.geom.Point;

import flash.events.TimerEvent;

import flash.utils.Timer;

public class Game extends Sprite{

public function Game():void{

Play_Btn.addEventListener(MouseEvent.CLICK,playGame)

//侦听开始按钮的单击事件，调用playGame()函数开始游戏

}

}

}

（13）创建delAll（）函数，以循环的方式将开始游戏界面中的所有对象删除。代码如下所示：

private function delAll():void{

var num:int = this.numChildren;

//获取舞台中存在对象的个数

while(num != 0){

//如果个数不为0

this.removeChildAt(0);

//删除舞台最底层的对象

num--;

}

}

（14）创建loadMC（）函数，将游戏背景图像显示到舞台中，并开始加载外部的拼图图像。代码如下所示：

private function loadMC():void{

var BG:bg = new bg();

//实例化背景图像对象

BG.x = 0;

BG.y = 0;

//定义背景图像的位置

addChild(BG);

//将背景图像显示在舞台中

var url:String = "img.jpg"; //外部图片的地址

var req:URLRequest = new URLRequest(url);

//创建URLRequest对象，捕获单个HTTP请求中的所有信息

loader = new Loader(); //创建URLLoader对象

loader.load(req); //开始加载外部图片

loader.contentLoaderInfo.addEventListener(PLETE,onComplete);

//侦听加载外部图像完成事件

}

（15）创建onComplete（）函数，读取加载图片的宽、高等相关信息。然后，以位图图像的形式显示在舞台中。代码如下所示：

public function onComplete(event:Event):void{

picW = loader.width;

picH = loader.height;

//获取图像的宽度和高度

picBD = new BitmapData(picW,picH);