Congratulations! We’ve now covered enough fundamentals of Javascript (and programming in general) to start coding our first Javascript website. In this chapter, we’re going to code a simple reaction game that allows up to 10 different players to compete against each other. If you would like to try out this game, you can head over to https://learnjavascriptfast.com/demo/jsgame.html.
This game randomly generates up to 10 drawings of different shapes, sizes and colors. Each player gets to play 10 rounds. On each round, they are asked to click on a specific shape of a certain color. For instance, they may be asked to click on a blue square. Once they click on the correct drawing, the program records their reaction time and proceeds to the next round.
After 10 rounds, the game proceeds to the next player.
When all players have completed their rounds, the game displays the results of all players, ranked based on their average reaction time. The player with the shortest average reaction time wins.
Quite a simple game right? However, this game requires us to apply most of the Javascript concepts that we’ve learned so far. We will only be coding the Javascript portion, the HTML and CSS portions have already be pre-coded. You can click here to download the HTML and CSS code.
First, create a new folder on our desktop and label it JavascriptGame. Next, copy the HTML and CSS files into the folder. Finally, create a new file in Brackets and name it script.js. We'll be doing all our Javascript coding in this file.
Ready to start coding the game now? Let’s go!