Multi-player Online feature (part 1— creating Websocket connection)

This is what we want to accomplish
  1. When a new player joins a game (creates a connection to the server), we want a new character sprite to appear onto other current players’ screens.
  2. Whenever a player moves his/her character, the movement is reflected onto other players’ screens.
  3. When a player leaves a game (connection closes, in this case, his/her browser window/tab closes, because we don’t have to log out of exit functionality yet), we want his/her sprite to disappear from the other players’ screens.
On the server side, this is the codes we want to execute
On the client side, render a sprite based on what we get back from the server, instead of hard coding
  1. Create a folder named basic-mmo-phaser. Inside the folder, create 2 folders: js and assets, which will contain our JavaScript files and game assets like images. In the main folder, create an index.html file, with the following script tags to import our js files.
In the game.js file, create a config object and pass it onto a new Phaser.Game instance
The boilerplate for a scene in Phaser game
A 128x192 pixels spritesheet
A background png image I am using
What we have so far
Inside of our package.json file
The files and folders so far
Inside of our server.js file
Line 33 will listen for a disconnection, and console log a msg
Our server running on localhost: 9090
On the bottom of the Output pane, a msg is displayed whenever a disconnection occurs

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

A simple explanation of decorators in Javascript

🔺 Min Heap Data Structure

How to patch packages in node_modules

ExpressJS — Routing

Development Environment Setup Angular, Nodejs Backend — Typescript Version

LWC Wire and Imperative

Getting Started with React and MapBox GL JS

Express or Koa What to Choose?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
James JingChao Yu

James JingChao Yu

More from Medium

CS373 Spring 2022 Week 9: Nathaniel Nemenzo

Spring-01: Introduction to Spring

Sample use-case of Spring Application.

Developers’ inseparable toolkit: Part 2, GIT

WSO2 Identity Server Consent Post-Authentication Handler -Part 1