About

@ancademy/elf-xxx is a set of kit for multiplayer web game development based on NodeJS and TypeScript. It allows you to focus on your scene rendering and gameplay instead of bothering about networking or database.

Features

• Multiplayer: Game state is kept synchronized in realtime
• TypeSafe: Declare player actions and states with strict generics
• Logs: Game logs with the ability to time travel
• Non-intrusive: Use React, PixiJS or anything other for view-layer rendering
• Availability: Resume the game state after restarting
• Extendable: Build regular http service with express

Prepare

This project runs on NodeJS v10 and uses Mongodb and Redis as the persistence layer, so we need to install them first.

Tutorial

This tutorial walks through the demo Tic-Tac-Toe, we use React as the renderer in this demo.

Init

Init project according to the guide of bespoke-cli

Concepts

• namespace : The game will be mounted at the route : /namespace
• ICreateParams : We can configure some parameters when creating a game, but in this demo it could be ignored.
• State: The state of the world is divided into two parts, GameState is visible to everyone, while each player has his own PlayerState, they are passed around everywhere and maintained on both client and server seamlessly.
• Move : MoveType and IMoveParams declare what actions will the players make and what parameters would be sent to the server.
• Push : PushType and IPushParams declare what messages would be sent to players, which is independent of the state, and they won't be persisted.

Define State

Players are divided into groups of 2, we record number of players and who is the turn in IGameGroupState, the piece player held in IPlayerState

export enum Piece {
    null,
    x,
    o,
}

export enum GameStatus {
    matching,
    play,
    result,
}

export interface IGameGroupState {
    playerNum: number
    status: GameStatus
    pieces: Array<Piece>
    pieceTurn: Piece
}

export interface IGameState {
    groups: Array<IGameGroupState>
}

export interface IPlayerState {
    groupIndex: number
    piece: Piece
}

Define Move

export enum MoveType {
    getGroup,
    move
}
export interface IMoveParams {
    index: number // piece index
}

Client

In Play.tsx, as a player we can read gameState and playerState, and emit moves by frameEmitter, what you're doing next is to render your chessboard with React.

Server

In Logic.ts, we can init gameState and playerState, and then handle the player moves, just modify the state objects, they would be sync to client automatically.

Demo

You can find the complete code here