Simon is not only a fun and challenging game but also a tool to help improve memory. This particular iteration of the 1978 classic game has four game modes. Each mode brings on a new set of challenges that add a modern twist to the game. There is also a random inspirational quote shown at the beginning of each game to help mentally prepare you for the challenge. The use of themes also make for an interesting change of scenery. you can find the deployed game here: https://nicbritz.github.io/Milestone-2---Simon-Game/
The goal of this project was to recreate Simon, the classic 1978 electronic game in a more modern software form.
As a user ...
- I want a way to improve my memory and coordination in a fun but challenging way.
- I would like an application that I can use on my computer but also one that is available on my mobile devices.
- I would like the application to have both visual and auditory cues.
- I would like to be able to read the instructions for the game without leaving the game.
- I would like various game modes to challenge myself in fun and interesting ways.
- I would like the game to show me when I hit the wrong button.
- I would like an endless game experience that will increase in speed incrementally.
- I would like to see my score after each game as well as my best score.
- I would like the game to have different themes to make it more customizable to mey own linking.
The goal of this project was to recreate the classic 1978 electronic game called Simon. This is a more modern approach and is focused on delivering a clean and responsive user interface. Keeping any effects subtle but still notable, without overwhelming the user with too much information at once makes for a simple but fun endless game.
Audio plays a big part in the experience of the game and because of this, most of the audio assets used are original. All the audio files are both in mp3 and Ogg format to ensure compatibility on a wide range of devices.
I wanted the experience to feel like a modern game to achieve this I made use of some assets that I purchased. When it came time to create the main game buttons I used very saturated colours and added some visual effects to indicate that the button had been activated.
Before starting the project I used Balsamiq to create the following wireframes. The licence for the software was provided by Code Institute. Here You can find my Balsamiq project files as well as higher resolution wireframes.
At the start of the game, you will be presented with an inspirational quote. These quotes are fetched for this API found via this article. Once all the data from the API is retrieved a random quote is selected and displayed on the main game screen. After every round, a new random quote will be selected and displayed. There are some instances where quotes would not have an author, in these cases the author is displayed as 'unknown'.
This project has four unique game modes, each one brings new challenges, this helps to keep the game both fun and challenging for a variety of users. The game modes are as detailed as follows:
Classic:
- When playing the game in this mode you will be presented with a set of four coloured buttons.
- The buttons will highlight in a sequence as well as play an auditory cue.
- Each step in the sequence is randomly generated.
- The sequence in its entirety remains the same throughout the round but gets progressively longer.
- After every 5th step, the sequence gets faster.
- The player must repeat all the steps in the sequence in the original order.
- If the player hits the incorrect coloured button a cracking sound is triggered and a cracked image overlay is displayed on the button.
- The object to get as long a sequence as possible, you will be presented with your best score as well as the last rounds score once the game is over.
Random:
- When playing the game in this mode you will be presented with a set of four coloured buttons.
- The buttons will highlight in a sequence as well as play an auditory cue.
- Each step in the sequence is randomly generated.
- Each round sequence is then randomised before the player's turn.
- This random sequence gets progressively longer after each round.
- After every 5th step, the sequence gets faster.
- The player must repeat all the steps in the sequence in the original order.
- If the player hits the incorrect coloured button a cracking sound is triggered and a cracked image overlay is displayed on the button.
- The object to get as long a sequence as possible, you will be presented with your best score as well as the last rounds score once the game is over.
Single:
- When playing the game in this mode you will be presented with a set of four coloured buttons.
- Only the newest colour added to the sequence will highlight in a sequence as well as play an auditory cue.
- Each step in the sequence is randomly generated.
- The sequence in its entirety remains the same throughout the round but gets progressively longer.
- After every 5th step, the sequence gets faster.
- The player must repeat all the steps in the sequence in the original order.
- If the player hits the incorrect coloured button a cracking sound is triggered and a cracked image overlay is displayed on the button.
- The object to get as long a sequence as possible, you will be presented with your best score as well as the last rounds score once the game is over.
Reverse:
- When playing the game in this mode you will be presented with a set of four coloured buttons.
- The buttons will highlight in a sequence as well as play an auditory cue.
- Each step in the sequence is randomly generated.
- The sequence in its entirety remains the same throughout the round but gets progressively longer.
- After every 5th step, the sequence gets faster.
- The player must repeat the steps in the sequence in the reverse order.
- If the player hits the incorrect coloured button a cracking sound is triggered and a cracked image overlay is displayed on the button.
- The object to get as long a sequence as possible, you will be presented with your best score as well as the last rounds score once the game is over.
With the use of well designed GUI elements, that were either purchased, free or custom created for the Graphical User Interface the game looks neat and feels like a native application.
To add another interesting twist to the game I have included the options of themes, these themes help to add a fresh design to teh games interface.
Classic
This is the plain smooth buttons that the game was originally designed to have.
Brick
The Game buttons will have a Brick texture and look like four colored walls.
Lego
The Game buttons will have a Lego texture and look like four colored lego pieces.
Metal
The Game buttons will have a Lego texture and look like four colored lego pieces.
With the use of this article a favicon was added to the browser tab, this helped to make it feel like a more professional web game. The 
png file, is an original that was created using Adobe PhotoShop,
it was designed to look like a tiny version of the game screen.
All the game menu elements are contained in a modal. The window in the modal has a white border that is used to add to the overall look of the menu. The modal is made using and an external jQuery library called jQuery Modal, you can find the GitHub repository for the library here. There is also a slight fade animation on the modal to make it have a smooth transition between the modal and the game screen.
All the menu buttons and icons are from a mobile GUI pack that was sourced from Graphic Burger. In conjunction with Adobe PhotoShop I was able to extract the elements I wanted from the source file. All images are served by the content delivery system Cloudinary to maximize the performance of the application. When a user selects any of the buttons there will be an audio cue to indicate the button was pressed. Hovering over the button will change the cursor the grab symbol and the button will increase slightly in size.
The content pack for this is something io purchased some time back, created by Asa Faly Rayyan and provided in .ai format. With the aid of Adobe Illustrator I was able to create both the game title text and the game over text. As with the button images, these are also served by the content delivery system Cloudinary.
The help menu describes the overall object of the game, the instructions are arranged in such a way as to describe the overall game rules as well as the individual gameplay options. With the use or headings and red underlines, the content is organised in an easy to follow way.
In this menu, you can find the options available to the player. Each choice in the game mode section can be selected by using the left and right arrows. If you are at the end of the list the arrow will be greyed out indicating there are no further options in that direction. Underneath the selection, there is a brief description of what to expect from that option.
When the player loses the round they will be presented with the game over screen. On this screen, there is a summary of the results of the game.
- Score: This will be the score from the round just played, the score is the number of rounds the player has completed in the previous session.
- Best: This indicated the Top Score the player as achieved since the start of playing the game.
- Mode: This indicated the Game Mode the player had selected when playing the round.
At the bottom of the game over screen there social media links so that the player can share there experience with the game, these currently got to the homepage of the selected social link. The player can now either restart the game using the replay button or access the main menu using the menu button on the bottom left. The score will be persistent until the player either close the browser tab ore refreshes the page. If the player chooses to go back to the main menu they will be presented with a new random quote for inspiration.
The main game screen has the following elements:
Buttons
The four coloured game buttons will be the main game buttons when playing. Whenever the button is pressed by either the computer of the player, it will scale down and play a relative audio sound. It the player get the sequence correct the computer will start the next round if not then the button will display a cracked overlay and play a crack sound. This will then trigger the Game Over modal. The buttons have rounded edges and an inset shadow to make them look and feel smooth.
Circle
In the centre of the screen, there is a circle that is used to indicate the current round the player is on. The circle also has an inset colour ring that indicates the following:
- RED - Computers turn, player controls are disabled.
- GREEN - Players turn, player controls are enabled.
The page is responsive and with the use of media queries, it caters for a wide range of screen sizes.
- Permanent score storage
- Timer between rounds - it may make for some interesting game play.
- Strict mode and standard mode
I used the following technologies to create this website:
- HTML5
- Used as the basis of the website.
- CSS3
- Used for the overall look of the site and its elements.
- Javascript
- Used in various places to aid site functionality.
- Google fonts
- Used to get fonts for my site.
- JQuery
- Used to simplify DOM manipulation.
- Git
- Used for version control.
- Jasmine
- Used for automated testing.
- jQuery Modal
- Used to simplify the modal presentation.
- jasmine jQuery
- Used to extend the testing capabilities of the jasmine library.
-
- This is the main IDE I used to build the website.
-
- Used to manipulate and create content for the website.
-
- Used to create logos and titles for the website.
-
Balsamq - All my wireframes were created in the desktop version of Balsamiq.
- Used to create wireframes for the website.
-
VS Code - Used this editor for building parts of the website.
- Used for some coding due to its wide range of add-ins.
-
Git Hub - Used this site to manage my projects storage as well as host the website.
- Used to store my project files as well as host my site via GitHub pages.
-
- Used to double-check all my spelling and grammar.
-
- Used this to check my HTML for errors and typos.
-
- Used this to check the validity of my CSS.
-
- Used to validate JavaScript.
-
- I used this tool to make sure I did not miss any prefixing in my code.
-
- Used to create some of the game sounds.
-
- Used to create some of the game sounds.
Extensive testing and error checking was undertaken throughout the development process. With the aid of the following tools, I was able to catch and fix errors and bugs in my code.
Checking my index.html file with the validator helped me find some small errors in my code including forgetting a </div> and a > too many as well as missing out lang="en" in my HTML element.
After fixing these and some other minor errors in the HTML file I got the following message in the editor Document checking completed. No errors or warnings to show.
Using the style.css file in the CSS validator resulted in no errors, I was constantly checking these files and fixing any errors that occurred as they were spotted. The
results of this test were displayed as Congratulations! No Error Found.
After finishing up my CSS and before the validation of CSS I used this tool to make sure I had not left out any prefixing in my code.
After using this on game.js I picked up some lines of code where I had left out the ; as well as some unused variables. After fixing these errors and running again the following was found:
Metrics
There are 38 functions in this file.
Function with the largest signature takes 1 argument, while the median is 0.
The largest function has 9 statements in it, while the median is 4.
The most complex function has a cyclomatic complexity value of 6 while the median is 1.
Pycharm professional comes with a set of tools to check code quality as well as spelling errors. These were used regularly to keep the code syntactically correct and well as catch spelling errors. This is also what I used to format the code and help with refactoring when needed.
- Chrome:
- Version 80.0.3987.149 (Official Build) (64-bit)
- tested responsiveness using chrome development tools.
- tested lag on slower networks using the network tools in developer tools, this helped me fix an audio lag bug.
- Running an audit with the developer tools helped me solves a bug where I was triggering the audio before a player was interacting. Final results as follows:
-
Safari:
- Version 13.0
- Tested on an iMac and iPhone and iPad.
- Issues with audio lag and audio not playing were eventually resolved using this article
- Issues with touch not being sensitive enough fixed by using
touchstartinstead oftouchin my event listeners.
-
Other:
- Used various models of android phones and tablets to test and adjust for mobile devices.
- Tested with:
- FireFox - Version 74.0 (64-bit)
- Edge - Version 80.0.361.69 (Official build) (64-bit)
- Opera Version 7.0
- Samsung galaxy s9 and A10
- Samsung galaxy tablet
I had some friends and family test the site and the feedback was invaluable. This helped me pick up compatibility issues with different devices, I made some changes based on the feedback I received. There was feedback from multiple players that the game had a level-up text that was very distracting when it flashed on the screen so this was removed, they also picked up some small grammar issues I had missed. There was some feedback that the app was a bit unresponsive to touch sometimes, I changed the code slightly to accommodate for this.
Using Jasmine I was able to test if the code was working as expected. The test files can be found here. I have broken the spec's into three separate files to make it a bit easier to navigate the tests. I have used some ideas for testing from Tim Nelson. ani i made use of jasmine jQuery to help with unit testing. You can run the automated test simply by running the test.html.
This project is hosted on GitHub and used GitHub pages to serve the site to the world. If you would like to contribute to this project or run it locally you would need to first have some sort of code editor installed like VS Code and some version control software like Git, you will also need a GitHub account.
Once you have these tools installed and everything is working you can follow the steps below:
- You are now ready to clone a copy of this project to your local machine for editing.
- At the top of the repository click on the
Clone or download button - Copy the path to the repo
https://github.com/Frozenaught/Milestone-2---Simon-Game.git - In your command-line, navigate to the folder where you would like to make a copy of this repository -
c:\MyRepos>. - Type the following to clone the repo
c:\MyRepos> git clone https://github.com/Frozenaught/Milestone-2---Simon-Game.git - You should see a similar output to the following:
Cloning into 'Milestone-2---Simon-Game'...
remote: Enumerating objects: 252, done.
remote: Counting objects: 100% (252/252), done.
remote: Compressing objects: 100% (140/140), done.
Receiving objects: 100% (535/535), 1.37 MiB | 3.00 MiB/s, done.
Resolving deltas: 100% (162/162), done.
- now you can navigate to the newly created directory
c:\MyRepos\Milestone-2---Simon-Game> - To run the project locally, simple launch the index.html file from your Machine.
- You can now edit any of the code using your code editor of choice.
-
To deploy this to your Github account, navigate to Github and create a new repository.
-
Give the repository a name and click the
Create repositorybutton. -
push the cloned repository to your Github account with the following commands in the command-line
git remote add origin https://github.com/Frozenaught/<repo name>.git git push -u origin master -
Once you have uploaded your repo you can make use of Github pages to host the website.
-
Go to Settings using the settings button at the top of the repository page, navigate down to Github pages and choose the master branch.
-
This project will now be published and you will get a link like https://frozenaught.github.io/Milestone-2---Simon-Game/ to share.
- If you chose to make changes to the website I would recommend using separate branches so that you can go back to the original master branch if the changes don't work as expected.
- Use
git checkout -b <brancname>to create a new branch and edit the files accordingly. - If you are happy with the changes to use
git commit -m "my commit message of changes I have made"to commit the changes. - Use
git pushto push the changes to the repository. - As these changes are on a different branch they will not be available on the deployed site until you merge them to the master branch.
- To merge the new branch to the master branch switch to the new branch on Github using the branch selector dropdown menu.
- create a new pull request and state what changes were made in the comment section.
- submit the pull request and switch back to the master branch.
- now you will have the option to merge the pull request and you will be done.
- sometimes there is a slight delay in getting the update being live on the GitHub pages site.
- Rules
- used to help with understanding the rules of the game as well as some working for the instructions.
- Wiki page
- used to understand the object of the game and the rules of the game cna find it here https://en.wikipedia.org/wiki/Simon_(game).
- GUI buttons
- used this content for the graphical user interface buttons.
- Crack Image
- used to get the png image for the crack overlay.
- Brick Image
- used for a theme image, some editing was done th make it more transparent.
- Lego Image
- used for a theme image, some editing was done th make it more transparent.
- Metal Image
- used for a theme image, some editing was done th make it more transparent.
- Logo and Game Over text
- purchased as part of a game assets bundle and created by Asa Faly Rayyan
- Crack Sound
- the sound used to complement the crack image overlay.
- Quotes API
- API used for the inspirational messages with help from this Article
- Tim's project was used for inspiration as he is a mentor I figured his work would be a great help.
- I used his work to help me with my approach to jasmine testing.
- I also used his code to help understand different ways to approach a problem.
- I also drew some inspiration from his readme file as I think he did an excellent job.
- This game helped with inspiration for the overall design of the game as well as some of the different game modes.
- some wording was also used for inspiration.
I used these sites for reference along the development process.
- CSS Tricks
- For CSS documentation and help when needed.
- Can I Use
- For CSS decision making.
- Stack Overflow
- For those times when I could not figure out why I was not getting the result, I expected to like this article
- MDN
- For code referencing, while trying to get my code to do what I wanted it to do rather than what I told it to do.
- Timed array loops
- This was helpful in figuring a way to play back each element in an array with a delay between each step.
- setTimout test
- used for help with timeout tests.
- Stack Overflow Audio Problem
- used to help solve a bug on safari with audio not playing
- falsy truthy
- used as guide when figuing out how th check for undefined and empty variables
- fetch
- used for help with api handling.
- remove outline
- this helped me to remove the outline on my button elements