案例3打砖块游戏

今天我们利用flash CS工具来做一个简单的打砖块游戏吧。
结果预览：http://www.iamsevent.com/upload/BreakBall.swf
首先我们需要知道，在CS工具中，创建了的元件需要导出为ActionScript类才能在脚本代码中使用该类来创建实例。我们可以通过点击Insert-->New Symbol  在新建元件时将Export for ActionScript（导出为ActionScript）钩钩上，并为它取个类名后点击OK按钮即可。（若你想对已经创建的元件导出为ActionScript，可右击Liberty中的现有元件，在弹出菜单中选择Properties就会弹出和新建元件一样的窗口，如下）
<ignore_js_op> 
     打砖块游戏有三个元素：底板，球以及砖块。首先我们创建一个底板元件，让它导出为ActionScript，给它的类名取作myBoard好了，然后在元件创作视图中给它画一个长方形，涂成白色就是了，或者你涂个大便色也无所谓，最重要的是让这个长方形中心对准注册点哦，这在布局中可是很重要的。
<ignore_js_op> 
     我们再创建一个球的元件，画一个圆形，涂成白色，随便你导不导出为ActionScript。完工后将一个底板（myBoard）元件和一个球拖到舞台上，当然，球可以放在这块底板上也可以随意放，whatever，并为他们取好名字，我给底板取的名字是board，球的名字是ball，做好了吗列位仙家？
<ignore_js_op> 
      到此，我们得摆放众多的砖块了，手工摆放的话感觉太麻烦了，那此时ActionScript脚本的优势就体现出来了，我们完全可以利用它的循环语法来做繁琐的布局工作。在第一帧上点击F9编辑帧脚本，插入如下代码：

1. //X轴Y轴速度
2. var vx:Number=10;
3. var vy:Number=10;
4. //砖块长宽
5. const BOARD_WIDTH:Number=80;
6. const BOARD_HEIGHT:Number=22;
7. //砖块间水平与垂直的间距
8. const H_GAP:Number=8;
9. const V_GAP:Number=15;
10. //小球运动速度
11. const SPEED:Number=5;
12. //砖块数组，用来给动态生成的每个砖块创建碰撞监听
13. var boardArr:Array=new Array();
14. //动态生成砖块
15. for(var i:int=0;i<6;i++)
16. {
17.         for(var j:int=0;j<3;j++)
18.         {
19.                 var newBoard:myBoard=new myBoard();
20.                 newBoard.width=BOARD_WIDTH;
21.                 newBoard.height=BOARD_HEIGHT;
22.                 newBoard.x=8+BOARD_WIDTH/2+i*BOARD_WIDTH+i*H_GAP;
23.                 newBoard.y=20+BOARD_HEIGHT/2+j*BOARD_HEIGHT+j*V_GAP;
24.                 addChild(newBoard);
25.                 boardArr.push(newBoard);
26.         }
27. }

复制代码

这个算法应该不难的吧？因为我们刚刚在新建板元件的时候导出过ActionScript，它导出的类名是myBoard，所以在此我们就可以使用new语法来创建这个元件并给他设置长宽以及X,Y坐标并添加至舞台，若你创建的元件不导出为AS，则无法通过new语句来创建元件哦，只能手动从Liberty里面将它拖到舞台上。有人会问，最后一句干嘛哒？哦，小朋友啊，这句呢，是叔叔用来把创建出来的每块砖头存到一个数组里面先，到时候就可以通过遍历这个数组中每一个元素来检查每一个砖头是否在某一刻被球击中啦~
     最后呢，需要让球球动起来啦（ruai~这语气太娘了，我自己都吃不消）。要让球动起来就必须添加一个EnterFrame事件侦听函数啦，先看代码哈：

1. this.addEventListener(Event.ENTER_FRAME,onEF);
2. function onEF(event:Event):void{
3.         //移动底板
4.         var dis:Number=mouseX-board.x;
5.         //如果用dis>0或者<0做条件的话底板会发生抽筋的情况
6.         if(dis>SPEED)board.x+=SPEED;
7.         else if(dis<-SPEED)board.x-=SPEED;
8.         
10.         ball.x+=vx;
11.         ball.y+=vy;
12.         if((ball.x+ball.width/2)>stage.stageWidth)
13.         {
14.                 vx*=-1;
15.         }
16.         if((ball.x-ball.width/2)<0)
17.         {
18.                 vx*=-1;
19.         }
20.         if((ball.y+ball.height/2)>stage.stageHeight)
21.         {
22.                 vy*=-1;
23.         }
24.         if((ball.y-ball.height/2)<0)
25.         {
26.                 vy*=-1;
27.         }
28.         if(board.hitTestObject(ball))
29.         {
30.                 vy*=-1;
31.         }
32.         for(var i:int=0;i<boardArr.length;i++){
33.                 if(ball.hitTestObject(boardArr[i])) //若球碰到砖块就移除砖块
34.                 {
35.                         removeChild(boardArr[i]);
36.                         boardArr.splice(i,1);//把被撞砖块从数组中移除，若不移除，下次检查还会检查此不存在的砖块
37.                         vy*=-1;//速度取反以反弹球
38.                 }
39.         }
40. }

复制代码

10、11行代码大家肯定没有疑问，就是让球动起来，其下的4个if语句中做的工作是球移动的边缘检测，限定球在舞台范围内移动，若撞到边缘就让他速度取反作反弹状。最后 一个if语句啥意思捏？首先为大家隆重推出   hitTestObject() 方法，此方法在CS工具中，属性标记为MovieClip或者Sprite的元件都可以使用它，使用此方法可以判断两个元件之间是否发生了碰撞，那么上句中的board.hitTestObject(ball)意思就是判断底板元件board是否碰到了ball元件，若碰到了，就反弹球。听过了这个方法的用法后想必各位就能看懂代码最后这个循环里是什么意思了。
    最后，对于6、7行的代码，是对底板移动的一个限制，我们先看下图：
<ignore_js_op> 
   要让底板移动到鼠标处停止，那么就需要计算底板中心点与鼠标点横坐标的距离（刚才在创建底板元件时提醒格外注意底板注册点的位置对齐底板中心处，因为每个元件的x,y坐标对应的都是它注册点在舞台上的位置，若是把原来底板元件的左上角对准注册点，那么此元件在舞台上的x,y坐标就指示了此长方形的左上角位置），若想让此坐标等于0时才断定底板已到鼠标正下方或正上方是不太现实的，举例来说吧，若你每帧移动2像素，在某时底板x与mouseX之间距离仅有1像素，那么下一帧它将会移动到超过mouseX一帧的地方，然后再下一帧又会移回原来位置，距离永远到不了0，发生典型的抽筋现象（左右不停颤动），那此时我们就需要把条件放宽一些，让距离落在一定范围内即可判断底板已到达目标，我们限定此范围为[mouseX-speed, mouseX+speed]。
   唉，如此详细的教程写得着实有点辛苦，希望对各位大大有所帮助，赶快运行一下自己的杰作吧~