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; this.squaresInPosition=[]; this.tickCount=0; this.tickListener; this.isGameOver=false; this.score=0; this.gd=new GlobalData(); this.bg=new createjs.Container(); this.bg.x=25; this.bg.y=60; this.addChild(this.bg); this.bgSquares=new createjs.Shape(); this.bg.addChild(this.bgSquares); this.bgDownShape=new createjs.Shape(); this.bg.addChild(this.bgDownShape); this.bg.on("mousedown",this.onBgMouseDown,this); this.bg.on("pressup",this.onBgMouseUp,this); this.ballContainer=new createjs.Container(); this.ballContainer.x=25; this.ballContainer.y=60; this.addChild(this.ballContainer); this.timeBarContainer=new createjs.Container(); this.timeBarContainer.x=30; this.timeBarContainer.y=25; this.addChild(this.timeBarContainer); this.timeBar=new createjs.Shape(); this.scroeText=new createjs.Text("0", "16px Microsoft Yahei", "#000000"); var scoreTitle=new createjs.Text("得分:", "16px Microsoft Yahei", "#000000"); scoreTitle.x=400; scoreTitle.y=20; this.addChild(scoreTitle); this.scroeText.x=450; this.scroeText.y=20; this.addChild(this.scroeText); this.backButton=new SHLTextButton("返回",60,30,"#ffffff",14,"#00cfef","#0093d9"); this.backButton.x=700; this.backButton.y=20; this.backButton.on("click",this.onBack,this); this.addChild(this.backButton); this.init(); this.initTimeBar(); this.tickListener=this.on("tick",this.onTick); } var p=createjs.extend(GameScene,createjs.Container); p.init=function() { this.squareNumArray=new Array(GameScene.HENG*GameScene.SHU); var i,j; for(i=0;i<GameScene.HENG;i++) { this.squaresInPosition[i]=new Array(); for(j=0;j<GameScene.SHU;j++) { this.squareNumArray[i*GameScene.SHU+j]=i*GameScene.SHU+j; var n=i+j; var color; if(n%2==0) { color="#ffffff"; } else { if(i%2) { color="#daf5d7"; } else { color="#fde4eb"; } } this.bgSquares.graphics.beginFill(color).drawRect(i*25,j*25,25,25).endFill(); this.squaresInPosition[i][j]=undefined; } } this.bgSquares.cache(0,0,750,375); this.bgDownShape.graphics.beginFill("#666").drawRect(0,0,25,25).endFill(); this.bgDownShape.cache(0,0,25,25); //先放在屏幕外，要显示时放到显示的位置 this.bgDownShape.x=-100; this.bgDownShape.y=-100; randomSort(this.squareNumArray); function randomSort(arr) { var k; for(k=0;k<arr.length;k++) { var temp; var randomIndex=Math.floor(Math.random()*arr.length); temp=arr[k]; arr[k]=arr[randomIndex]; arr[randomIndex]=temp; } } for(i=0;i<10;i++) { var color=i+1; for(j=0;j<20;j++) { var ball=new Ball(color); var p=this.squareNumArray[20*i+j]; var posX=parseInt(p/GameScene.SHU); var posY=p%GameScene.SHU; ball.x=posX*25; ball.y=posY*25; this.squaresInPosition[posX][posY]=ball; this.ballContainer.addChild(ball); } } }; p.initTimeBar= function () { var timeText=new createjs.Text("剩余时间", "14px Microsoft Yahei", "#000000"); timeText.y=-5; this.timeBarContainer.addChild(timeText); var b=new createjs.Shape(); b.x=60; b.graphics.setStrokeStyle(1).beginStroke("#ff9999").beginFill("#ffffff"); b.graphics.drawRect(0,0,240,10); b.graphics.endFill(); this.timeBarContainer.addChild(b); this.setTimerBar(1); this.timeBar.x=60; this.timeBarContainer.addChild(this.timeBar); }; p.setTimerBar=function(p) { this.timeBar.graphics.clear(); this.timeBar.graphics.beginFill("#ff3333"); this.timeBar.graphics.drawRect(1,1,238*p,8); this.timeBar.graphics.endFill(); }; p.onBgMouseDown=function(e) { var posX=parseInt(e.localX/25); var posY=parseInt(e.localY/25); if(this.squaresInPosition[posX][posY]) { return; } if(this.isGameOver) { return; } this.bgDownShape.x=posX*25; this.bgDownShape.y=posY*25; var isWrong=true; var squareWithBall=this.getTargetBalls(posX,posY); var tempScore=0; for(var i=0;i<squareWithBall.length;i++) { var b=squareWithBall[i]; for(var j=0;j<squareWithBall.length;j++) { var b1=squareWithBall[j]; if(b.color==b1.color&&j!=i) { this.ballContainer.addChild(b); b.beginFall(); this.squaresInPosition[b.x/25][b.y/25]=undefined; isWrong=false; tempScore++; break; } } } if(isWrong) { this.tickCount+=30; this.updateTickCount(); if(this.gd.isSoundOn) { createjs.Sound.play("wrongSound"); } } if(tempScore) { this.score+=tempScore; this.updateScore(); if(this.gd.isSoundOn) { createjs.Sound.play("rightSound"); } } }; p.onBgMouseUp=function(e) { this.bgDownShape.x=-100; this.bgDownShape.y=-100; }; p.getTargetBalls=function(i,j) { var squareWithBall=[]; var n; var s; for(n=j-1;n>=0;n--) { s=this.squaresInPosition[i][n]; if(s) { squareWithBall.push(s); break; } } for(n=j+1;n<GameScene.SHU;n++) { s=this.squaresInPosition[i][n]; if(s) { squareWithBall.push(s); break; } } for(n=i-1;n>=0;n--) { s=this.squaresInPosition[n][j]; if(s) { squareWithBall.push(s); break; } } for(n=i+1;n<GameScene.HENG;n++) { s=this.squaresInPosition[n][j]; if(s) { squareWithBall.push(s); break; } } return squareWithBall; }; p.onTick=function(e) { this.tickCount++; if(this.tickCount%30==0) { this.updateTickCount(); } }; p.updateTickCount=function() { this.setTimerBar(1-this.tickCount/3600); if(this.tickCount>=3600) { this.off("tick",this.tickListener); this.gameOver(); } }; p.updateScore=function() { var gd=new GlobalData(); gd.scroe=this.score; this.scroeText.text=this.score; }; p.gameOver=function() { this.isGameOver=true; this.dispatchEvent(new createjs.Event("gameover")); }; p.onBack=function(e) { this.dispatchEvent(new createjs.Event("backbutton")); }; GameScene.HENG=30; GameScene.SHU=15; window.GameScene=createjs.promote(GameScene,"Container"); }(window));