code-institute-submissions / milestone-project-two-1 Goto Github PK

Objective is to build a simple single-player memory game inspired by Simon.

Simon is an electronic game of memory skill, which creates a series of tones and lights that the user needs to remember when the game creates a sequence to repeat.

The aim of this inspired version of the game is to test how good your memory is by remembering the sequence of patterns "Simon" produces. The game has four colored buttons, each producing a particular tone when they're pressed or activated by the game. Each round in the game consists of "Simon" lighting up one or more buttons in a random order, after which the player must reproduce that order by pressing the buttons. As the game progresses, the number of buttons to be pressed increases, and gets more difficult to remember with each round.

This version I have created is a very simplistic version of the game, with easy functionality. The rules for this game are simple:

• Toggle on/off button to activate game.
• When you press the Start Button, it lights up to bright green, counter turns to 01, and first sequence of buttons lights up, along with a corresponding sound.
• This is automatically in normal mode. In this mode. you get unlimited amount of tries to remember correct sequence.
• If Strict Mode is selected, button will light up bright red. In this mode, if you fail to remember a sequence correctly, you will start again from round 01.
• If you select wrong button, a buzzer will sound, and counter will flash "??". If in normal mode, you may start again from the current round. If in strict mode, you will start back at 01.
• You win the game once you reach round 20, and counter flashes with YAY!

The reason I chose this for my project was to challenge my skills in JavaScript & jQuery, as well as practice my ability to use logic in the form of an interactive game.

The user interface is clean and minimalistic, to make the user feel less overwhelmed with the aesthetic. The functionality is simple, with minimal rules, so the user stays engaged and can concentrate on remembering the sequence of patterns.

To map out of the construct of the game, I needed to establish a series of user stories so that when we imagine an action being performed, a goal is achieved by that action from the user.

Here are a series of User Stories that formed the basis of the rules:

• I am presented with a series of buttons that are played in a random sequence.
• I am then prompted to press the button correctly, in which I then see the game play a series of button presses, but with an extra step.
• I hear a sound that corresponds to each button - both when the series of button presses plays, and when I as the player, presses a button.
• If I press the wrong button, I am prompted so by the game, and that series of button presses starts again to remind me of the pattern so I can try again.
• I can see how many rounds I have completed in the current series of button presses.
• If I want to restart, I can hit a button to do so, and the game will return to a single round.
• I can play in strict mode where if I get a button press wrong, it prompts me that I have done so, and the game restarts at a new random series of button presses.
• I can win the game by correctly reaching round 20. I am prompted of my win, then the game turns off, indicating I can start again by turning the game back on.

After mapping out the user stories, I then started to ponder on the design aspect of the game. Did I want it to look like the Original Simon Game as possible, or did I want to put my own spin on it... I played around with possibilities, and settled on a simple design that was inspired by the original game. I looked at different images online, and took inspiration from other web based games available as well. Here are some of the rough designs I started with, before settling on this one.

• Bootstrap 4.3.1 - used for grid system.
• JQuery 3.4.0 - used for DOM Traversal and Manipulation.
• Google Fonts - used for the fonts across the game application.
• SASS - used for the stylesheet.

• During and throughout the build, the overall website was tested on google chrome using devTools, and testing responsiveness using the device toolbar.
• Tested responsiveness by resizing the window everytime I implemented a new piece of code. AND also tested it physically viewing it on mobile, tablet, mac and windows laptop, windows desktop, and different browsers (firefox, safari, google chrome, opera)
• The jQuery code was tested in the early stages of the build using Jasmine. Throughout the build, tested the code using console of devTools to ensure no errors or high logs were present.
• When adding the javascript code, there was continuous testing of the button elements. CSS & HTML was also tested alongside the JS code, due to it referencing elements of CSS & HTML.
• Added media queries to try resolve mobile and tablet views as it wasn't being responsive when scaled down to smaller screens. Added CSS code to center console as much as possible on smaller screens.
• Checked button sizes so they were responsive and large enough to be clicked in mobile view.
• Ensuring header was resized when viewing on smaller screens and amending margin-bottom for console as there was a huge gap between the text for the rules and the game console.
• Validated HTML code via Validator.org, CSS via Jigsaw.org and jQuery via JSLint.com
• When testing the code to make sure there were no errors via jquery, JSLint showed 8 warnings which all refered to lines of code that had more than 80 characters in length. When cross checking with JSHint, it showed no errors or warnings.

• Toggle Switch - Checked this switch first to ensure that the Start & Counter buttons would activated, and the game would light up button.
• Start Button - Tested Start Button to ensure this switched to a bright green to indicate the game is on.
• Counter - Made sure the counter displayed "--". Then the number of rounds when switch toggled to the on position.
• Strict Button - Made sure to click to light up bright red, and ensure that if player fails, need to restart from round 1 in strict mode.

Browser Testing - Based on the above, everything appears as it should. Everything works as it should. Mobile/Tablet Testing - via Chrome devTools - tested screen sizes via responsive mode, including the following viewport sizes:

• Samsung Galaxy s9+ (380 x 740)
• iPad Mini (768 x 1024)
• iPad (768 x 1024)
• iPad Pro (1024 x 1366)
• iPhone X (375 x 812)
• iPhone 6/7/8/Plus (414 x 736)
• Pixel 2 (411 x 823)
• Pixel 2 XL (411 x 731)

Based on the the screen sizes above, I had to add media queries (as previously mentioned) to try and center the console as much as possible. It wasnt' absolutely perfect, but worked as it should.

• Opened new terminal
• Added any files to be commited with command line 'git add .'.
• Then commited any final changes made with command line 'git commit -m "content here"'.
• Checked status to ensure file tree was clean with command line 'git status'.
• Pushed files with command line 'git push 'https://github.com/aleesang/milestone-project-two'.
• Entered username & password.
• Changes successfully pushed to remote repository, created in the beginning of the project.

Then on the page where I view my code, and insights, there is a settings tab. I clicked into that link, an scrolled down to the section titled GitHub Pages, in which I then published my page.

Deployment was successful via GitHub Pages. View here for demo.

References for the different parts of the game are listed as follows:

• Inspiration for the buttons and layout of console -- https://codepen.io/freeCodeCamp/pen/obYBjE & https://arecvlohe.github.io/purescript-simon-game/

• Inspiration for how HTML code was structured -- https://codepen.io/BenLBlood/pen/LGLEoJ?editors=1000

• Scaling for mobile -- https://codepen.io/Em-Ant/pen/QbRyqqv (line 249 CSS code)
• Centering on smaller screens -- https://www.lyonscg.com/2016/07/14/centering-elements-scss

• Audio Files -- https://learn.freecodecamp.org/coding-interview-prep/take-home-projects/build-a-simon-game & https://freesound.org
• Animation for game flashing after winning 20 rounds -- https://www.w3schools.com/jquery/eff_fadeout.asp
• Inspiration for overall code structure (not all, but pieces of how to structure the code) -- https://github.com/imtoobose/Simon-Game/blob/master/SimonScript.js