Skip to main content

Command Palette

Search for a command to run...

Make a multiplayer card game - Episode 4 | Play cards with other players

Published

This section is a milestone in this series of tutorials, and after this article, there will present a complete multiplayer local online card game.

The key point of this section is how to link multiplayer to play.

Almost all changes is on the server side:

We make a server and listen on "connection" event.

const net = require('net');
const server = net.createServer();
server.on("connection",()=>{});

Then we generate a player ID and seat number for the player connecting.

var playerIDArr = [];
function generatePlayerIDAndSeatNumber() {
    let _seat = playerIDArr.length;
    let _id = Math.floor(Math.random() * 10000);
    let _isExist = playerIDArr.indexOf(_id) != -1;
    if (_isExist) {
        generatePlayerIDAndSeatNumber();
    } else {
        playerIDArr.push(_id);
    }
    return { id: _id, seat: _seat };
}

Back to the "connection" event, we assign some attributes on socket to make a identification.

server.on("connection", (socket) => {
    let _id_seat = generatePlayerIDAndSeatNumber();
    let _playerID = _id_seat.id;
    let _seatNumber = _id_seat.seat;
    socket.id = _playerID;
    socket.seat = _seatNumber;
    socketDic[_playerID] = socket;

    addSocketListener(socket);
})

Add event listener to each socket, listen players' interaction information through data which cotain the command ID to route different game logic:

function addSocketListener(socket) {
    socket.on('data', (data) => {
        let _playerID = socket.id;
        decodeData(data, _playerID);
    });
    socket.on('error', (error) => {
        //player disconnect
        console.log(error);
    });
}

the server forwards each player's messages, which are divided into separate sending and broadcasting.

//send to a specific player
function send(playerID, cmd, data) {
    if (!mIsGaming) return;
    const _dataBuffer = encodeData(cmd, data);
    if (_dataBuffer) socketDic[playerID].write(_dataBuffer);
}
//send to all players
function broadcast(cmd, data) {
    if (!mIsGaming) return;
    const _dataBuffer = encodeData(cmd, data);
    if (_dataBuffer) {
        let _keyArr = Object.keys(socketDic);
        for (let i = 0; i < _keyArr.length; i++) {
            let _socket = socketDic[_keyArr[i]];
            _socket.write(_dataBuffer);
        }
    }
}

That's all the key points in this section, as above present, players can be connect to a server and play with each other. You can check episode4 tag to see the complete code.


The progress of the project up to this point have make a milestone, will not add new content to the relevant repo main branch, excluding the subsequent refactoring to prepare for the involvement of the game engine and framework.

The addition of new content will open another branch for development. Like each episode, a tag will still be added after the chapter ends. You can find the content of the corresponding chapter through the corresponding tag at any time.

In order to reflect the simplicity of native nodejs, I chose javascript. But I have been developing with typescript in the past few years, is not very familiar with javascript, which I must spend a little bit more time on debugging.

The content of the following chapters will expand rapidly. For either the robustness of development or my proficiency. I will use typescript for new content development and refactoring in later articles.

The next episode, as the content list in the first episode, I will add game engine Cocos Creator, before which I will make a refactory, besides move javascript to typescript, but something about modularity.

Thanks for your reading, and discussion is always welcome, I am very glad to talk with you in below comment section😊.

More from this blog

如何将静态页面部署到Github Page,并绑定自定义域名

在仓库主页选择setting 点击pages 选择分支branch 输入自定义域名custom domain(设置好后点击save,系统将自动在项目根目录生成CNAME文件,文件内容为设置的当前域名) 在域名提供商处,添加DNS设置(以阿里云为例) 配置CNAME 配置IP,创建一个A类记录指向185.199.108.153 github将根据访问域名路由项目仓库(仓库名称为iddz.fun,并且根目录有CNAME文件) 最后,通过访问自定义域名,完成静态网站的部署...

Oct 4, 2023
如何将静态页面部署到Github Page,并绑定自定义域名

熟悉熟悉官方文档,逐步深入Babylon.js

文档的组织结构 通过前一篇文章的了解,我们会对Babylon.js有了一个大致的了解,整个文档主要是想带你逐步深入掌握这个Babylon.js所提供的所有内容。 内容主要分为一个概览和9个主要部分,这些部分包含章节,还有API详解和强大的文档和playground搜索功能。 - 1.Babylon.js特性 - Babylon.js是一个功能完备的游戏和渲染引擎,具有广泛的特性。这个部分将带你了解这些特性,并帮助你编码和使用它们。- 2.将Babylon.js添加到你的Web项目中 - 有多种...

Sep 25, 2023
熟悉熟悉官方文档,逐步深入Babylon.js

Lizhiyu's Blog

33 posts

Bringing the world closer together through play