Develop a 2D real time multiplayer game using the HTML Canvas API and Socket.io. The game can be as simple or complex as you like, as long as all the following user stories are implemented:
- Multiple players can connect to a server and play.
- Each player has an avatar.
- Each player is represented by an object created by the
Playerclass inPlayer.mjs. - At a minimum, each player object should contain a unique
id, ascore, andxandycoordinates representing the player's current position. - The game has at least one type of collectible item. Complete the
Collectibleclass inCollectible.mjsto implement this. - At a minimum, each collectible item object created by the
Collectibleclass should contain a uniqueid, avalue, andxandycoordinates representing the item's current position. - Players can use the WASD and/or arrow keys to move their avatar. Complete the
movePlayermethod inPlayer.mjsto implement this. - The
movePlayermethod should accept two arguments: a string of "up", "down", "left", or "right", and a number for the amount of pixels the player's position should change.movePlayershould adjust thexandycoordinates of the player object it's called from. - The player's score should be used to calculate their rank among the other players. Complete the
calculateRankmethod in thePlayerclass to implement this. - The
calculateRankmethod should accept an array of objects representing all connected players and return the stringRank: currentRanking/totalPlayers. For example, in a game with two players, if Player A has a score of 3 and Player B has a score of 5,calculateRankfor Player A should returnRank: 2/2. - Players can collide with a collectible item. Complete the
collisionmethod inPlayer.mjsto implement this. - The
collisionmethod should accept a collectible item's object as an argument. If the player's avatar intersects with the item, thecollisionmethod should returntrue. - All players are kept in sync.
- Players can disconnect from the game at any time.
- Prevent the client from trying to guess / sniff the MIME type.
- Prevent cross-site scripting (XSS) attacks.
- Nothing from the website is cached in the client.
- The headers say that the site is powered by "PHP 7.4.3" even though it isn't (as a security measure).
- To run the tests on Repl.it, set NODE_ENV to test without quotes in the .env file.
- To run the tests in the console, use the command npm run test. To open the Repl.it console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell".