多人對戰遊戲開發實例之《組隊小雞射擊》（附源碼）

前言：該遊戲項目主要是基於前端引擎Cocos Creator開發，涉及後端聯網的部分，則經過接入Matchvs SDK完成快速開發工做。

準備工做

Matchvs JavaScript SDK 下載地址
Matchvs JavaScript 的Cocos Creator 插件使用手冊
Cocos Creator 下載地址

《組隊小雞射擊》玩法簡介：
雙方經過控制各自小雞，經過不斷點擊屏幕進行空中飛行射擊，被擊中者將消耗以愛心爲單位的生命值，遊戲支持四人同時實時對戰。

點擊並拖拽以移動​

實現步驟

遊戲實現部分可拆分爲三個步驟來實現：用戶登陸、隨機匹配和建立房間及同屏遊戲。

• 用戶登陸

​使用Cocos Creator(如下簡稱CC)建立遊戲登陸場景

​ 使用CC 拖動控件, 還原設計稿 , 依託CC的良好的工做流,使得這部分的工做能夠由遊戲策劃或者UI設計者來完成,程序開發者只須要在場景中掛載相應的遊戲邏輯腳本. 舉個例子,在登陸按鈕掛在一個uiLogin.js的腳本完成用戶登陸功能.

uilogin.fire

新建js腳本文件

選中場景任一控件

添加組件,選中剛新建的腳本,

在腳本的onLoad函數中給按鈕添加點擊監聽,觸發登陸操做

uiLogin.js
​
onLoad() {

this.nodeDict["start"].on("click", this.startGame, this);

},
startGame() {

Game.GameManager.matchVsInit();

}

實現this.startGame函數. 登陸以前須要初始化Matchvs SDK:

uiLogin.js

uiLogin.js
var uiPanel = require("uiPanel");
cc.Class({

extends: uiPanel,
properties: {},

​

onLoad() {
    this._super();
    this.nodeDict["start"].on("click", this.startGame, this);
},

​

startGame() {
    Game.GameManager.matchVsInit();
}

});
​
​
Game.GameManager.js

matchVsInit: function() {

mvs.response.initResponse = this.initResponse.bind(this);
mvs.response.errorResponse = this.errorResponse.bind(this);
// 用戶登陸以後的回調
mvs.response.loginResponse = this.loginResponse.bind(this);

​

var result = mvs.engine.init(mvs.response, GLB.channel, GLB.platform, GLB.gameId);
if (result !== 0) {
    console.log('初始化失敗,錯誤碼:' + result);
}

}
初始化須要的幾個參數在Matchvs官網註冊便可獲得,註冊地址 http://www.matchvs.com

channel: 'MatchVS',
platform: 'alpha',
gameId: 201330,
gameVersion: 1,
appKey: '7c7b185482d8444bb98bc93c7a65daaa',
secret: 'f469fb05eee9488bb32adfd85e4ca370',

註冊成功後,登陸Matchvs遊戲雲,返回UserID,登陸成功.

gameManager.js
​
registerUserResponse: function(userInfo) {

var deviceId = 'abcdef';
var gatewayId = 0;
GLB.userInfo = userInfo;

​

console.log('開始登陸,用戶Id:' + userInfo.id)

​

var result = mvs.engine.login(
    userInfo.id, userInfo.token,
    GLB.gameId, GLB.gameVersion,
    GLB.appKey, GLB.secret,
    deviceId, gatewayId
);
if (result !== 0) {
    console.log('登陸失敗,錯誤碼:' + result);
}

},
​
loginResponse: function(info) {

if (info.status !== 200) {
    console.log('登陸失敗,異步回調錯誤碼:' + info.status);
} else {
    console.log('登陸成功');
    this.lobbyShow();
}

},

• 隨機匹配和建立房間

使用CC建立大廳場景(uiLobbyPanel.fire)給用戶選擇匹配方式,建立匹配場景(uiMatching1v1.fire) 給用戶反饋比配進度

和登陸功能的實現步驟相似:寫一個 uiMatching1v1.js腳本掛在到場景中的控件上.

uiMatching1v1.js

joinRandomRoom: function() {

var result = mvs.engine.joinRandomRoom(GLB.MAX_PLAYER_COUNT, '');
if (result !== 0) {
    console.log('進入房間失敗,錯誤碼:' + result);
}

},
經過監聽joinRoomResponse和joinRoomNotify匹配結果

gameManager.js

joinRoomResponse: function(status, roomUserInfoList, roomInfo) {

if (status !== 200) {
    console.log("失敗 joinRoomResponse:" + status);
    return;
}
var data = {
    status: status,
    roomUserInfoList: roomUserInfoList,
    roomInfo: roomInfo
}
// 把事件發給關心這個事件的節點腳本
clientEvent.dispatch(clientEvent.eventType.joinRoomResponse, data);

},
​
joinRoomNotify: function(roomUserInfo) {

var data = {
    roomUserInfo: roomUserInfo
}
clientEvent.dispatch(clientEvent.eventType.joinRoomNotify, data);

},

• 同屏遊戲 , 實現遊戲同步

仍是按照上面的套路,新建場景(uiGamePanel.fire),在playerManager.js中,加載了player.js.在player.js中,攻擊的動做使用Matchvs 的 sendEventEx發出,

player.js

hurt: function(murderId) {

var msg = {
    action: GLB.PLAYER_HURT_EVENT,
    playerId: this.userId,
    murderId: murderId
};
Game.GameManager.sendEventEx(msg);

}
另外一方的客戶端收到後處理事情;

gameManager.js
​
// 玩家行爲通知--
sendEventNotify: function(info) {

if (info.cpProto.indexOf(GLB.PLAYER_HURT_EVENT) >= 0) {
    if (Game.GameManager.gameState !== GameState.Over) {
        player = Game.PlayerManager.getPlayerByUserId(cpProto.playerId);
        if (player) {
            player.hurtNotify(cpProto.murderId);
        }
        // 檢查回合結束--
        var loseCamp = Game.PlayerManager.getLoseCamp();
        if (loseCamp != null) {
            Game.GameManager.gameState = GameState.Over
            if (GLB.isRoomOwner) {
                this.sendRoundOverMsg(loseCamp);
            }
        }
    }
}

}
​
開發完成後， 再經過CC的微信小遊戲一鍵發佈功能上線微信便可。