This site has been created to give users a simple, easy to navigate interpretation of the world famous memory game, Simon, for 1978.
The site is designed with the best user experience in mind, with the most minimalistic style.
The main objective in creating Simon Game! is to provide the user with a minimalistic, easy to use interface, while providing different levels of difficulty for the more advanced players.
This game is design with all users in mind, from children to adults, and tries to account for the train of thought from all age groups.
- A project I'd be excited to show off to people as a testament to my abilities.
- Well thought out programming to account for the unpredictability of users both young and old.
- Something that looked professional even for a novice programmer on their first venture in JavaScript and jQuery.
As a user I want the game to have:
- An easy to follow system of lights.
- And easy to follow system of tones to follow if I can't see well.
- Some way of knowing when it is and isn't my turn.
- A way to reset my game if I decided I can't go any further.
- A level counter so I can say I achieved a certain level.
- An easy to look at colour scheme and webpage in general with as little clutter as possible.
The below wireframes are bundled together into one file, but were created both by hand to show some of the thought process, then upscaled by hand into Visio.
The main approach to this game is made to entertain all age groups with healthy mental stimulation. The following design choices were made to reflect this:
Fonts
-
The main body font Rubik Mono One was chosen due to it's clean cut design and rounded character, making the page design rounded and smooth.
-
The fallback font of Squada One was chosen due to it's similarity to Rubik Mono One. This was added in the event the font CDN wasn't available, and could be retrieved from the asset library.
Colours
- The colour choices are made to reflect the original Simon Says game from 1978.
- Button colours of green were chosen to better stand out, and be easier seen against the black background, with an active red colour to easier distinguish level difficulty.
Styling
- The light button minimalistic design was chosed the keep the page as simple as possible, and make the buttons easier to see when lit.
Background
- Background colour of a slightly off black was selected to better stand out on screen opposed to the classic black. This also helps accentuate the colours on screen, and give more depth to the overall page.
Audio files
- Different toned beeps were chosen to make retention of the pattern easier to the user. Enabling both memory of sight, and sound.
- Gradual Fades -The player is first greeted with a blank page, with slow fades of each element into the page. Starting with the "Simon Game" title, followed by the logo. -Finally the fades result in the game start, and options menu to be displayed. -This gives the feel of easing the player into the game, and not bombarding them with elements on the page that snap into view, then out again.
- Logo Loader -This is only a page load image, so will not reappear during game resets. It's to give the game a feel of branding, and professionalism. -This logo was made by myself, with inspiration from google images when searching "Simon Game Logo".
- Speed Selection -Originally not in the design. Without this made the game feel stale, and became boring very quickly, without any degree of challenge. -Chosen to give the player the option to change the speed/difficulty of the current game going forward.
-
Interactive Buttons -Lightable buttons were chosen as a minimalistic approach to game, to better accentuate the black background. So once lit, would create a greater sense of light. -Buttons were also given a central void to make it easier to differentiate that a button has been pushed, or selected. Opposed to other games which colour the background the same colour.
-
Reset Button -The reset button was implimented to give the player the option to give up, and return to the start. -The reset button was also designed with a leaderboard in mind, and will retain the click counter after selection, after the initial design that wiped the click counter immediately.
-
Player Info Modal -A modal is implimented to inform the player of the final count of clicks they achieved before failure.
-
Disable Input -After multiple testers, it was decided to research and impliment a disable input class to prevent users from clicking buttons outside of their turn.
- Leaderboard
In the near future, I hopefully will get a chance to impliment a dynamic leaderboard, linked to an array of user details stored elsewhere.
- Interactive Volume Slider
Upon closer inspection, for desktop users, a slider which can control the volume of the beeps would be invaluable. With a design of an upwards facing cone to control the volume, and would hopefully fill some of the void on the left hand side of the screen.
- Rules
During testing, it was realised that not everyone is familiar with this game. Therefore I hope to impliment a rules section, but currently am unsure in how to integrate it into the site without impacting the minimalistic design.
As I had trouble deciphering JavaScript initially, I unfortunately did not have enough time to fully get to grips with Jasmine testing framework. As a temporary substitute, I used multiple user based testing instead to define the bugs in the game. I plan to return to the Jasmine testing as I now have a better knowledge of JavaScript, and will have a better chance at understanding Jasmine.
-
Tester 1
- "I wasn't sure when my turn to go actually was as I've never seen this game before." Tester tried to click each light as the computer turn was in the process of the sequence. Implimented a Waiting and Playing prompt to define when the player could go.
- "The playing and waiting prompts are too distracting. I was watching them instead of the sequence." Tester focused more on the animated prompts. The tester eventually overcame this focus after a couple of turns. As a fallback, a disable input class was added to prevent any input at all during the computer turn.
-
Tester 2
- "The sounds don't play when I click, but do when the computer takes a turn." Tester was unable to hear sounds. Found to be an issue with the function for sounds. Rewrote the sounds to be in a more compressed, and more readable standalone function. User was then able to hear sound as expected.
-
Tester 3
- "I like the layout. Simple but works well. Send it to my husband. He'd like this kind of thing." Tester had no issues with the game, and enjoyed the simple layout and idea.
-
Tester 4
- "I like it. But it feels like it just ends a bit abruptly." Tester did not feel a smooth transition after failure or reset. This inspired the implimentation of a modal to help ease the transition. User was pleased with the new transition, and especially like the altered wording on a 0 click failure.
-
Tester 5
- "When I reset the game, one of the buttons sticks behind." Tester found that on certain tries, some of the buttons remained behind for a longer period than the others, resulting in a broken looking animation. The was corrected by adding in a stop function to the current animations on reset or failure.
-
Graphical Glitches There is a known issue with the start button, once clicked and the fade transition begins, the buttons stretch down the screen until the animation is completed. I have yet to find the solution to this. The same issue was seen with the reset function, but was rectified by adding in a stop to all animations.
-
Sound Issues During testing, it was noted that sound has an issue on mobile only. I experienced this during testing of the desktop side version, but managed to overcome by increasing the delay between sounds as they overlapped. There seems to be a similar issue, but the sound is delayed on actual mobile, causing the sounds to overlap again, creating a static crack at the end of each sound. I have yet to find a solution to this issue. (Note: This is on a physical mobile, not on mobile size via Chrome desktop.)
-
Persistent Lights An issue that I'm unable to correct currently, despite testing multiple option, is currently only on desktop on the hover of the main game buttons. When a user leaves the mouse to hover over a button that is currently in the array to be lit by the computer, the button retains it's light class into the next round. This disappears once the user leaves the button, but only once input is re-enabled by the disableInput class. I have yet find a solution, but a work around is moving the mouse over, then out of the button during the player turn. As I have no hover psuedo elements currently, I am unable to find the cause of this error.
-
HTML Validation There is a known issue with a DIV block located inside a UL. Currently the layout works well, and responsiveness works best with the DIV inside the UL. But HTML validator throws an error with this. Currently I am exploring options that react responsively like it currently is, but will have to rewrite the CSS to accomodate this change which I am trying to avoid.
- This project uses HTML, CSS and JavaScript programming languages.
- JQuery
- The project uses JQuery to simplify DOM manipulation.
- Visual Studio Code
- The project uses Visual Studio Code to create all files contained in the site, and push to GitHub.
- Git
- This project uses Git to commit and push all files to the GitHub Repository.
- Bootstrap
- The project uses Bootstrap to simplify the structure of the website and make the website responsive easily.
- Google Fonts
- The project uses Google fonts to style the website fonts.
- GIMP
- This project used tools in GIMP to create and edit images such as the logo and favicon.
- Visio
- This project used tools in Visio to create, edit, and present wireframes in a more professional manner.
- HTML Validator
- This project utilised the HTML validator provided by W3C to check and correct any issues in my current HTML code.
This project was developed using the AWS C9 initially before moving locally to Visual Studio Code and Git, committed to a local Git repository, and pushed to GitHub using a locally installed version of Git via command prompt.
The main method of deployment, GitHub Pages, was chosen after a discussions with my mentor, and I was notified of GitHub pages, meaning I didn't need to boot up AWS C9 everytime I wished to showcase my site.
To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:
- Log into GitHub.
- From the list of repositories on the screen, select USERNAME/REPOSITORY.
- From the menu items near the top of the page, select Settings.
- Scroll down to the GitHub Pages section.
- Under Source click the drop-down menu labelled None and select Master Branch
- On selecting Master Branch the page is automatically refreshed, the website is now deployed.
- Scroll back down to the GitHub Pages section to retrieve the link to the deployed website.
To clone this project from GitHub:
- Follow this link to the GitHub repository.
- Under the repository name, click the green "Clone or download" button.
- In the Clone with HTTPs section, copy the clone URL for the repository.
- In your local editor program, open a terminal.
- Change the current working directory to the location where you want the cloned directory to be made.
- Type
git clone, and then paste the URL you copied in Step 3.
git clone https://github.com/Legaeldan/milestone-2
- Press Enter. Your local clone will be created.
For more help on cloning a repository on Github, please click here.
Inspiration for this project was found at Medium.com. Wojciech Kałużny's game provided a lot of groundwork for the wireframes, and gave initial direction to the project.
A special thank you to Simen, Trudy, Liz, Pascal, Hugh, Brid, and Brian for testing my site, and giving genuine feedback which helped develop the site into what it is now. Due to my limited knowledge of testing in Jasmine, they were heavily relied upon for their feedback and support, and every bit helped shape this game.
I received inspiration and assistance on this project from Simen Daehlin (Eventyret), who assisted above and beyond to help improve the site. I initially felt it would be an impossibility to comprehend JavaScript, but he pointed me in the right direction with each hurdle.
Please note that all code and images in this site are for educational purposes only. The simon game concept is in no way owned by me, and this site uses the games concept only to show the developers ability in the language of Javascript.