Sonic Stack is a Tetris-style game with a Sonic theme. This is to draw all those Sonic and Tetris lovers in to one awesome box.
When users visit the website they will be able to easily navigate to the difficulty mode they would like to start their gaming session on so that the user can quickly start Tetrissing away. The demographic for the website is anyone that loves old school retro gaming, anyone that loves Sonic and anyone that enjoys playing games. It is perfect for all ages and can be played alone or with others which can make it fun for everyone.
source: amiresponsive
Sonic Stack's purpose is to help resolve people's boredom and lack of enthusiasm by giving them a fun challenge to solve.
The site will have 1 main page with 3 different levels/sections which makes it feel like 3 separate pages, alongside a 404 error page. The first main section will contain the easy level game area with a background image, a rules and score area, a button area containing movement buttons, a start/pause button and a reset button. The next segment is the medium section, which will have a different background image and title, and the final part will contain the hard section, which will also have a different background image and title. Each section will consist with the same header and footer elements and follow the same layout design so the user can easily navigate through the site. The 404 will follow the same layout but with just an error message and image in the main section and have no content in the footer.
- The design of the Tetris-style game will incorporate both the slick colours from Sonic and old school styles from Tetris.
#FFFFFFused for primary text.#000000used for main background.#3061E3used for blocks.#1F51FFused for shadows.#FF3131used for blocks.#FF0000used for shadows.#FFBF00used for blocks.#F9D71Cused for shadows.
I used coolors.co to generate my colour palette.
I've used CSS :root variables to easily update the global colour scheme by changing only one value, instead of everywhere in the CSS file.
:root {
/* P = Primary | S = Shadow */
--p-text: #FFFFFF;
--p-highlight: #000000;
--p-block1: #3061E3;
--p-block2: #FF3131;
--p-block3: #FFBF00;
--s-block1: #1F51FF;
--s-block2: #FF0000;
--s-block3: #F9D71C;
}-
Square Mile was used for all the text.
-
Font Awesome icons were used throughout the site, such as the icons in the button movement section.
- As a new site user, I would like to easily understand the instructions so that I can play the game as soon as possible.
- As a new site user, I would like to be able to choose different difficulties so that I can have fun and challenge myself.
- As a new site user, I would like to be able to see my score so that I know what I need to do better.
- As a new site user, I would like to see what the high score is so that I can try and beat it.
- As a new site user, I would like to be able to watch others play so that I can try improve how I play.
- As a returning site user, I would like to pause the game so that I can come back to where I left off.
- As a returning site user, I would like to play multiplayer so that I can play with my friends.
- As a returning site user, I would like to have different levels so that it feels like I'm accomplishing something.
- As a returning site user, I would like to hear old school Sonic music so that it feels like the old games when I'm playing.
- As a returning site user, I would like to see a scoreboard so that I can see other people's score and try and beat them.
To follow best practice, wireframes were developed for mobile, tablet and desktop sizes. I've used Moqups to design my site wireframes.
Click here to see the Mobile Wireframes
Main
404
Click here to see the Tablet Wireframes
Main
404
Click here to see the Desktop Wireframes
Main
404
The header will contain the title, the navigation dropdown button and a mute/un-mute sound button. It will be the same on each section to make the site feel more professional. It will also have a background colour that follows the colour scheme of the full site.
Click here to see the header for different screen sizes
Large header
Small header
The navigation will be situated at the top of the screen. There will be a tab button within the header section that when pressed will show 3 buttons for the level selectors so that the user can change the difficulty which will also be highlighted with the current page they are on. On the 404 page there will only be the one button that will help the user return to the main page.
click here to see the navigation of each page/section
Easy
Medium
Hard
404
This will be situated at the top of the screen on mobile and small tablets and then down the right-hand side on larger screens. It will contain 1 dropdown button that when clicked by the user will show how to play the game and another block will contain the current score and the high score of the user.
click here to see the aside on different screen sizes
Small screens
Large screens
The main section for the 3 main segments will contain a title, the game area itself, an aside section and a button area below containing 4 control buttons and 2 other buttons situated below the control ones. The first button will be the start/pause button so the user can actually start playing the game and can pause if they want, and below that a reset button if the user wants to start the game again. There will be a different background image for each main segment and a different title. For the 404 page the main section will contain an image and a 404 message telling the user that an error has occurred and they need to navigate to the previous page, it will also contain a button that will play audio when clicked.
click here to see the main section of each page/segment
Easy
Medium
Hard
404
The footer will be located at the bottom of the page containing 4 different links on the main pages and just an empty footer on the 404 page, but still having the same layout as the main page.
click here to see the footer section of each page/section
Main mobile/tablet
Main desktop
404
- Add a backend database to keep high scores of each game mode and other players(online leaderboard).
- Add another page to add different levels when a user gets so many points and when they do automatically change speed of block drop and background music/image.
- Add a multiplayer/split-screen mode so people can play together online.
- Add a mini image area to show what blocks are coming up next.
- Add an area where you can store one block at a time until you need it.
used to generate README and TESTING templates.
used for version control. (
git add,git commit,git push)used for secure online code storage.
used as a cloud-based IDE for development.
used for the main site content.
used for the main site design and layout.
used for user interaction on the site.
used for hosting the deployed front-end site.
used for the icons.
used for creating Wireframes.
used for the text font.
used to create favicon.
used to make background of image transparent.
used to generate 404 message.
used to compress the audio files.
Note
For all testing, please refer to the TESTING.md file.
The site was deployed to GitHub Pages. The steps to deploy are as follows:
- In the GitHub repository, navigate to the Settings tab
- From the source section drop-down menu, select the Main Branch, then click "Save".
- The page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.
The live link can be found here
This project can be cloned or forked in order to make a local copy on your own system.
You can clone the repository by following these steps:
- Go to the GitHub repository
- Locate the Code button above the list of files and click it
- Select if you prefer to clone using HTTPS, SSH, or GitHub CLI and click the copy button to copy the URL to your clipboard
- Open Git Bash or Terminal
- Change the current working directory to the one where you want the cloned directory
- In your IDE Terminal, type the following command to clone my repository:
git clone https://github.com/AshLaw96/Sonic-Stack.git
- Press Enter to create your local clone.
Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.
Please note that in order to directly open the project in Gitpod, you need to have the browser extension installed. A tutorial on how to do that can be found here.
By forking the GitHub Repository, we make a copy of the original repository on our GitHub account to view and/or make changes without affecting the original owner's repository. You can fork this repository by using the following steps:
- Log in to GitHub and locate the GitHub Repository
- At the top of the Repository (not top of page) just above the "Settings" Button on the menu, locate the "Fork" Button.
- Once clicked, you should now have a copy of the original repository in your own GitHub account!
No differences were found between the local version and the live deployed version.
| Source | Location | Notes |
|---|---|---|
| Markdown Builder | README and TESTING | tool to help generate the Markdown files |
| YouTube | leaderboard | using localStorage() in JS for high scores |
| GitHub Repo | entire site | helped with layout of the site |
| W3schools | JS file | helped with adding and removing styles of divs using .classList methods |
| YouTube | entire site | helped with basics for creating Tetris game |
| W3Schools | JS file | .volume method to have a mute and un-mute button |
| Web Dev | entire site | how to use <dialog></dialog> element |
| Medium | JS file | helped using some() and find() to check arrays |
| W3Schools | JS file | how to use the play() and pause() methods |
| W3Schools | JS file | how to use the every() method |
| W3Schools | JS file | how to use preventDefault() method |
| Stack Overflow | JS file | how to stop keys from moving screen |
| Source | Location | Type | Notes |
|---|---|---|---|
| website tab bar | image | favicon on the tab bar | |
| TinyPNG | entire site | image | tool for image compression |
| index.html | image | background image for main easy section | |
| Khinsider | index.html | audio | background music for easy section and medium section |
| 101SoundBoards | index.html | audio | sound when points gained, losing sound and turn sound |
| TheGamer | index.html | image | background image main medium section |
| TheGamer | index.html | image | background image main hard section |
| Khinsider | index.html | audio | main background theme song for hard section |
| 101SoundBoards | 404 HTML | audio | button sound on 404 main section |
| XConvert | index.html | audio | tool for audio compression |
| 404.html | image | main image on 404 page | |
| DevianArt | 404.html | image | button image on 404 page |
- I would like to thank my Code Institute mentor, Tim Nelson for his support throughout the development of this project.
- I would like to thank the Code Institute tutor team for their assistance with the lessons provided to give me the knowledge I needed to make this game.
- I would like to thank the Code Institute Slack community for the moral support; it kept me going during periods of self-doubt and imposter syndrome.
- I would like to thank my wife (Megan), for believing in me, and allowing me to make this transition into software development.