联网对战开源游戏分享之《激流竞速》（附教程）

Matchvs是一款游戏服务器引擎，《激流竞速》这款游戏是基于Cocos Creator进行前端开发的基础上，通过接入matchvs SDK完成了联网功能的快速实现。在游戏中，双方可以进行实时PK对战，通过控制角色在高速行进的平台上不断跳跃，若一方角色掉落水中则宣告游戏失败。

体验地址：http://alphazwimg.matchvs.com/cocos/oneTwoStep/web-mobile/

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

■准备工具与文档：

1.Cocos Creator

2.Matchvs JavaScript SDK

3.Matchvs JavaScript 的Cocos Creator 插件使用手册

————————————————————————

游戏主要功能实现

设计游戏实现可拆分为用户登录、随机匹配和创建房间与同屏游戏三个部分。

用户登录

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

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

uilogin.fire

新建js脚本文件
选中场景任一控件
添加组件,选中刚新建的脚本,
在脚本的on'Load函数中给按钮添加点击监听,触发登录操作

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: 201372,
    gameVersion: 1,
    appKey: '9a93e36777004e98905a7e66d0808a42',
    secret: 'daf7049c6e3e48e08bfe90abd5b77b0e',

登录Matchvs游戏云,返回UserID看，登录成功.

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),挂在脚本(uiGamePanel.js).攻击的动作使用Matchvs 的 sendEventEx发出

onClick: function() {
    if (Game.GameManager.gameState !== GameState.Play) {
        return;
    }
    if (this.data.ID === Game.PlayerManager.player.jumpRecordId) {
        var exist = Game.PlayerManager.player.jumpPos.some(function (x) {
            return this.data === x;
        }.bind(this));
        if (!exist) {
            cc.audioEngine.play(this.clickAudio, false, 1);
            this.stoneSp.spriteFrame = this.clickSf;
            var msg = {
                action: GLB.PLAYER_STEP_DATA,
                data: this.data
            };
            Game.GameManager.sendEventEx(msg);
        }
    }
},

另一方的客户端收到后处理加分,播放击中动画等事情;

// 玩家行为通知--
sendEventNotify: function(info) {
    var cpProto = JSON.parse(info.cpProto);
    if (info.cpProto.indexOf(GLB.GAME_START_EVENT) >= 0) {
        GLB.playerUserIds = [GLB.userInfo.id]
        var remoteUserIds = JSON.parse(info.cpProto).userIds;
        remoteUserIds.forEach(function(id) {
            if (GLB.userInfo.id !== id) {
                GLB.playerUserIds.push(id);
            }
        });
        this.startGame();
    }
}

开发完成后， 再通过CC的微信小游戏一键发布功能上线微信。

联网对战开源游戏分享之《激流竞速》（附教程）

游戏主要功能实现

猜你喜欢