Cocos Creator開發微信小遊戲（四）小遊戲實戰
阿新 • • 發佈：2018-11-16
目錄
小遊戲介紹
一個左右跳一跳小遊戲，點螢幕左邊向左跳，點右邊向右跳，落水為失敗。
PC chrome瀏覽器下游戲截圖：
微信開發者工具截圖：
小遊戲cocos creator場景圖結構
場景結構同上一篇中的擠檸檬汁小遊戲結構大體相同 擠檸檬汁小遊戲練習
DataManager：記錄遊戲中的配置資料，遊戲邏輯資料（分數 ）
SoundManager：管理遊戲中的音效
ItemsManager：處理遊戲過程中隨機出現的道具（金幣，玉米等）
Net：處理Http請求
UIManager：管理遊戲中的所有UI
程式碼檔案
主要檔案程式碼
玩家控制（驢） Player.js
//驢 cc.Class({ extends: cc.Component, properties: { // foo: { // // ATTRIBUTES: // default: null, // The default value will be used only when the component attaching // // to a node for the first time // type: cc.SpriteFrame, // optional, default is typeof default // serializable: true, // optional, default is true // }, // bar: { // get () { // return this._bar; // }, // set (value) { // this._bar = value; // } // }, _UIGameNode: cc.Node, }, // LIFE-CYCLE CALLBACKS: // onLoad () {}, start () { this._UIGameNode = cc.find('Canvas/UIManager/UIGame'); }, //跳躍，相對位置 jump(duration, destPos) { var rotAct = cc.jumpBy(duration, destPos, 80, 1); var callFunc = cc.callFunc(this.onJumpEnd, this); var seq = cc.sequence(rotAct, callFunc); if(destPos.x > 0) { this.node.setScaleX(1); } else { this.node.setScaleX(-1); } this.node.runAction(seq); }, //跳躍到目標點, 絕對位置 jumpTo(duration, destPos) { var rotAct = cc.jumpTo(duration, destPos, 80, 1); var callFunc = cc.callFunc(this.onJumpEnd, this); var seq = cc.sequence(rotAct, callFunc); if(destPos.x > 0) { this.node.setScaleX(1); } else { this.node.setScaleX(-1); } this.node.runAction(seq); }, //跳躍結束 onJumpEnd() { this._UIGameNode.getComponent('UIGame').onPlayerJumpEnd(); }, // update (dt) {}, });
ItemManager.js
//遊戲中物品池，管理複用的物品 //物品型別 var ItemType = { //沒有東西 IT_None: -1, //草 IT_Grass: 0, //玉米 IT_Corn: 1, //蘿蔔 IT_Radish: 2, //金幣 IT_Coin:3, }; var ItemManager = cc.Class({ extends: cc.Component, properties: { // foo: { // // ATTRIBUTES: // default: null, // The default value will be used only when the component attaching // // to a node for the first time // type: cc.SpriteFrame, // optional, default is typeof default // serializable: true, // optional, default is true // }, // bar: { // get () { // return this._bar; // }, // set (value) { // this._bar = value; // } // }, //物品Prefab列表 ItemPrefabList: { default: [], type: [cc.Prefab], }, //概率列表 ItemRateList: { default:[], type: [cc.Integer], }, //隨機的基數 _RandBaseNum : 100, _RandRateList: [], //物品池 _ItemPoolList: [], }, // LIFE-CYCLE CALLBACKS: onLoad () { this._RandBaseNum = 0; //概率統計： for(var i = 0; i < this.ItemRateList.length; ++i) { this._RandBaseNum += this.ItemRateList[i]; if(i == 0) { this._RandRateList[i] = this.ItemRateList[i]; } else { this._RandRateList[i] = this._RandRateList[i - 1] + this.ItemRateList[i]; } } //物品池,各個物品先預建立3個 for(let i = 0; i < 4; ++i) { this._ItemPoolList[i] = new cc.NodePool(); for(var j = 0; j < 3; ++j) { var curItem = cc.instantiate(this.ItemPrefabList[i]); this._ItemPoolList[i].put(curItem); //設定為物品 curItem.group = "item"; curItem.setTag(i); } } }, start () { }, //獲取當前Block掛載的物品 getRandomItemType() { //[0, 1) var randNum = parseInt(cc.random0To1() * this._RandBaseNum); for(var i = 0; i < this._RandRateList.length; ++i) { if(randNum < this._RandRateList[i] ) { break; } } //cc.log("getRandomItemType ", randNum, ); return i - 1; }, //獲取某型別的Item getItemByType( itemType ) { if(itemType == ItemType.IT_None) { return null; } if(itemType > 3 || itemType < 0) { return null; } var curItem = this._ItemPoolList[itemType].get(); if(curItem == null) { curItem = cc.instantiate(this.ItemPrefabList[itemType]); this._ItemPoolList[itemType].put(curItem); //設定為物品 curItem.group = "item"; curItem.setTag(itemType); curItem = this._ItemPoolList[itemType].get(); cc.log("new item ", itemType); } curItem.scale = 0.7; return curItem; }, //將Item重新返回到Pool putItemToPool(curItem) { if(curItem.group != 'item') { //cc.log("putItemToPool invalid group"); return; } curItem.parent = null; var itemType = curItem.getTag(); if(itemType > 3 || itemType < 0) { //cc.log("putItemToPool invalid itemType"); return; } this._ItemPoolList[itemType].put(curItem); }, // update (dt) {}, }); module.exports = { ItemType: ItemType, ItemManager: ItemManager, }
UIGame.js部分程式碼
//遊戲狀態的處理
setGameState(state)
{
//處理暫停邏輯
if(this._CurGameState == GameState.GS_Pause && state != this._CurGameState)
{
cc.director.resume();
}
//新狀態的處理
this._CurGameState = state;
//準備狀態
if(this._CurGameState == GameState.GS_Ready)
{
this.StartBtn.node.active = true;
this.PauseBtn.node.active = false;
}
//暫停
else if(this._CurGameState == GameState.GS_Pause)
{
cc.director.pause();
//按鈕顯示與隱藏
this.StartBtn.node.active = true;
this.PauseBtn.node.active = false;
}
//等待遊戲中的操作
else if(this._CurGameState == GameState.GS_WaitOP)
{
this.StartBtn.node.active = false;
this.PauseBtn.node.active = true;
//對當前Block進行下移操作
if(this._CurBlockIndex < 0 || this._CurBlockIndex >= this._BlockListUse.length)
{
cc.log("GS_WaitOP invalid _CurBlockIndex ", this._CurBlockIndex);
return;
}
var curBlock = this._BlockListUse[this._CurBlockIndex];
if(curBlock == null)
{
cc.log("GS_WaitOP invalid curBlock null", this._CurBlockIndex);
return;
}
//block下移
var downAct = curBlock.getActionByTag(0);
if(downAct == null)
{
var downActScale = cc.scaleTo(1.5, 1, 0);
var callFunc = cc.callFunc(this.onBlockDownFinish, this, curBlock);
downAct = cc.sequence(downActScale, callFunc);
curBlock.runAction(downAct);
}
}
//遊戲結束
else if(this._CurGameState == GameState.GS_Over)
{
//按鈕顯示與隱藏
this.StartBtn.node.active = false;
this.PauseBtn.node.active = false;
var UIManager = this.node.parent.getComponent('UIManager');
UIManager.openUI(UIType.UIType_GameOver);
//向子域傳送，上傳資料
var DataManager = this.DataManager.getComponent('DataManager');
if(window.wx != undefined)
{
window.wx.postMessage(
{
msgType: 1,
bestScore: DataManager.getCurScore(),
}
);
}
//播放背景音樂
if(this.SoundManager)
{
var soundMgr = this.SoundManager.getComponent('SoundManager');
soundMgr.stopSound(SoundType.SoundType_Bg);
soundMgr.playSound(SoundType.SoundType_Fall);
}
}
},動態場景生成：
//------------------------Block操作 begin--------------------------
//獲取Block
getBlock()
{
if(this._BlockList.length > 0)
{
var block = this._BlockList.pop();
this._BlockListUse.push(block);
return block;
}
else
{
var block = cc.instantiate(this.BlockPrefab);
this.pushBlock(block);
return this.getBlock();
}
},
//新增Block
pushBlock(block)
{
// this._BlockPool.put(block);
this._BlockList.push(block);
},
//移除Block(移除一個最下面的，螢幕外的Block) 還原到池裡
delelteUseBlock()
{
var firstBlock = this._BlockListUse.shift();
firstBlock.parent = null;
firstBlock.scaleY = 1;
//將Block下物品還原到物品池
this.restoreItemToPool(firstBlock);
this._BlockList.push(firstBlock);
this._CurBlockIndex -= 1;
},
小遊戲完整工程
小遊戲完整的cocos creator工程：奔跑吧小驢，此工程僅供學習參考用途。發現程式碼中的Bug或者任何問題，請留言。
沒有積分的可以在下方留言索取資源，雖然不保證即時回覆
試玩：奔跑吧小驢線上試玩 （由於起初就是做的微信小遊戲，所以在瀏覽器下會有些瑕疵，只做了簡單的適配，未測試過）
應廣大網友要求，現將程式碼放在github上：github creator工程，主要是我沒有CSDN的積分，想賺點積分下載其它資源用。可憐可憐我吧