课堂导入
看着这漫天的雪花，是不是特别想堆个雪人！学完今天的课程内容，不管是下雪，还是下雨，下流星......都能完成噢，赶紧试试吧！
学习目标
1、掌握随机函数的使用方法；
2、掌握制作动态加载影片剪辑的方法。
学习任务单
素材下载
教学视频
教学课件
实战演练
以下为该案例的事件三要素及事件侦听过程分析：
详细代码及解释如下：
stage.addEventListener(Event.ENTER_FRAME,xx);//使用帧循环事件，不断加载雪花。
function xx(evt:Event) {
var mc:MovieClip=new xh(); //动态加载一次，并随机设置属性
mc.x=Math.random()*680; //随机设置雪花的X坐标值
mc.y=Math.random()*460; //随机设置雪花的Y坐标值
mc.scaleX=mc.scaleY=Math.random()*0.6+0.4; //随机设置雪花的大小
mc.alpha = 0.3+0.6*Math.random(); //随机设置雪花的透明度
addChild(mc); //添加对象至舞台
}
拓展资源
（一）思考一下：如何制作一个如下图的拼图游戏呢？
（二）操作步骤
1．设计思路
（1）首先导入背景图片，然后添加“开始”按钮；
（2）创建文档类，对图片进行切割和对切割后的小图片进行随机排序，然后为随机排序后的小图片进行注册时间侦听，并检测与其他小图片间的碰撞情况。
2．素材处理：
（1）新建580*430像素，24fps空白文档，在背景图层绘制如图3-9-2所示背景图片；
（2）创建“开始”按钮元件，将其拖入场景，设置实例名称为start_bnt；
（3）将素材images.jpg文件导入到库，然后为该图片添加元件扩展类，设置类名为Img。
3．程序编写：
（1）Main.as
package {
import flash.display.*;
import flash.events.*;
import flash.geom.Point;
import flash.geom.Rectangle;
import lby.events.SimpleMouseEvent;
import lby.events.SimpleMouseEventHandler;
import caurina.transitions.*;
import ws.tink.display.HitTest;
//主程序类第一部分
public class Main extends Sprite {
private var container_mc:Sprite = new Sprite();//创建存储小图片的容器
private var loaderW:Number = 400; //设置导入的大图片的宽度和高度
private var loaderH:Number = 300;
private var drag_mc:Sprite;//创建小图片容器以及对应的坐标位置
private var clickX:Number;
private var clickY:Number;
private var change_mc:Sprite;//将要进行切换的小图片容器
private var changeX:Number;
private var changeY:Number;
private var isChange:Boolean;//是否切换两张图片标记
private var isStart:Boolean;//是否开始游戏标记
private var point_array:Array;//创建数组，存放小图片的开始坐标
private var sort_array:Array;//创建数组，存放小图片游戏开始时的随机坐标
//主程序类第二部分
public function Main() {//构造函数中创建右上角的演示小图片
var bitmap:BitmapData = new Img(0, 0);
var thumb_mc:Sprite = new Sprite();
thumb_mc.graphics.beginBitmapFill(bitmap);
thumb_mc.graphics.drawRect(0, 0,loaderW,loaderH);
thumb_mc.graphics.endFill();
addChild(thumb_mc);
thumb_mc.scaleX = thumb_mc.scaleY =.3;//设置缩放值
//thumb_mc.height = loaderH / loaderW * 100;
thumb_mc.x = 430;//设置位置
thumb_mc.y = 84;
container_mc.x = 20;//设置存储小图片的容器坐标
container_mc.y = 48;
this.addChild(container_mc);
init();
addListener();
}
//主程序类第三部分
private function init() {
this.point_array = new Array();
this.sort_array = new Array();
var newX = 0;
var newY = 0;
// 列和行数
var num_columnas:uint=5;//以列为主,也就是限制列数
var num_rows:uint=5;//自动排行
var count:uint=0;//用于累加计数
var _length:uint = num_columnas * num_rows;//创建图片总个数
//图像的宽为imageW、高为imageH．间隔为dis
var imageW:Number = this.loaderW/5;
var imageH:Number = this.loaderH/5;
var pages:uint = Math.ceil(_length / (num_columnas * 2));
var bitmap:BitmapData;
var shape_mc:Shape;
var _mc:Sprite;
for (var i = 0; i < _length; i++) {//切割图片
bitmap = new Img(0, 0);
shape_mc = new Shape();
shape_mc.graphics.beginBitmapFill(bitmap);//填充位图
shape_mc.graphics.drawRect(newX, newY, imageW, imageH);
shape_mc.graphics.endFill();
shape_mc.x = - newX;//偏移
shape_mc.y = - newY;
_mc = new Sprite();
_mc.name = "mc" + i;
_mc.x = newX;//再偏移回来
_mc.y = newY;
this.point_array.push( new Point(newX,newY) );
//存储所有小图片的 x/y坐标
this.sort_array.push( new Point(newX, newY) );
_mc.addChild(shape_mc);
_mc.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);
_mc.addEventListener(MouseEvent.MOUSE_UP, upHandler);
//使用了自己定义的事件类,下面两行是自己定义的事件类的应用
SimpleMouseEventHandler.register(_mc);//传入要作为侦听的对象
_mc.addEventListener(SimpleMouseEvent.RELEASE_OUTSIDE, releaseHandler);
_mc.buttonMode = false;
_mc.mouseEnabled = false;//先设置为不接收鼠标事件
//x方向排列
newX += imageW;
//定义临时列数
count += 1;
//控制列数,如果临时列数与初定义的相同，每排完num_columnas个后,
//就向左移(imageW*num_columnas),而y方向直接向下递增
if (count == num_columnas) {
count = 0;
newX -= (imageW * num_columnas);
newY += imageH;
}
//trace("_mc.x = " + _mc.x + "_mc.y = " + _mc.y );
container_mc.addChild(_mc);
if (i == _length - 1) {
newY = 0;//重新初始化
}
}
//trace(this.point_array);
}
//主程序类第四部分
private function addListener() {
start_btn.addEventListener(MouseEvent.CLICK, startGame);
}
private function startGame(event:MouseEvent):void {
randomItems();
this.isStart = true;
this.itemsListener();
start_btn.visible = false;//开始按钮不可见
}
private function itemsListener(istrue:Boolean = true):void {//所有小图片容器允许接收鼠标事件
var _length:uint = container_mc.numChildren;
var _mc:Sprite;
for (var i = 0; i < _length; i++) {
_mc = this.container_mc.getChildAt(i) as Sprite;
_mc.mouseEnabled = istrue;
}
}
private function randomItems() {//为小图片容器随机排序
this.sort_array = this.randomArray(this.sort_array);
//为sort_array数组进行随机排序
trace(this.sort_array);
trace(this.point_array);
//重新为所有小图标的x/y坐标赋值
var _length:uint = container_mc.numChildren;
var _mc:Sprite;
for (var i = 0; i < _length; i++) {
_mc = this.container_mc.getChildAt(i) as Sprite;
_mc.x = this.sort_array[i].x;
_mc.y = this.sort_array[i].y;
}
}
private function downHandler(event:MouseEvent):void {
this.drag_mc = event.target as Sprite;
this.clickX = drag_mc.x;
this.clickY = drag_mc.y;
var _length:uint = container_mc.numChildren-1;
var last_mc:Sprite = container_mc.getChildAt(_length) as Sprite
container_mc.swapChildren(container_mc.getChildAt(_length), drag_mc);
drag_mc.startDrag();
}
//这里的事件类型为自定义的SimpleMouseEvent事件
private function releaseHandler( event: SimpleMouseEvent ):void {
this.upHandler();
}
private function upHandler(event:MouseEvent = null):void {
//单击小图片容器执行upHandler（），停止拖动
//drag_mc = event.target as Sprite;
drag_mc.stopDrag();
this.change_mc = initialize(this.drag_mc,this.container_mc);
//判断被单击小图片容器是否与container_mc容器中的小图片发生碰撞接触。
//如果接触面积达到图片对应宽度/高度一半以上，执行if 语句切换两张碰撞接触图片的位置。
if (this.change_mc != null) {
this.changeX = this.change_mc.x;
this.changeY = this.change_mc.y;
Tweener.addTween(this.drag_mc, { x: changeX, y: changeY, time:.2 } );
Tweener.addTween(this.change_mc, { x: clickX, y: clickY, time:.2 ,onComplete:this.motionFinish} );
}else {//如果未接触则返回到原位置。
Tweener.addTween(this.drag_mc, { x: clickX, y: clickY, time:.2 } );
}
//drag_mc = null;
}
private function motionFinish():void {//判断是否获胜
var iswin:Boolean = isWin();
trace(iswin);
if (iswin) {
this.isStart = false;
this.itemsListener(false);
start_btn.visible = true;//开始按钮可见
}
}
private function isWin():Boolean {
//判断所有小图片的位置是否与未进行随机排序时的位置保持一致。
var _length:uint = container_mc.numChildren;
var _mc:Sprite;
for (var i = 0; i < _length; i++) {
_mc = this.container_mc.getChildByName("mc" + i) as Sprite;
//trace("i = " + i + " _mc.x = " + Math.floor(_mc.x) + " this.point_array[i].x = " + this.point_array[i].x);
if (Math.floor(_mc.x) != this.point_array[i].x) return false;
if (Math.floor(_mc.y) != this.point_array[i].y) return false;
}
return true;
}
public function initialize(click_mc:Sprite,container_mc:Sprite):*{
var change_mc:Sprite;
var all_mc:Sprite;
var _length:uint = container_mc.numChildren;
var hit:Boolean;
var intersection:Rectangle;
for (var i:uint = 0; i < _length; i++) {
all_mc = container_mc.getChildAt(i) as Sprite;
if (all_mc.name != click_mc.name) {
intersection = HitTest.intersectionRectangle( all_mc, click_mc );
hit = intersection.width > click_mc.width/2 && intersection.height > click_mc.height/2 ;
if (hit) return all_mc;
}
}
return null;
}
// 数组的随机排序
public function randomArray(_array:Array):Array {
_array.sort(function () {return ( Math.floor(Math.random()*2) ? (1) : (-1) ) } );
return (_array);
}
}
}
学习讨论
课后检测
同学们，请扫描以下二维码进行课后检测，我们将全程记录你的答题情况。
