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

    最近准备做一个消除的小游戏，正好看到cocos2dx 里面有个消除的游戏例子叫CrystalCraze，正好研究下，但它是用js写的，以前没用用过js开发cocos2d,正好在这里记录下。

    我用的是cocos2d-x-2.2.2版本，导入到vs2010后，显示的目录是在cocos2d-x-2.2.2\samples\Javascript\CrystalCraze

     但是在Class目录下面AppDelegate.h跟AppDelegate.cpp，里面没有具体的代码，而且也没有相应的素材资源

    其实游戏真正的资源是在cocos2d-x-2.2.2\samples\Javascript\Shared\games\CrystalCraze目录下，有个CrystalCraze.ccbproj文件，这个游戏是用cocosBuilder做的场景，可以直接打开这个文件，看到对应的编辑场景，还有一些文件夹，里面有psd文件，还有各平台的资源，在Resources文件夹下，有各种资源跟源码。

    进去后，可以看到各场景的ccb,js文件，还有对应的图片，粒子效果，声音等，在cocosBuilder里面可以查看具体的场景各组件的名称，我主要看他怎么实现的游戏，就主要看js文件了。

大家可以选择一个平台进去看，Android 或者 iPhone 里面会有该平台下的所有资源。

Main.js 里面 就是加载一些声音文件，还有默认显示MainScene,都能看懂。

    1.MainScene.js

     我用的Notepad++看的js代码，里面有个 函数列表，可以查看代码里面的各个方法，我觉得还是不错的

     看看各方法名，onDidLoadFromCCB  应该就是先执行这个方法了

    

MainScene.prototype.onDidLoadFromCCB = function()
{
	// 设置背景的粒子效果，应该就是背景那个忽隐忽现的小圆圈
	var starParticles = cc.ParticleSystem.create("particles/bg-stars.plist");
	this.starNode.addChild(starParticles);

	// 菜单默认没有选中任何item
	this.menuSelection = kMenuSelectionNone;

	// 设置出现动画完成后回调onAnimationComplete方法 和设置下面以前的分数
	this.rootNode.animationManager.setCompletedAnimationCallback(this, this.onAnimationComplete);
	this.lblLastScore.setString(""+gLastScore);

	// 背景掉落的宝石数组
	this.fallingGems = [];

	//每帧执行onUpdate方法
    this.rootNode.onUpdate = function(dt) {
        this.controller.onUpdate();
    };
    this.rootNode.schedule(this.rootNode.onUpdate);

    // 加载宝石
    cc.SpriteFrameCache.getInstance().addSpriteFrames("crystals.plist");

	//背景音乐
	gAudioEngine = cc.AudioEngine.getInstance();
	gAudioEngine.playMusic("sounds/loop.mp3");
};

    下面是onUpdate方法，主要控制背景随机下落的宝石

MainScene.prototype.onUpdate = function()
{
	var gem;
	
	if (Math.random() < 0.02)
	{
		//随机生成5中宝石中的一种，并根据对应名称生成
		var type = Math.floor(Math.random()*5);
		var sprt = cc.Sprite.createWithSpriteFrameName("crystals/"+type+".png");
		//var sprt = cc.Sprite.create("crystals/"+type+".png");
		//var p = cc.ParticleSystem.create("particles/falling-gem.plist");

		//设置宝石随机的位置跟大小  
		var x = Math.random()*this.fallingGemsLayer.getContentSize().width;
		var y = this.fallingGemsLayer.getContentSize().height + kGemSize/2;
		var scale = 0.2 + 0.8 * Math.random();

		var speed = 2*scale*kGemSize/40;

		sprt.setPosition(x,y);
		sprt.setScale(scale);

		//p.setPosition(x,y);
		//p.setScale(scale);
		//p.setAutoRemoveOnFinish(true);
		//设置属性 并加入到数组 和界面中
		gem = {sprt:sprt, speed:speed};
		//var gem = {sprt:sprt, speed:speed, particle:p};
		this.fallingGems.push(gem);

		//this.fallingGemsLayer.addChild(p);
		this.fallingGemsLayer.addChild(sprt);
	}
	//遍历下落宝石数组
	for (var i = this.fallingGems.length-1; i >= 0; i--)
	{
		gem = this.fallingGems[i];
		//每帧调用 y坐标减少speed 
		var pos = gem.sprt.getPosition();
		pos.y -= gem.speed;
		gem.sprt.setPosition(pos);
		//gem.particle.setPosition(pos);

		if (pos.y < -kGemSize/2)
		{
			//小于一定值后从界面跟数组中删除
			this.fallingGemsLayer.removeChild(gem.sprt, true);
			//gem.particle.stopSystem();
			this.fallingGems.splice(i, 1);
		}
	}
};

    其他方法，onPressAbout 弹出关于界面，就不介绍了；onPressPlay 播放音效，跳转到GameScene,并把所有下落数组内的宝石淡出

下一篇：

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