Skip to content
/ blocker Public

🎮 (WIP - phase 3) Multiplayer online game using Phaser + WebSocket (Socket.IO)

License

Notifications You must be signed in to change notification settings

jojoee/blocker

Repository files navigation

Blocker

Build Status

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

Demo

Blocker - Game play 1

Blocker - Debug

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

Multiplayer

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

Data structure