Files
freeCodeCamp/curriculum/challenges/chinese/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md
Oliver Eyton-Williams ee1e8abd87 feat(curriculum): restore seed + solution to Chinese (#40683)
* feat(tools): add seed/solution restore script

* chore(curriculum): remove empty sections' markers

* chore(curriculum): add seed + solution to Chinese

* chore: remove old formatter

* fix: update getChallenges

parse translated challenges separately, without reference to the source

* chore(curriculum): add dashedName to English

* chore(curriculum): add dashedName to Chinese

* refactor: remove unused challenge property 'name'

* fix: relax dashedName requirement

* fix: stray tag

Remove stray `pre` tag from challenge file.

Signed-off-by: nhcarrigan <nhcarrigan@gmail.com>

Co-authored-by: nhcarrigan <nhcarrigan@gmail.com>
2021-01-12 19:31:00 -07:00

3.5 KiB

id, challengeType, dashedName
id challengeType dashedName
5e601c775ac9d0ecd8b94aff 4 secure-real-time-multiplayer-game

--description--

Develop a 2D real time multiplayer game using the HTML Canvas API and Socket.io that is functionally similar to this: https://thread-valley-lipstick.glitch.me/.

Working on this project will involve you writing your code on Glitch on our starter project. After completing this project you can copy your public glitch url (to the homepage of your app) into this screen to test it! Optionally you may choose to write your project on another platform but it must be publicly visible for our testing.

Start this project on Glitch using this link or clone this repository on GitHub! If you use Glitch, remember to save the link to your project somewhere safe!

--hints--

Multiple players can connect to a server and play.


Each player has an avatar.


Each player is represented by an object created by the Player class in Player.mjs.


At a minimum, each player object should contain a unique id, a score, and x and y coordinates representing the player's current position.


The game has at least one type of collectible item. Complete the Collectible class in Collectible.mjs to implement this.


At a minimum, each collectible item object created by the Collectible class should contain a unique id, a value, and x and y coordinates representing the item's current position.


Players can use the WASD and/or arrow keys to move their avatar. Complete the movePlayer method in Player.mjs to implement this.


The movePlayer method 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. movePlayer should adjust the x and y coordinates 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 calculateRank method in the Player class to implement this.


The calculateRank method should accept an array of objects representing all connected players and return the string Rank: 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, calculateRank for Player A should return Rank: 2/2.


Players can collide with a collectible item. Complete the collision method in Player.mjs to implement this.


The collision method should accept a collectible item's object as an argument. If the player's avatar intersects with the item, the collision method should return true.


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).


--solutions--

/**
  Backend challenges don't need solutions,
  because they would need to be tested against a full working project.
  Please check our contributing guidelines to learn more.
*/