联网对战游戏开发实例之《斗兽棋》（附源码）

本次，Matchvs为大家带来的是一款回合制休闲游戏的开源案例。玩家双方在一个4X4的棋盘上，遵循食物链的规则玩法下进行翻牌与追逐，最终以场上存活的一方为获胜者。

体验地址:http://demo.matchvs.com/AnimalChecker-mobile

源码地址：:https://github.com/matchvs/AnimalChecker

首先你需要下载Cocos Creator 和Matchvs JavaScript SDK。本次游戏设计的实现步骤主要拆分为用户登录、随机匹配和创建房间、以及同屏游戏三个部分完成。

用户登录

使用Cocos Creator(以下简称CC)创建游戏登录场景

使用CC 拖动控件, 还原设计稿 , 依托CC的良好的工作流,使得这部分的工作可以由游戏策划或者UI设计者来完成,程序开发者只需要在场景中挂载相应的游戏逻辑脚本. 举个例子,在登录按钮挂在一个uiLogin.js的脚本完成用户登录功能.

uilogin.fire

新建一个uiLogin.js,按 1,2,3 三个步骤挂载到场景中.

新建js脚本文件
选中场景任一控件
添加组件,选中刚新建的脚本,

在脚本的on'Load函数中给按钮添加点击监听,触发登录操作

onLoad() {this.nodeDict["start"].on("click", Game.GameManager.matchVsInit, Game.GameManager);
}

实现this.startGame函数. 登录之前需要初始化Matchvs SDK:

uiLogin.js

uiLogin.js
---var uiPanel = require("uiPanel");
cc.Class({extends: uiPanel,properties: {},onLoad() {this._super();},start() {if (window.wx) {this.nodeDict["start"].active = false;wx.getSystemInfo({success: function(data) {Game.GameManager.getUserInfoBtn = wx.createUserInfoButton({type: 'text',text: '开始多人游戏',style: {left: data.screenWidth * 0.2,top: data.screenHeight * 0.73,width: data.screenWidth * 0.65,height: data.screenHeight * 0.07,lineHeight: data.screenHeight * 0.07,backgroundColor: '#fe714a',color: '#ffffff',textAlign: 'center',fontSize: data.screenHeight * 0.025,borderRadius: 8}});Game.GameManager.getUserInfoBtn.onTap(function(res) {if (Game.GameManager.isClickCd) {return;}Game.GameManager.isClickCd = true;setTimeout(function() {Game.GameManager.isClickCd = false;}, 1000);Game.GameManager.nickName = res.userInfo.nickName;Game.GameManager.avatarUrl = res.userInfo.avatarUrl;Game.GameManager.matchVsInit();Game.GameManager.getUserInfoBtn.hide();});}});} else {this.nodeDict["start"].on("click", Game.GameManager.matchVsInit, Game.GameManager);}},onEnable() {if (Game.GameManager.getUserInfoBtn) {Game.GameManager.getUserInfoBtn.show();}},onDisable() {if (Game.GameManager.getUserInfoBtn) {Game.GameManager.getUserInfoBtn.hide();}}
});

初始化需要的几个参数在Matchvs官网注册即可得到.

 //Glb.js//--------channel: 'MatchVS',platform: 'alpha',gameId: 201554,gameVersion: 1,appKey: 'd4e29d00bd3a48e2acf4f6e7a5ffe270',secret: 'f0f7bd601d9f43db840091ac08a17002',

开始游戏,跳转场景uiGamePanel:

 startGame: function() {console.log('-----startGame-----')if(this.isLoadGame) return;this.isLoadGame = true;this.readyCnt = 0;cc.director.loadScene('game', function() {clientEvent.dispatch(clientEvent.eventType.clearChess);uiFunc.openUI("uiGamePanel", function(panel) {panel.getComponent("uiGamePanel").timeLabelInit();this.sendReadyMsg();}.bind(this));}.bind(this));},

随机匹配和创建房间

使用CC创建大厅场景(uiLobbyPanel.fire)给用户选择匹配方式,创建匹配场景(uiMatching1v1.fire) 给用户反馈比配进度，与登录功能的实现步骤类似：写一个 uiMatching1v1.js脚本挂在到场景中的控件上.

uiMatching1v1.js
----randomRoom: function() {Game.GameManager.blockInput();GLB.matchType = GLB.RANDOM_MATCH; // 修改匹配方式为随机匹配console.log('开始随机匹配');if (GLB.gameType === GLB.COOPERATION) {if (GLB.MAX_PLAYER_COUNT > 1) {if (cc.Canvas.instance.designResolution.height > cc.Canvas.instance.designResolution.width) {uiFunc.openUI("uiMatchingVer", function(obj) {var matching = obj.getComponent("uiMatching");matching.joinRandomRoom();});} else {uiFunc.openUI("uiMatching", function(obj) {var matching = obj.getComponent("uiMatching");matching.joinRandomRoom();});}} else {cc.director.loadScene('game');}} else if (GLB.gameType === GLB.COMPETITION) {if (GLB.MAX_PLAYER_COUNT === 2) {if (cc.Canvas.instance.designResolution.height > cc.Canvas.instance.designResolution.width) {uiFunc.openUI("uiMatching1v1Ver", function(obj) {var matching = obj.getComponent("uiMatching1v1Ver");matching.joinRandomRoom();});} else {uiFunc.openUI("uiMatching1v1", function(obj) {var matching = obj.getComponent("uiMatching1v1");matching.joinRandomRoom();});}} else if (GLB.MAX_PLAYER_COUNT === 4) {if (cc.Canvas.instance.designResolution.height > cc.Canvas.instance.designResolution.width) {uiFunc.openUI("uiMatching2v2Ver", function(obj) {var matching = obj.getComponent("uiMatching2v2Ver");matching.joinRandomRoom();});} else {uiFunc.openUI("uiMatching2v2Ver", function(obj) {var matching = obj.getComponent("uiMatching2v2Ver");matching.joinRandomRoom();});}}}},

通过监听joinRoomResponse和joinRoomNotify匹配结果

uiMatchvsing1v1.js
---
joinRandomRoom: function() {var result = null;if (GLB.matchType === GLB.RANDOM_MATCH) {result = mvs.engine.joinRandomRoom(GLB.MAX_PLAYER_COUNT, '');if (result !== 0) {console.log('进入房间失败,错误码:' + result);}} else if (GLB.matchType === GLB.PROPERTY_MATCH) {var matchinfo = new mvs.MatchInfo();matchinfo.maxPlayer = GLB.MAX_PLAYER_COUNT;matchinfo.mode = 0;matchinfo.canWatch = 0;matchinfo.tags = GLB.tagsInfo;result = mvs.engine.joinRoomWithProperties(matchinfo, "joinRoomWithProperties");if (result !== 0) {console.log('进入房间失败,错误码:' + result);}}},

监听进房间操作的服务器回复和房间玩家进出情况的消息:

joinRoomResponse: function(data) {if (data.status !== 200) {console.log('进入房间失败,异步回调错误码: ' + data.status);} else {console.log('进入房间成功');console.log('房间号: ' + data.roomInfo.roomID);}GLB.roomId = data.roomInfo.roomID;var userIds = [GLB.userInfo.id]console.log('房间用户: ' + userIds);var playerIcon = null;for (var j = 0; j < data.roomUserInfoList.length; j++) {playerIcon = this.playerIcons[j].getComponent('playerIcon');if (playerIcon && !playerIcon.userInfo) {playerIcon.setData(data.roomUserInfoList[j]);if (GLB.userInfo.id !== data.roomUserInfoList[j].userId) {userIds.push(data.roomUserInfoList[j].userId);}}}for (var i = 0; i < this.playerIcons.length; i++) {playerIcon = this.playerIcons[i].getComponent('playerIcon');if (playerIcon && !playerIcon.userInfo) {playerIcon.setData(GLB.userInfo);}}GLB.playerUserIds = userIds;if (userIds.length >= GLB.MAX_PLAYER_COUNT) {var result = mvs.engine.joinOver("");console.log("发出关闭房间的通知");if (result !== 0) {console.log("关闭房间失败，错误码：", result);}GLB.playerUserIds = userIds;}},joinRoomNotify: function(data) {console.log("joinRoomNotify, roomUserInfo:" + JSON.stringify(data.roomUserInfo));var playerIcon = null;for (var j = 0; j < this.playerIcons.length; j++) {playerIcon = this.playerIcons[j].getComponent('playerIcon');if (playerIcon && !playerIcon.userInfo) {playerIcon.setData(data.roomUserInfo);break;}}

游戏同步发布上线

还是按照上给你面的套路,新建场景(uiGamePanel.fire),挂在脚本(uiGamePanel.js).攻击的动作使用Matchvs 的 sendEventEx发出,如回合开始播放动画:

roundStart () {console.log('------roundStart------')this.timeLabelInit();clearInterval(this.interval);this.playerFlag = GLB.PLAYER_FLAG.RED;// this.getTurn(this.playerFlag);user.init();this.headColorInit();clientEvent.dispatch(clientEvent.eventType.getMap);this.playReadyGo();this.setTimeNumFont();this.setHeadIcon();},

另一方的客户端收到后处理游戏中的各种事件消息;开发完成后，再通过CC的一键发布微信小游戏功能上线微信。

clientEvent.on(clientEvent.eventType.updateTime, this.updateTime, this);clientEvent.on(clientEvent.eventType.countTime, this.countTime, this);clientEvent.on(clientEvent.eventType.changeFlag, this.changeFlag, this);clientEvent.on(clientEvent.eventType.roundStart, this.roundStart, this);clientEvent.on(clientEvent.eventType.gameOver, this.gameOver, this);clientEvent.on(clientEvent.eventType.stopTimeWarnAnim, this.stopTimeWarnAnim, this);