This is a project I completed for Free Code Camp's Front End Development section. It's a Simon Game Application modeled after the Simon Electronic Game developed by Ralph Baer, known as the Father of the Video Game, in 1978. The Simon Electronic Game was named after the children's game Simon Says.

FCC objective: build an app that is functionally similar to:

  1. Don't look at the example project's code. Figure it out for yourself.

  2. Fulfill the below user stories. Use whichever libraries or APIs you need. Give it your own style.

  3. User Story: I am presented with a random series of button presses.

  4. User Story: Each time I input a series of button presses correctly, I see the same series of button presses, but with an additional step.

  5. User Story: I hear a sound that corresponds to each button both when the series of button presses plays, and when I personally press a button.

  6. User Story: 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.

  7. User Story: I can see how many steps are in the current series of button presses.

  8. User Story: If I want to restart, I can hit a button to do so, and the game will return to a single step.

  9. User Story: 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.

  10. I can win the game by getting a series of 20 steps correct. I am notified of my victory, then the game starts over.

I also added a workflow and some es6 features to the project. The workflow includes the use of the Gulp task runner, webpack, browser-sync, babel, postcss, modernizr, and autoprefixer. To view my complete list of dependencies and devDependencies for the project, please visit my package.json file. I also created local scripts to use in the command line (available for viewing in my package.json as well) so that I did not have to make or use any -g npm installs.

Recently I had been having problems with the gulp-gh-pages npm package, so instead of using it to build my gh-pages branch from this repo, I decided to go the docs route and changed my dist build to a docs build with the appropriate path adjustments to my usemin comments in my index.html. I also had to make similar adjustments to my build.js gulp task. Enjoy playing the game!

I learned some neat new design tricks in CSS that have spurred on my desire to get more into creating various shapes and animations. It also permitted me to dig deeper into the relationship between HTML/DOM and JS.

Built With

Share this project: