This site has been deployed using GitHub Pages and is available at
https://fion21.github.io/SimonSays_Javascript
This game is the coursework for the Interactive Frontend Development Project: Milestone Two. Its scope was to create a game with HTML, CSS and JavaScript, where the main feature is JavaScript funtionality and logic.
This app is my version of the classic simple memory game called Simon; ref: Wikipedia. My app is called Simon Says, which is the basis of the game before the game was invented for children to spot something begining with a letter. The aim of this game is to repeat a sequence of signals with cursor presses which are played out and displayed as sound and colour; randomly chosen by the computer with an increment of one for each synchronisation.
I was happy with the original Simon interface, but added a tomato colour and lighter hues in the Win phase. I designed the inner circle as a red and yellow colour scheme, and the background of the game is on a black background. There is also a brief intro pop-up for the instructions.
- Let there be a random series of pad(button) presses
- Let the correct repetition of pad presses, be reused in the next round, plus one more pad press
- Let there be a different sound for each pad: when a sequence is played, and also when a pad is depressed
- Indirect musical ear development, let there be musical significance for the sounds
- Let there be a 'strict mode' option, which takes me back to round one
- Let there be a refresh option
- Let the series of repetitions not be arduous and boring
To understand the game, I reviewed the Freecodeinstitute version of the Simon game, which gave me an idea of the layout and functionality. This was the starting point on which I could base the game.
Most of the versions used a circular user interface, which contained the game's controls. I have modified the colours and softened the look to be more welcoming with a red inner-circle.
I used powerpoint to render the basic game, but in a final screenshot the live graphics and dark background can be seen.
The original game had 20 rounds, in my write-up of the game rules, I shortened this down to 5 rounds as it was leading to frustration and boredom, with the 5 rounds even I could enjoy the game, and I added some fun sound files so there would be an entertainment factor.
- Adding an animation swoosh accross the screen for "No!" or "Win!". Creating an animal noise game for infants instead of the musical sounds, with animal pictures.
- HTML5
HTML
- used for html webpage elements and structure and loading components
- CSS3
CSS
- used for styles and layout enhancement
- Javascript
JavaScript
- main body of coding for this project to add funtionality and interactivity to the game
- Google Fonts
Google Fonts
- used Google Fonts to style the text with 'Stylish' font
- Favicon
Favicon
- used for the icon in the address bar
- Apache/Ubuntu/Github/Cloud9/AWS
GitHubCloud9AWS et al
- used for uploading to Github as a feature of Cloud9 IDE and/or AWS.
- Jasmine
Jasmine
- used Test Driven Development (TDD) with the Jasmine framework to automate the JavaScript file.
I have tested the Javascript page in Jasmine, no errors were reported, although it reported a script error while loading.
I have tested this website on various sized screens for responsiveness and this has primarily been designed for desktop use. I tested the site on the latest versions of Google Chrome and MS Edge.
As for the Iphone I have tested it live on the Iphone5 and it works although the user has to resize it for the whole circle to show up and the inner-circle graphics are displaced. Also there is a delay between the sounds and the lights on the Iphone5.
- Git
- I used Git as the version control system locally to add and commit changes made to the project in Cloud9. They were then pushed to GitHub.
- GitHub
- GitHub has been used as a remote repository to push and store the committed changes from Git to my project. I then deloyed it to Github and it runds on a live environment on Github Pages on the above link.
To deploy the site to GitHub pages, the following took place
-
Opened the
Toolstab, thenNew Terminalin theAWSworkspace. -
Made a
git statuscommand, then initialised with agit initcommand. -
Added all the files to the Staging area with
git add . -
Used
git commit -m "Initial commit"to commit the files -
Created a new repository in GitHub called 'new-game-2'.
-
Added from GitHub into the terminal window of C9:
git remote add originhttps://github.com/fion21/new-game-2.gitgit push -u origin master -
My GitHub username and password were enetered to push all files from Git to GitHub.
-
Opened
Settingson the GitHub repository page. -
Chose the
master branchoption underGitHub Pages. -
Further commits were added thereafter.
Inspiration for a working model of the Simon game, with use of the sounds from this resource. A YouTube video on the Simon Game by freecodecamp.org. https://www.youtube.com/watch?v=n_ec3eowFLQ.
This app is my version of the classic simple memory game called Simon; ref: Wikipedia.
The icon for the game of Simon was downloaded from https://www.favicon.cc/?action=icon&file_id=67599 and is displayed in the address bar when the webpage is open.
For the "No!" and "Win!" sounds, Cackle3, Tamba_112 and Cymbal. I sourced their namesakes' at https://www.freesoundeffects.com/free-sounds/.
Simon pad sounds Sounds 1-4 etc at: 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
I received direction and ideas for this project from my allocated mentor.
- This project is for educational purposes only.
If this project has helped you and you would like to support my work, here's a cool idea :
