Milestone Project 2 - Interactive Frontend Development - Code Institute
Blockworm Adventure is a game designed to provide an updated version of the old but loved snake game, with better graphics and some new unexpected twists to experience the game again with improved controls for desktop/laptop tablets and phones.
This website/game have been designed to easily pull in the visitor to kill some time by trying out a brand new snake game.
- Playing is the number one emphasis on the website, drawing in the user, and let them try out a traditional snake game.
- Open Source is the backbone of developing BlockWorm Adventures, I have provided the means to let the visitor see the code that runs the game so they can assist with further development through the feedback section.
- Cross Compatibility Enjoy the game? why only play it on your desktop, also take it with you on the bus, in the car, everywhere with cross compatibility built right into the game.
Browsing different browser games to kill some time.
Looking for a snake game that recently got developed to have fun.
Sitting on the bus, looking for a game to kill some time.
As a developer I want to find an open source game to help with.
As a user I want to visit different browser games and happen to come upon this.
Desktop Wireframes
Tablet Wireframes
Smartphone Wireframes
Game Over overlay Wireframe
Tutorial all sizes Wireframe
These were the main colours due to the simplicity of the website,
making them go well together, as well making the green stand out in the light blue.
as well working excellent with the navigation bar hoover colour.
Following less is more, making all the right elements stand out, so the visitor knows exactly what they see and where to go the moment they open the website.
- Feature 1: Allow the user to try a more up to date cross platform snake game.
- Feature 2: Multiple food types for different points and growth to the snake.
- Feature 3: Open source development, allowing players to contribute in a more meaningful way.
- Feature 4: Fully working feedback form to pass on suggestions directly to my email.
- Random events, to offer a more unexpected gameplay.
- More maps.
- Better handling of score.
- Option to play at different speeds for the snake to provide different difficulty.
- Updating the method for handling user points.
- Link the game up to an online database so players can fight against each other to get the best score.
Try the game here: https://pyleks.github.io/milestone-project-two/
Languages | Usage |
---|---|
HTML | Create the foundation of the website. |
CSS | Applying styling and mobile size format. |
JavaScript | Add logic to the website and the game. |
Libraries | Usage |
---|---|
Bootstrap | Add styling and grid. |
Font Awesome | Importing website icons. |
jQuery | Apply interactivity and data storage. |
Google Fonts | For all fonts on website. |
Tools | Usage |
---|---|
Krita | For designing all graphic content. |
Paint 3D | Pre-work on graphic content. |
Microsoft Paint | Rough graphic content. |
For feedback I am using mailJS.
Wireframe tool is Balsamiq.
- Responsiveness
- Interactivity
- Logic
- JSHint
- HTML Validator
- CSS Validator
1: Landing Page, Feedback Page, Snake Game Page, Tutorial Page: These tests were identical on all pages to ensure they are responsive to all device types.
-
Open all pages in full screen within Chrome, Firefox and Edge, identify that they all look the same.
-
Used responsive slider to ensure that the content is shown correctly, especially the media content that is designed to only work on desktop.
-
Tested to open the pages on all sizes available in Chrome, Firefox, but not Edge, as it only had Slider available.
- 360 x 640 Galaxy S5
- 375 x 667 iPhone 6/7/8
- 375 x 812 iPhone X
- 411 x 731 Pixel 2
- 411 x 823 Pixel 2 XL
- 414 x 736 iPhone 6/7/8 Plus
- 768 x 1024 iPad
- 1024 x 1366 iPad Pro
2: In this section we are testing if all the buttons and links are working correctly and guide the user to the correct landing page, or displaying the right menus.
- Clicking on tutorial from landing page, expecting it to show the rules correctly.
- Clicking on feedback, from landing page expecting it to redirect us to Feedback correctly.
- Clicking on the close button in tutorial and have it close the modal window.
- Clicking on code, from landing page expecting it to redirect us to GitHub project location correctly.
- Hoovering over all the links to correctly display the styling used on hoovering.
- Clicking on tutorial from feedback, displaying the rules correct.
- Clicking on the close button to close tutorial.
- Clicking home link to redirect to home page correct.
- Clicking code link to have it direct us to the GitHub project source.
- Hoovering over all the links to correctly display the styling used on hoovering.
- Clicking on tutorial from the game, displaying the rules correct.
- Clicking on the close button to close tutorial.
- Clicking home link to redirect to home page correct.
- Clicking code link to have it direct us to the GitHub project source.
- Hoovering over all the links to correctly display the styling used on hoovering.
3: The importance of testing the logic of the website and the game across the browsers and devices is to make sure that JavaScript runs correct on all popular browsers.
This page is not allowing the player to start the game, unless a username within 8 characters have been provided.
- Clicked Play with no nickname added, making it display "Type in a Nickname".
- Typing in a nickname above 8 characters long (past the max length), "making it display "Maximum 8 Characters".
- Typing in 6 Characters, allowing player to enter game.
To provide feedback, the user must fill inn all the fields to be able to submit the form.
- Added only first name and attempted to submit.
- Added only last name and attempted to submit.
- Added only email and attempted to submit.
- Added only feedback and attempted to submit.
- Added first name, last name and feedback and attempted to submit.
- Did not add anything and attempted to submit.
- Added everything and attempted to submit.
- Added first name, last name and email and attempted to submit.
For the game to run successful the score must accumulate correct, the controls for desktop/laptop and devices must work correct as well scoring bord must collect the scores.
- Attempted to eat all 3 different apples, expecting the score to go up by 3.
- Tried UP, DOWN, LEFT and RIGHT on keyboard.
- Tried UP, DOWN, LEFT and RIGHT on mobile controls for both tablet and mobile device and table.
- Tried UP, then DOWN to see if the snake would collide with itself on desktop.
- Tried UP, then DOWN to see if the snake would collide with itself on and mobile device and table.
- Killed the snake to display scoreboard.
- Killed the snake 10 times to see if the scoreboard would outgrow the allocated score board size.
- Tried clicking new game.
- Tried to move the snake outside of the border on each side, and top/down.
This was tested to make sure the JavaScript code did not have any major unnoticed flaws.
- Copy/Pasted email.js
- Copy/Pasted global_JS.js
- Copy/Pasted script.js
- Copy/Pasted snake2.0.js
Page | Bugs | Status |
---|---|---|
Landing Page | One issue with scaling was found, where it did not remove desktop icons in time. | Fixed |
Feedback Page | The form did not scale correct from 577px width. | Not Fixed |
Feedback Page | Footer causing issues in mobile view when typing feedback, due to it appearing mid screen when using keyboard. | Not Fixed |
Game Page | Above 1025px width the game scaled incorrectly and removing the controls too early. | Not Fixed |
Game Page | On some smaller desktop screens the canvas becomes too big. | Not Fixed |
Page | Bugs | Status |
---|---|---|
Landing Page | No bugs. | Good |
Feedback Page | No bugs. | Good |
Game Page | No bugs. | Good |
Page | Bugs | Status |
---|---|---|
Landing Page | No bugs. | Good |
Feedback Page | No bugs. | Good |
Game Page | If the player continue playing, the nickname and score outgrow the scoreboard. | Not Fixed |
Game Page | The scores are not sorted correctly from highest to lowest score. | Not Fixed |
Game Page | Bug with snake moving into it's own body when moving from right to left, left to right, up to down or down to up. | Fixed |
Page | Bugs | Status |
---|---|---|
email.js | No bugs. | Good |
global_JS.js | Missing semicolon. | Fixed |
script.js | No bugs. | Good |
snake2.0.js | Missing semicolon. | Fixed |
Page | Bugs | Status |
---|---|---|
All Pages | Reoccurring image tag missing on all pages. | Fixed |
All Pages | Wrong type on (a) tag. | Fixed |
All pages | Stray a tag that did not close anything. | Fixed |
Page | Bugs | Status |
---|---|---|
style.css | No bugs. | Good |
All remaining issues that have not been fixed, was due to lack of time to fix them, or lack of knowledge on how to fix them in time.
Steps to deploy the website from GitHub.
- Go to GitHub.
- Click Repositories.
- Locate milestone-project-two.
- Open the repository milestone-project-two
- Click Settings.
- Scroll down to GitHub Pages.
- Select Master branch under Source.
- Site Deployed under URL: https://pyleks.github.io/milestone-project-two/.
- Go to GitHub.
- Click Repositories.
- Locate milestone-project-two.
- Open the repository milestone-project-two.
- Click the green button clone or download.
- Clone from displayed URL: https://github.com/Pyleks/milestone-project-two.git.
- Clone with following command in terminal
git clone https://github.com/Pyleks/milestone-project-two.git
. - Remove connection from repository with the following command in the terminal
git remote rm origin
.
This game was only possible thanks to GitHub user Straker
The code have been marked with A.A for all code done by me.
Snake game made by YouTuber Code Explained provided some crucial mathematical randomize in the snake code.
This was improved upon immensely by Aaron Sinnott (Mentor).
Was only possible thanks to am.i.responsive.
Was acquired from github account from DavidWells which was modified version from the original meyerweb.
This code was acquired from stackoverflow
and modified for my project.
The 3 icons is from Font Awesome.
The font used on this website is from Google Fonts from font family Acme.
This is based heavily on the mailJS that we learned from code institute lecture, but is customized and slightly different then the one in the course.
These 2 images are used for logos and game background.