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