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);//判断平台，设置GameLayerif ("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 loop
GameScene.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
:	:	:	:
8	9	..	..
0	1	..	7

cocos2dx CrystalCraze 宝石消除游戏解析(二)相关推荐

基于cocos2dx的横版动作游戏制作(二)
基于cocos2dx的横版动作游戏制作(二) 如果你看过第一部分介绍,你应该大体知道一个横版游戏该怎么样去做,需要什么东西了....本部分介绍一些细节设计... 第一个:单例对象我们应该怎么设计才比较 ...
Cocos2d-x v3.6制作射箭游戏（二）
原文 Cocos2d-x v3.6制作射箭游戏(二) 六 24, 2015by RENSHANin COCOS2D-X 上章我们创建并加载了游戏地图,接下来的两章我们将实现如下的效果. 在开始之前,先 ...
微信小游戏本地解析二维码
最近公司需要在为微信小游戏内解析一个二维码,从而获取二维码的数据来做相关处理,但是二维码处理方面,小游戏是不支持,为了开发只能自己来解决这个问题.解决方案有两种,第一种是将二维码上传到服务器,后台解析 ...
C语言十字消除游戏（超简单详细），详细思路+源码分享
十字消除,休闲小游戏,在规定时间内,只要是十字线能连接到的相同颜色的方块,就能获得相应的得分,如果点击后没有能够消除的方块会扣除时间,是一款益智小游戏. 我们将编写十字消除游戏,用户点击空白方块,沿其 ...
消除游戏美术设计的这些套路，你都知道吗？
本篇是设计师Cherry通过积累数年的消除游戏设计经验,对比市面上多款消除游戏进行研究,在交互及色彩搭配两方面进行分析,相信文中满满的专业干货能给大家带来更多新的思路. ■ 消除类产品交互区域对比图 ...
分享一款最近比较火爆的宝石迷情游戏游戏源码安卓版
这个是本人上几个月的一个作品,该作品我已经发布到安卓教程网了,现在分享这款宝石迷情游戏游戏源码安卓版吧,这是一款经典的宝石迷情小游戏源码宝石迷情是一款跨平台的宝石消除类游戏,和之前的宝石类消除游戏不同 ...
opencv图像处理中的一些滤波器+利用滤波器提取条形码(解析二维码)+公交卡倾斜矫正+物体尺寸丈量
一般来说,图像的能量主要集中在其低频部分,噪声所在的频段主要在高频段,同时图像中的细节信息也主要集中在其高频部分,因此,如何去掉高频干扰同时又保持细节信息是关键.为了去除噪声,有必要对图像进行平滑,可 ...
Unity的Json解析二–写Json文件
本文章由cartzhang编写,转载请注明出处. 所有权利保留. 文章链接:http://blog.csdn.net/cartzhang/article/details/50378805 作者:car ...
C++基于QT的模仿宝石迷阵游戏源码
介绍基于QT的模仿宝石迷阵游戏本次项目我们使用C++语言,实现了基于QT的宝石迷阵游戏,并且接入数据库实现了登录注册和根据最高分排行的功能,为了优化用户体验,在设置界面提供声音.亮度的调整滑块和打 ...

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

cocos2dx CrystalCraze 宝石消除游戏解析(二)相关推荐

最新文章

热门文章

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

cocos2dx CrystalCraze 宝石消除游戏 解析(二)相关推荐

最新文章

热门文章

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

cocos2dx CrystalCraze 宝石消除游戏解析(二)相关推荐