Skip to content

Latest commit

 

History

History
408 lines (235 loc) · 16.7 KB

README.md

File metadata and controls

408 lines (235 loc) · 16.7 KB
Raw

The Snake & the Wizard

1. Overview

This is a web based game inspired by the Nokia 3310 version of Snake. The aim of the game is to grow the snake by eating the fruit that randomly spawn onto the board without hitting the boarder or without hitting your own tail. The website uses basic HTML and CCS to create the static components of the game. All the interactive features, including movement are made using JavaScript. The game will be responsive for all devices.

Live Website

GitHub Repository

Table Of Contents

2. UX

2.1. User Stories

  • As a user who wants to play a quick game on my commute

  1. I want to have access to the game on the go

  2. I want to easily start the game

  3. I want to be able to see a balance of images and text

  4. I want to be able to easily see my score

  5. I want responsive touch interaction on a mobile device

  6. I want to be able to pause the game

  • As a user at home

  1. I want to have access to the website on any device and on the go

  2. I want the buttons to be easy to see and be responsive

  3. I want responsive touch interaction on mobile device or tablet

  4. I want to be able to use the arrow buttons, or the WASD buttons to control the snake's direction on desktop computer

  5. I want to be able to pause the game

2.2. Design

2.2.1. Game Story

Story of the game came from my love of Scooby Doo as a child. They always encountered scary looking houses and all kinds of "monsters". In this game however the monster is real! You were turned into a snake by a wizard and he locked you up in a very large empty room in his large house. The room as no windows and the door can only be opened by the wizard's magic. However the wizard is unaware of a very important fact that could give you a chance to escape, whenever he is asleep, he spontaneously spawns all kinds of fruit in that empty room that you are trapped in. He also doesn't know that the fruit's have powers that make you grow very quickly. While stuck in there you got hungry and ate the fruit without thinking. When you realised that you grew longer, you had an idea to eat the fruit and grow large enough to make the room collapse on itself and escape.

2.2.2. Colour Scheme

The colour theme of the game is based on one of my favourite colour's, purple. I found a background with the colours I want and based the colour scheme from there. I used Adobe Color - Image to pick colours from the images and automatically generate colours for me.

The darkest colour in the grid was too dark, so I used Adobe Color - Wheel to determine a slightly lighter color that will best suit the scheme.

2.2.3. Typography

Font used for the heading was Mystery Quest with a back-up font of sans-serif. The font is eye catching and the swirls in the writing match the title of the game in terms of theme.

Font used for main text was Quicksand with a back-up font of sans-serif. The font is easy to read, well spaced out and goes well together with Mystery Quest.

2.2.4. Imagery

The background of the page is a haunted house type of building to decorate the page and fit in with context to the story.

2.2.5. Wireframes

Wireframes were created using Adobe Xd.

  • Mobile Wireframe

  • Tablet Wireframe

  • Desktop Wireframe

2.2.6. Mockups

The game has mostly remained the same in terms of general structure. New feature since the wireframe has been added such as:

  • Main Menu

  • Game instructions

  • Game states, including Pause, Game Over, Play and Setting Page

2.3. Existing Features

2.3.1. Common Features Across All Pages

  • Links that are hovered over

  • All links that are surrounding text have been underlined and change color when hovered over. This helps the user to identify external links. This excludes the action buttons on the main game screen.

  • Responsiveness

  • All pages work well with many screen sizes.

  • Buttons are consistent with theme.

  • Fonts

  • All text is large and easy to read.

  • Accessibility

  • Clear contrast between the background and text.

  • Colour theme do not conflict for those who are colour blind.

2.3.2 Specific to Pages

  • Main Menu

  • Main menu format is consistent across all devices

  • Game Page

  • Instructions for the game are easily accessible.

  • All devices are able to pause the game.

  • Game difficulty increases during the game by increasing speed

  • User has access to the high score.

2.4. Features Left to Implement

  • Be able to change the grid size from the settings page

  • Be able to change the fruit displayed on the page from the snake to eat

  • Disable minor scrolling from browser on mobiles when swiping

  • Add Sound to Game

3. Technologies Used

3.1. Languages used

  • HTML for static text and containers for the game, and buttons.

  • CSS for styling of the game.

  • JavaScript for the interactive features of the game.

3.2. Frameworks, Libraries and Programs Used

  • Fontawesome v.5.15.3 was used to insert icons arrows for the on-screen buttons in the game

  • Favicon was used to generate favicon and copied the syntax copied from website.

  • Google Fonts was used to import Mystery Quest and Open Sans fonts in the style.css stylesheet.

  • Visual Studio Code is a source-code editor optimised for debugging, syntax highlighting and extension support.

  • Git was used to allow for tracking of any changes in the code and for the version control.

  • Github is used to host the project files and publish the live website by using GitPages.

  • TinyPNG used to reduce resolution of images

  • Adobe Illustrator was used to draw the snake head and body vectors.

  • Adobe Xd was used to create wireframes for mobile, tablet and desktop.

  • Lunapic was used to remove background from images to create .png files

  • Swiped Events was used to add swipe controls to game.

4. Testing

  • External links

  • Link to Github repository on credits page opens in a new tab and leads to this README

  • Internal Links

  • Start Game Button opens a new page in the browser to the game instructions screen

  • Credits Button button shows the credits box as expected

  • Back Icons and Main Menu Buttons buttons in credits box and main game all lead to Main Menu as expected

  • Instruction page Tapping, and spacebar all toggle lead to the main game board

  • Refresh Icon, Restart Button, Try Again Button reloads the game page

  • Setting Icon Pauses the game and opens the settings box and refreshes game

  • Pause Icon Pauses and continues game as expected

  • Button Events

  • Arrow Keys Move snake in expected direction

  • WASD Keys Move snake in expended direction

  • Swipe Events

  • Swipe Directions snake moves in expected swipe direction and are responsive

  • Game Play

When each game feature was added, it was tested to see if it behaves as expected.

  • Snake grows extra segment when it consumes food. which in turn increases score

  • Score updates when food is eaten

  • High score is successfully stored in local storage

  • High score successfully updates when it is smaller than current score

  • Snake body follows snake head

  • Snake hitting all 4 walls triggers Game Over menu

  • Snake hitting itself triggers Game Over menu

  • Snake speed increases when eating

4.1. Bugs

  • When game over is triggered, snake head is no longer in front, but moves to the last div element

4.2. JavaScript Validator

VSCode extension jshint

Pass

4.3. CSS3 validator

W3C CSS Validator

3 Warnings

  • Imported style sheets are not checked in direct input and file upload modes

  • --height is an unknown vendor extension

  • --width is an unknown vendor extension

2 Errors

  • body Property overscroll-behavior doesn't exist : none

  • ul Property padding-inline-start doesn't exist : 0

Valid CSS!

4.4. HTML5 Validator

W3C HTML Validator

Main Menu Page - Pass

Game Page - 4 Warnings 1 Error

  1. Warning - Empty heading x 4

    • From line 34, column 13; to line 34, column 29

      <h1 class="menu"><i cla

    • From line 35, column 13; to line 35, column 32

      <h1 class="restart"><i cla

    • From line 36, column 13; to line 36, column 33

      <h1 class="settings"><i cla

    • From line 37, column 13; to line 37, column 30

      <h1 class="pause"><i cla

  2. Error - A script element with a defer attribute must not have a type attribute with the value module

    ript>↩ <script src="assets/js/game.js" defer type="module"></scri

    • Error has been fixed. Modules are defered by default see here

4.5. Compatibility Testing

  • Browser Compatibility
Screen size\Browser Safari Opera Microsoft Edge Chrome Firefox Internet Explorer
Mobile ✔️ ✔️ Not Tested. ✔️ ✔️ Not Tested
Desktop ✔️ ✔️ Not Tested. ✔️ ✔️ Not Tested
Tablet ✔️ ✔️ Not Tested. ✔️ ✔️ Not Tested

  • OS Compatibility was tested on iOS 14.6, MacOS Catalina, iPadOS 14.6 It is yet to be tested on Unix, Linux, Windows or Solaris Operating Systems.

  • The devices used in this testing include MacBook Pro, iPad Pro 10.5, iPhone 12 Pro Max, iPhone 7 Plus, iPhone 11, iPhone 6s.

  • The website was exhaustively tested for responsiveness on Chrome DevTools. Different viewport sizes were simulated ranging from as small as iPhone 4 (320px) to large desktop sizes (1200px and above).

5. Deployment

This website was published using GitHub Pages.

  1. Go to the GitHub.com and log in.
  2. On the left-hand side, you'll see all your repositories, select the appropriate one.
  3. Under the name of your chosen Repository you will see a ribbon of selections, click on 'Settings' located on the right hand side.
  4. Scroll down till you see 'Pages' heading.
  5. Under the 'Source' click on the dropdown and select 'master branch'
  6. The page will reload and you'll see the link of your published page displayed under 'GitHub' pages.
  7. It takes a few minutes for the site to be published, wait until the background of your link changes to a green color before trying to open it.

5.1. Contribution

  1. First you will need to clone this repository by running the git clone <https://github.com/datonex/visit-zimbabwe/> command in your terminal
  2. If using VS Code type make sure you have the Git extension installed then type above code into your terminal
  3. Download the Live Server extension, one installed find the go live button at the bottom right of your vscode window
  4. The project will now run on a localhost
  5. If using Gitpod use the command python3 -m http.server

6. Credits

6.1. Media

6.1.1. Images

6.1.2. Audio

6.2. Acknowledgements

6.2.1. Coding resources used