Blocker

Multiplayer online game using Phaser + WebSocket (Socket.IO).

Control

1. Mouse
- Left: move
- Right: fire

2. Keyboard
- Up: move
- Left / Right: rotate
- Spacebar: fire

Gifshot

Getting Started

1. Install Node.js
2. Install Nodemon Bower Gulp: npm install -g nodemon yarn bower pm2
3. Install dependencies: yarn && bower install

Build client side
- dev: `yarn build.watch`
- prod: `yarn build`

Start server side
- dev: `nodemon app.js --watch app.js`
- prod: `pm2 start app.js`

Note

1. Code guideline & Naming we use
1.1 Base javascript style: [Airbnb](https://github.com/airbnb/javascript)
1.2 Function should return only one type
  e.g.
  - getName: string, '' (default)
  - getRandomInt: number, 0 (default)
  - getPlayers: Array, [] (default)
  - getPlayer: Object, {} (default)

  except getIndex
  e.g.
  - getIndexOfPlayer: number, -1 (default)

2. Naming
- Function / scope variable: `camelCase`  
- Global variable: `UPPERCASE`
- Class: `PascalCase`

3. Creature
- Monster
  - Zombie
  - Machine
  - Bat
- Hero
  - Player / Enemy

4. Socket
- Send to specific client: IO.sockets.connected[socketId].emit(EVENT_NAME, data);
- Send to all clients: IO.emit(EVENT_NAME, data);
- Send to all clients except newly created connection: socket.broadcast.emit(EVENT_NAME, data);

5. Event flow
Anything's related with `life` directly, is need to broadcast first then
take effect from subsequent request. (currently, there are only 2 events
(move / fire) that can execute on client before broadcasting)

6. CommonJs

TODO

• All game calculation should be calculated on server-side
• Define structure of sending-object and response-object from server
• Send player-event to server (not data-object)
• Check const and let again
• Make all functions functional
• Remove all eslint-disable-line
• Add checkAlive event: the player is already gone, but it's still in the game (cause from network issue)
• Using MessagePack instead of JSON
• Respawn delay
• Redirect all pages to root (cause we only use root page)
• Update bubble/message graphic, 1
• Add deploy shell script
• Day / Night system
• Implement Shields.io
• minimap, 1, 2, 3
• Responsive (support mobile / tablet user)
• Support screen when resizing
• HUD
• Score board (Leader board)
• Cache
• Knockback when creature is hitted
• Add test (TDD) with test-task-runner, 1
• QA - Analysis / Optimize / Profiling / ETC (e.g. sonarqube)
• Sound
• Effect / Screen transition / Screen shake
• Fix - Creature is damaged and welled in the same time
• Arrow / Laser is killed when hit stoneGroup
• Room / Channel (able to create private room), 1, 2, 3
• Add social meta / share
• Bot player
• Tween: player move
• Hero can collect item in the floor
• Other class (e.g. Swordsman)
• Monster path finder, 1, 2, 3
• Creature sight feature, 1, 2, 3
• Monster walk - random walk
• Monster can be fired, welled
• Talkable monster
• Tween: monster move

Reference & Tutorial & Plugin & Tool

• Inspired by Blocker
• phaser-multiplayer-game
• phaser-screen-shake
• Text to ASCII Art Generator (TAAG)
• phaser-state-transition
• Tiled Map Editor

Multiplayer

• Introduction to development of multiplayer HTML5 games (with Socket.io) 1, 2

Data structure

• Generate id, 1, 2, 3, 4
• Remove / Generate client id