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
• [x] 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