cocos2dx CrystalCraze 宝石消除游戏 解析(二)

上一篇：cocos2dx CrystalCraze 宝石消除游戏 解析(一)

上一篇介绍了 mainScene界面，下面进入正题，GameScne界面！会比较长，毕竟1000行代码啊，耐心看下吧

2 GameScene.js

     这才是游戏界面的主要控制代码，一看1000行代码，啥也不说了，慢慢看吧... 

    界面还是从onDidLoadFromCCB 开始

//开始游戏GameScene.prototype.onDidLoadFromCCB = function(){// 初始化面板 各种数组setupBoard();//游戏是否结束 是否显示提示gIsGameOver = false;gIsDisplayingHint = false;//浏览器设置可以 鼠标控制if( sys.platform == 'browser')this.rootNode.setMouseEnabled( true );// 触摸事件 跟鼠标事件    this.rootNode.onTouchesBegan = function( touches, event) {        this.controller.onTouchesBegan(touches, event);        return true;    };    this.rootNode.onMouseDown = function( event) {        this.controller.onMouseDown(event);        return true;    };    // Setup timer 进度条    this.sprtTimer.setVisible(false);    gTimer = cc.ProgressTimer.create(cc.Sprite.create("gamescene/timer.png"));    gTimer.setPosition(this.sprtTimer.getPosition());    gTimer.setPercentage(100);    gTimer.setType(cc.PROGRESS_TIMER_TYPE_BAR);    gTimer.setMidpoint(cc.p(0, 0.5));    gTimer.setBarChangeRate(cc.p(1, 0));    this.sprtHeader.addChild(gTimer);//这是最后的点击时间，连击的个数，是否是炸弹，是否快没有时间    var dNow = Date.now();    gStartTime = dNow + kIntroTime;    gLastMoveTime = dNow;    gNumConsecutiveGems = 0;    gIsPowerPlay = false;    gEndTimerStarted = false;    gScore = 0;    // 没帧刷新onUpdate方法    this.rootNode.onUpdate = function(dt) {        this.controller.onUpdate();    };    this.rootNode.schedule(this.rootNode.onUpdate);    //判断平台，设置GameLayer    if ("opengl" in sys.capabilities && "browser" != sys.platform)    {        cc.log("OpenGL rendering");        gParticleLayer = cc.ParticleBatchNode.create("particles/taken-gem.png", 250);        gGameLayer = cc.SpriteBatchNode.create("crystals.pvr.ccz");    }    else    {        cc.log("WebGL or Canvas rendering");        gParticleLayer = cc.Node.create();        gGameLayer = cc.Node.create();    }    gGameLayer.setContentSize(this.gameLayer.getContentSize());    //gParticleLayer = cc.ParticleBatchNode.create("particles/taken-gem.png", 250);    //gParticleLayer = cc.Node.create();    gHintLayer = cc.Node.create();    gShimmerLayer = cc.Node.create();    gEffectsLayer = cc.Node.create();//设置各界面层级关系    this.gameLayer.addChild(gShimmerLayer, -1);    this.gameLayer.addChild(gParticleLayer, 1);    this.gameLayer.addChild(gGameLayer, 0);    this.gameLayer.addChild(gHintLayer, 3);    this.gameLayer.addChild(gEffectsLayer, 2);    //gGameLayer = this.gameLayer;    // 设置完成动画后回调this.rootNode.animationManager.setCompletedAnimationCallback(this, this.onAnimationComplete);//背景上面 那个条半透明 紫色条状图片 的旋转，移动 淡入淡出效果setupShimmer();//setupSparkle();// 分数控件gScoreLabel = this.lblScore;};

function setupBoard(){//游戏面板 存放宝石种类 初始化[80] var kBoardWidth = 8;//var kBoardHeight = 10;//var kNumTotalGems = kBoardWidth * kBoardHeight;gBoard = new Array(kNumTotalGems);for (var i = 0; i < kNumTotalGems; i++){gBoard[i] = -1;}//游戏精灵面板gBoardSprites = new Array(kNumTotalGems);//竖着的8列宝石数组gNumGemsInColumn = new Array(kBoardWidth);//当前时间每一列的位置gTimeSinceAddInColumn = new Array(kBoardWidth);var x;for (x = 0; x < kBoardWidth; x++){//初始化为0gNumGemsInColumn[x] = 0;gTimeSinceAddInColumn[x] = 0;}// 初始化下落宝石二维数组gFallingGems = new Array(kBoardWidth);for (x = 0; x < kBoardWidth; x++){gFallingGems[x] = new Array(0);}//评估是否有可以消除的宝石 和默认可以消除的宝石位置 gBoardChangedSinceEvaluation = true;gPossibleMove = -1;}

下面是整个游戏的重点 onUpdate方法

// Game main loopGameScene.prototype.onUpdate = function(dt){//如果游戏没有结束if (!gIsGameOver){//删除各列已被消除连接着的宝石 并把它上面加入到gFallingGemsremoveMarkedGems();var x;var gem;// Add falling gemsfor (x = 0; x < kBoardWidth; x++){//当这一列中的个数+要下落的个数<10 && 在当前列的位置>=8 if (gNumGemsInColumn[x] + gFallingGems[x].length < kBoardHeight &&gTimeSinceAddInColumn[x] >= kTimeBetweenGemAdds){//每一列增加一个随机宝石位置在界面的顶部，但yPos设为kBoardHeight = 10 并加入到gFallingGems  var kGemSize = 40; var gemType = Math.floor(Math.random()*5);var gemSprite = cc.Sprite.createWithSpriteFrameName("crystals/"+gemType+".png");gemSprite.setPosition(x * kGemSize, kBoardHeight * kGemSize);gemSprite.setAnchorPoint(0,0);gem = {gemType: gemType, sprite: gemSprite, yPos: kBoardHeight, ySpeed: 0};gFallingGems[x].push(gem);gGameLayer.addChild(gemSprite);gTimeSinceAddInColumn[x] = 0;}gTimeSinceAddInColumn[x]++;}// Move falling gemsvar gemLanded = false;for (x = 0; x < kBoardWidth; x++){var column = gFallingGems[x];var numFallingGems = gFallingGems[x].length;//遍历这一列中需要下降的宝石for (var i = numFallingGems-1; i >= 0; i--){gem = column[i];//每次宝石 下降一定高度gem.ySpeed += 0.06;gem.ySpeed *= 0.99;gem.yPos -= gem.ySpeed;//如果宝石y坐标<=该列宝石个数时，证明已经到达了底部或碰到了宝石if (gem.yPos <= gNumGemsInColumn[x]){// 随机播放一个音效if (!gemLanded){gAudioEngine.playEffect("sounds/tap-"+Math.floor(Math.random()*4)+".wav");gemLanded = true;}//从gFallingGems中删除该宝石column.splice(i, 1);//插入该宝石到面板中 宝石类型到gBoard srite到gBoardSpritesvar y = gNumGemsInColumn[x];if (gBoard[x + y*kBoardWidth] != -1){cc.log("Warning! Overwriting board idx: "+x + y*kBoardWidth+" type: "+gBoard[x + y*kBoardWidth]);}gBoard[x + y*kBoardWidth] = gem.gemType;gBoardSprites[x + y*kBoardWidth] = gem.sprite;//更新宝石位置 和该列中宝石的个数gem.sprite.setPosition(x*kGemSize, y*kGemSize);gNumGemsInColumn[x] ++;//全部插满可以消除gBoardChangedSinceEvaluation = true;}else{// 更新宝石下落位置gem.sprite.setPosition(x*kGemSize, gem.yPos*kGemSize);}}}// Check if there are possible moves and no gems fallingvar isFallingGems = false;for (x = 0; x < kBoardWidth; x++){if (gNumGemsInColumn[x] != kBoardHeight){isFallingGems = true;break;}}//当全部下落完毕if (!isFallingGems){//遍历所有位置上的宝石，检查是否存在3个以上相连的宝石，并返回坐标var possibleMove = findMove();if (possibleMove == -1){// 如果没有可以消除的，随机选各位置，并把它右面和上面的变成相同图案createRandomMove();}}// Update timervar currentTime = Date.now();var elapsedTime = (currentTime - gStartTime)/kTotalGameTime;var timeLeft = (1 - elapsedTime)*100;if (timeLeft < 0) timeLeft = 0;if (timeLeft > 99.9) timeLeft = 99.9;gTimer.setPercentage(timeLeft);// 更新两次消除的间隔时间 如果大于1秒 重置if (currentTime - gLastMoveTime > kMaxTimeBetweenConsecutiveMoves){gNumConsecutiveGems = 0;}//更新炸弹粒子状态updatePowerPlay();//随机在宝石上增加闪耀的星星updateSparkle();// 时间小于6.6播放倒计时音效if (timeLeft < 6.6 && !gEndTimerStarted){gAudioEngine.playEffect("sounds/timer.wav");gEndTimerStarted = true;}//没有时间则游戏结束if (timeLeft === 0){//界面内剩余的全部宝石 x,y随机一个速度 createGameOver();//执行动画 （会有个回调，前面设置的onAnimationComplete）this.rootNode.animationManager.runAnimationsForSequenceNamed("Outro");gIsGameOver = true;//gAudioEngine.stopAllEffects();cc.log("stopAllEffects not working!");gAudioEngine.playEffect("sounds/endgame.wav");gLastScore = gScore;}else if (currentTime - gLastMoveTime > kDelayBeforeHint && !gIsDisplayingHint){displayHint();//大于3秒提示相连的宝石}}else{//结束宝石数组更新位置updateGameOver();}};

     这样游戏一开始就可以一排排的落下来，直到填满整个游戏，序列大概如图所示:

:::79::::89....01..7