The Simon game is the exciting electronic game of lights and sounds in which players must repeat random sequences of lights by pressing the colored pads in the correct order. It's fast-paced play, with lights and sounds that can challenge you. Experience the fun as you repeat the patterns and advance to higher levels.
Simon is a great game for practicing Working Memory. The game can be played in a simple, four color mode, or players can try their hand at the more challenging nine color mode.
To beat the Simon game, players need to remember the color pattern and repeat it by pressing the colored buttons on the game unit in the correct order. It starts off at a rather steady pace, but the more you play, the more complicated the patterns become, building suspense with each turn.
- Create a new file called game.js
- Link to this new external JS file from your index.html
- Add jQuerry to index.html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
- Inside game.js create a new function called
nextSequence()
- Inside the new function generate a new random number between 0 and 3, and store it in a variable called
randomNumber
- At the top of the game.js file, create a new array called
buttonColours
and set it to hold the sequence"red", "blue", "green", "yellow"
. - Create a new variable called
randomChosenColour
and use therandomNumber
from step 2 to select a random colour from thebuttonColours
array. - At the top of the game.js file, create a new empty array called
gamePattern
. - Add the new
randomChosenColour
generated in step 4 to the end of thegamePattern
.
- Use jQuery to select the button with the same id as the
randomChosenColour
- Use jQuery to detect when any of the buttons are clicked and trigger a handler function.
- Inside the handler, create a new variable called
userChosenColour
to store the id of the button that got clicked.
So if the Green button was clicked,
userChosenColour
will equal its id which is"green"
.
- At the top of the game.js file, create a new empty array with the name
userClickedPattern
. - Add the contents of the variable
userChosenColour
created in step 2 to the end of this newuserClickedPattern
- At this stage, if you log the
userClickedPattern
you should be able to build up an array in the console by clicking on different buttons.
- In the same way we played sound in
nextSequence()
, when a user clicks on a button, the corresponding sound should be played. e.g if the Green button is clicked, then green.mp3 should be played. - Create a new function called
playSound()
that takes a single input parameter calledname
. - Take the code we used to play sound in the
nextSequence()
function and move it toplaySound()
. - Refactor the code in playSound() so that it will work for both playing sound in
nextSequence()
and when the user clicks a button.
- Create a new function called
animatePress()
, it should take a single input parameter calledcurrentColour
. - Take a look inside the styles.css file, you can see there is a class called "
pressed
", it will add a box shadow and changes the background colour to grey. - Use jQuery to add this
pressed
class to the button that gets clicked insideanimatePress()
. - use Javascript to remove the pressed class after a
100 milliseconds
.
- Use jQuery to detect when a keyboard key has been pressed, when that happens for the first time, call
nextSequence()
.
You'll need a way to keep track of whether if the game has started or not, so you only call
nextSequence()
on the first keypress.
- Create a new variable called
level
and start at level 0. - The h1 title starts out saying "Press A Key to Start", when the game has started, change this to say "Level 0".
- Inside
nextSequence()
, increase the level by 1 every timenextSequence()
is called. - Inside
nextSequence()
, update the h1 with this change in the value of level.
- Create a new function called
checkAnswer()
, it should take one input with the namecurrentLevel
- Call
checkAnswer()
after a user has clicked and chosen their answer, passing in the index of the last answer in the user's sequence. e.g. If the user has pressed red, green, red, yellow, the index of the last answer is 3. - Write an if statement inside
checkAnswer()
to check if the most recent user answer is the same as the game pattern. If so then log "success
", otherwise log "wrong
". - If the user got the most recent answer right in step 3, then check that they have finished their sequence with another if statement.
- Call
nextSequence()
after a 1000 millisecond delay. - Once
nextSequence()
is triggered, reset theuserClickedPattern
to an empty array ready for the next level.
- In the sounds folder, there is a sound called wrong.mp3, play this sound if the user got one of the answers wrong.
- In the styles.css file, there is a class called "
game-over
", apply this class to thebody
of the website when the user gets one of the answers wrong and then remove it after 200 milliseconds. - Change the h1 title to say "
Game Over, Press Any Key to Restart
" if the user got the answer wrong.
- Create a new function called
startOver()
. - Call
startOver()
if the user gets the sequence wrong. - Inside this function, you'll need to reset the values of
level
,gamePattern
andstarted
variables.
- HTML file: index.html.
- CSS File: styles.css.
- JavaScript File: game.js.