simon
🖥️

Simon

Built with

html5
css
sass

Overview

I took FreeCodeCamp Front End Development Libraries Projects to improve my front end skills. With this project I used Vanilla Js to build a functional simon game.

Goals

Build a CodePen.io app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/obYBjE. Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own personal style Here are mp3s you can use for each button: https://s3.amazonaws.com/freecodecamp/simonSound1.mp3, https://s3.amazonaws.com/freecodecamp/simonSound2.mp3, https://s3.amazonaws.com/freecodecamp/simonSound3.mp3, https://s3.amazonaws.com/freecodecamp/simonSound4.mp3.

Lessons Learned

In this project I successfullyJavaScript to play audio file on button presses.

simon-mobile
Fig.1 - Mobile View of App

Process

I followed the freecodecamp user story:

  • User Story #1:I am presented with a random series of button presses.
  • User Story #2: Each time I input a series of button presses correctly, I see the same series of button presses but with an additional step.
  • User Story #3: I hear a sound that corresponds to each button both when the series of button presses plays, and when I personally press a button.
  • User Story #4: If I press the wrong button, I am notified that I have done so, and that series of button presses starts again to remind me of the pattern so I can try again.
  • User Story #5: I can see how many steps are in the current series of button presses.
  • User Story #6:If I want to restart, I can hit a button to do so, and the game will return to a single step.
  • User Story #7:I can play in strict mode where if I get a button press wrong, it notifies me that I have done so, and the game restarts at a new random series of button presses.
  • User Story #8:I can win the game by getting a series of 20 steps correct. I am notified of my victory, then the game starts over.
simon-mobile
Fig.2 - Tablet View of App