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

来源：互联网发布：通信工程定额软件编辑：程序博客网时间：2024/05/01 14:05

前面介绍过了打豆豆小游戏的入口和各个场景之间的切换，这一篇介绍一下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));

0 0