本文為H5EDU 機構官方HTML5培訓教程，主要介紹：JavaScript強化教程－ 內建粒子系統
從類圖中我們可以看到，Cocos2d-JS中有內建的11種粒子，這些粒子的屬性都是預先定義好的，我們也可以在程式碼中單獨修改某些屬性，我們在上一節的實例中都已經實作了這些屬性的設定。
內建粒子系統
內建的11種粒子系統說明如下：
ParticleExplosion。爆炸粒子效果，屬於半徑模式。
ParticleFire。火焰粒子效果，屬於重力路徑模式。
ParticleFireworks。煙火粒子效果，屬於重力模式。
ParticleFlower。花粒子效果，屬於重力模式。
ParticleGalaxy。星系粒子效果，屬於半徑模式。
ParticleMeteor。流星粒子效果，屬於重力模式。
ParticleSpiral。漩渦粒子效果，屬於半徑模式。
ParticleSnow。雪粒子效果，屬於重力模式。
ParticleSmoke。煙粒子效果，屬於重力模式。
ParticleSun。太陽粒子效果，屬於重力模式。
ParticleRain。雨粒子效果，屬於重力模式。
這11種粒子的屬性，依它的發射模式不同,效果不同。
實例：內建粒子系統
下面我們透過一個實例示範這11個內建粒子系統。這個實例如圖所示，左圖是一個操作選單場景，選擇選單可以進入到上圖動作場景，在下圖動作場景中示範選擇的粒子系統效果，點擊右下角返回按鈕可以回到選單場景。
2.jpg
內建粒子系統實例
下面我們將重點放在場景MyActionScene，在它的MyActionScene.js程式碼如下：
// 操作標誌
pLabel: null, ①
ctor: function (flagTag) {
cc.log("MyActionLayer init flagTag " + this.flagTag);
var size = cc.director.getWinSize();
var backMenuItem = new cc.LabelBM new cc.MenuItemLabel(backMenuItem, this.backMenu, this);
backMenuItem.x = size.width - 100;
backMenuItem.y = 100 .create(backMenuItem);
mn.x = 0;
mn.y = 0; anchorX = 0.5;
mn.anchorY = 0.5;
new cc.LabelBMFont("", res.fnt_fnt);
this.pLabel.x = size.width / 2;
this.pLabel.y = size.height - 50;
return true;
},
backMenu: function (sender) {
cc.director.popScene ();
},
onEnterTransitionDidFinish: function () {
cc.log("標籤 = " + this.flagTag);
var sprite = this.getChildByTag(SP_TAG);
var size = cc.director.getWinSize();
var 系統；
switch (this.flagTag) ②
case ActionTypes.kExplosion losion( ）；
this.pLabel.setString("爆炸");
case ActionTypes 。 ure = cc.textureCache.addImage(res.s_fire); ③
休息時間；
case ActionTypes. kFireworks:
system = new cc.ParticleFireworks();
休息；
case ActionTypes.kFlower:
this.pLabel.setString( "花");
休息；
case ActionTypes.kGalaxy:
system = new cc.ParticleGalaxy();
this.pLabel.setString("Galaxy");
休息；
case ActionTypes.kMeteor:
system = new cc .ParticleMeteor ();
this.pLabel.setString("流星");
休息；
case 的cc.ParticleRain();
this.pLabel.setString("雨");
休息；
cc.ParticleSmoke();
this.pLabel.setString("煙霧");
休息中；
system = new cc.ParticleSnow();
case ActionTypes.kSpiral :
system = new cc.ParticleSpiral();
休息；
case ActionTypes.kSun:
this.pLabel.setString("太陽");
休息； ④
}
system.x = size.width /2;
system.y = size.height /2;
this.addChild(system);
}
}）；
var MyActionScene = cc.Scene.extend({
onEnter: function () {
在頭檔中第①行程式碼定義了LabelBMFont類型的成員變數pLabel ，用於在場景中顯示藥劑系統的名稱。
我們在MyActionLayer的onEnterTransitionDidFinish函數中創建藥劑系統對象，而不是在MyActionLayer的onEnter函數創建，這是因為MyActionLayer的onEnter函數調用時，場景還沒有顯示，如果在該函數中創建爆炸等顯示一次的效果系統，等到場景顯示的時候，爆炸已經結束了，我們會看不到效果。
代碼第②~④行創建了11種消費系統，這裡創建消費系統的時候都採用了它們的預設屬性值。其中this.pLabel.setString("XXX")函數是為場景中標籤設定內容，這樣在進入場景後可以看到粒子系統的名稱。
另外，如果在Web瀏覽器中運行還需要為粒子系統添加紋理，我們只在代碼第③行添加了粒子系統，其他的粒子添加類似。
