createjs-打豆豆小游戏制作（3）

前面介绍过了打豆豆小游戏的入口和各个场景之间的切换，这一篇介绍一下Ball.js这个类和GameScene.js这个主要游戏场景这个类。

在游戏中有十种不同颜色的小球，当你点到正确的位置，小球就可以消除，在小球消除的时候有一个掉下来的动画。

下面是Ball.js的源码

(function(window){
   
    //Ball这个类继承自Container类，接受一个color参数，表示这个小球是什么颜色
    function Ball(color)
    {
   
        this.Container_constructor();
        //小球的颜色
        this.color=color;
        //tick时间的侦听器，这个变量用于在off的时候移除侦听时间
        this.tickListener;
        //小球下落时候的x方向的速度
        this.speedX;
        //小球下落时候的y方向的速度
        this.speedY;
        //小球下落的加速度
        this.speedA=4;
        //根据color这个变量的值，从单列类中的resource中获取到之前加载好的图片，然后创建bitmap对象
        this.gd=new GlobalData();
        var ball=new createjs.Bitmap(this.gd.resource.getResult("image"+color));
        //图片本身比较大，这里做了一下缩小
        ball.scaleX=0.5;
        ball.scaleY=0.5;
        this.addChild(ball);
    }

    var p=createjs.extend(Ball,createjs.Container);

    //小球开始掉落的函数
    p.beginFall=function()
    {
   
        //添加tick事件侦听，tick事件大概相当于flash中enterFrame事件，在每次舞台更新的时候触发
        this.tickListener=this.on("tick",this.fall,this);
        //设置小球的速度
        this.speedX=-5+10*Math.random();
        this.speedY=-20;
    };

    //在每次tick事件时调用，更新小球的位置，达到小球掉落的效果
    p.fall=function(e)
    {
   
        this.x+=this.speedX;
        this.y+=this.speedY;
        this.speedY+=this.speedA;
        //在检查到小球掉出舞台以后，移除小球，并且移除侦听的事件（用on方法添加的侦听时间，只能用off方法来移除侦听
        if(this.y>this.gd.canvas.height+50)
        {
            if(this.parent!=null)
            {
                this.parent.removeChild(this);
                this.off("tick",this.tickListener);
            }
        }
    };

    window.Ball=createjs.promote(Ball,"Container");
}(window));

接下来就是主要的游戏场景，里面包括游戏部分、倒计时条、得分和返回按钮四个部分。

1.首先用Shape类画出了一个30*15的方格背景，如下图

2.记录方格的位置，然后随机排列位置数组，然后在数组的前200个位置上放置小球，这样就做到了小球随机排列的效果（这里没有用数组自带的sort方法，因为自带的方法有bug，而且效率低）

3.侦听点击事件，根据点击事件的坐标，判断点击到了哪个方格上，如果是空白方格就检测方格所在的十字是否有同颜色的小球，如果有的话就调用小球掉落的方法，并且更新分数和播放音效。如果点错了就播放错误的音效，然后扣掉一定的时间

4.倒计时结束后游戏就结束了，看上去游戏很简单，很无聊，但是想要得到200分相当不容易

下面是GameScene.js的源码

(function(window){
    function GameScene()
    {
        //继承自Container类
        this.Container_constructor();
        this.squareNumArray<