- Clone this project
- cmd
npm install(if done it before then don't need) - cmd
npm run develop - Open browser and go to 127.0.0.1:3000
- Problem of camera vision out of bound
- Character select page should be shown
- Game over page (to show who won)
- Power bar
npm run develop
npm run build
npm start
pixi.js
express
socket.io
eslint, airbnb config
prettier
How to Build a Multiplayer(.io) Web Game -- Victor Zhou
- An Example .io Game (repo)
- How to Build a Multiplayer (.io) Web Game, Part 1
- How to Build a Multiplayer (.io) Web Game, Part 2
-
Object
-
constructor (id, x, y, dir, speed)
Info Description Parameters id - A random number
x - Initial x-coordinate
y - Initial y-coordinate
dir - Initial orientation
speed - A fixed numberSave basic object information.
-
update (dt)
Info Description Parameters dt - A time interval between two frames Change the position of the object.
-
distanceTo (object)
Info Description Parameters object - Any subclasses of Object class Return Distance between two objects Return type Number Calculate the distance between two given objects.
-
setDirection (dir)
Info Description Parameters dir - Direction Set direction.
-
serializeForUpdate ()
Info Description Return Id and x, y coordinates of the object Return type Object Return a object containing the information of the object itself at this moment.
-
-
Bullet
-
constructor (parent, x, y, dir, speed)
Info Description Parameters parent - The role instance that shots the bullet
x - Initial x-coordinate
y - Initial y-coordinate
dir - Initial orientation
speed - A fixed numberSave basic bullet information.
-
update (dt)
Info Description Parameters dt - A time interval between two frames Return If or not the bullet exceeds the map border Return type Boolean Checkout that if the bullet exceeds the border or not. If so, it returns true and the bullet should be destroyed.
-
-
Player
-
constructor (id, username, x, y)
Info Description Parameters id - A random number
username - The name from the user input
x - Initial x-coordinate
y - Initial y-coordinateSave basic player information.
-
update (dt)
Info Description Parameters dt - A time interval between two frames Return A new bullet object if cool-down time finished, if not so, null. Return type Object / Null Update the player's score, coordinates and cool-down time, if needed, a bullet also will be fired.
-
takeBulletDamage (role)
Info Description Parameters role - One of the roles Decrease the player's hp value if shot by a bullet from different roles.
-
onDealtDamage () Increase the player's score if another player is shot by which.
-
serializeForUpdate ()
Info Description Return The player's ID, current coordinates, orientation and hp value Return type Object
-
-
Game
-
constructor () Build a new room.
-
addPlayer (socket, username)
Info Description Parameters socket - The player's socket
username - Name from the user inputAdd the player to the room and randomly assign the initial position.
-
removePlayer (socket)
Info Description Parameters socket - The socket used by the player to be removed Remove the player and the socket.
-
handleInput (socket, dir)
Info Description Parameters socket - The socket used by the player
dir - Keyboard inputGrab the keyboard input and then change the direction.
-
update () Calculate the time elapsed, update the bullets' and the players' status, judge collisions and scores and renew all players' scenes.
-
getLeaderBoard ()
Info Description Return The new dashboard Return type Array Renew the dashboard by ordering players by their new scores and return it. -
createUpdate (player, leaderboard)
Info Description Parameters player -
leaderboard -Return Return type Object Return the current time, the player's information and others', all bullets' status and dashboard.
-
-
applyCollisions (players, bullets)
Info Description Parameters Return Destroyed bullets Return type Array Check if the player is shot by a bullet, if so, decrease the player's hp value and return the bullet array to be cleared. -
joinGame (username)
Info Description Parameters player - Add the player to a room.
-
handleInput (dir)
Info Description Parameters dir - Keyboard input Grab the input from the keyboard at this moment.
-
onDisconnect ()
Info Description Parameters