Team CodeBusters: Project Ghost Hunt - The Game

Ghost hunt is an interactive game where users have to click on randomly appearing ghosts to capture them. The objective of the game is to accumulate points by clicking on as many ghosts as possible within a specified time limit.

User Experience

User Stories

• As a user I want to understand the game rules so that I can play the game correctly
• As a user I want to view the Game page so that I can click and start the game anytime
• As a user I want to navigate the web app so that I can see more information about the game
• As a user I want to view the Game page so that I can click and start the game anytime
• As a user I want to select the number of questions so that I can dedicate the time I have available
• As a user I want to see my score updating so that I can compete with my score
• As a user I want to see the time limit so that I can compete with myself
• As a user I want to hear the game audio/soundtrack so that I can feel the halloween spirit
• As a revisitng user I want to be able to see my previous score records so that I can try to beat it

Tasks and Planning

Tasks, sprints and planning can be seen in the CodeBusters Team GitHub Project. A total of 5 mini sprints were planned and executed, making easier the tracking of activities and the assignation of efforts along the Hackathon.

Colour Palette

The colour palette was generated from the background image using Tools PicsArt.

Typeface

The following fonts were chosen from Google Fonts to fit the Halloween theme of the project: Creeper (url: https://fonts.google.com/specimen/Creepster?query=creepster)

Frijole (url: https://fonts.google.com/specimen/Frijole? query=frijole)

Nosifer (url: https://fonts.google.com/specimen/Nosifer?query=nosifer)

Eater: (url: https://fonts.google.com/specimen/Eater?query=eater)

Astloch (URL: https://fonts.google.com/specimen/Astloch?query=astloch)

Modern Antiqua (URL: https://fonts.google.com/specimen/Modern+Antiqua?query=modern+antiqua)

Modern Antiqua was chosen as a typeface for use in chunks of text due to it’s easy readability compared to the others, which will predominately be reserved for titles and headings.

Wireframes

Game Start

Gameplay

Features

Implemented Features

Sound ON/OFF

• The full responsive navigation bar includes links to the Game page, Instructions and Contact page, and is identical in each page to allow for easy navigation.

Index

• The full responsive navigation bar includes links to the Game page, Instructions and Contact page, and is identical in each page to allow for easy navigation.

Art Content

• Some ghosts were created by the team as well as the team and game logo.

In-game Information

• The time counter, the name of the schenario, pumpkins (lives) counter and how many ghosts you have hunt are part of the visual tools for the user/player.

Game Story & Instructions

• The descriptions of the characters and how to play.

Scoreboard

• It saves the scores of the players.

Features Left to Implement

• Make the game go faster and provide extra points per killed gost
• Add bonus points functionality

Testing

Validator Testing

• JavaScript
  • No errors were returned when passing through the official JSHint validator
• HTML
  • One error related to invalid attributes for an img element was returned when passing the first time through the official W3C validator
  • No errors were returned when passing the second time through the official W3C validator
• CSS
  • No errors were found when passing through the official (Jigsaw) validator
• Lighthouse
  • The result given by the system for the lighthouse assessment is the following:

Manual Testing

TEST	ACTION	EXPECTATION	RESULT
Index	Size to 320px using Chrome Dev Tools	Elements look good @ 320px	Works as expected
Index	Size to 1920px using Chrome Dev Tools	Elements look good 1920px	Works as expected
Game	Size to 320px using Chrome Dev Tools	Elements look good @ 320px	Works as expected
Game	Size to 1920px using Chrome Dev Tools	Elements look good 1920px	Works as expected
Index page test	All phone sizes checked using Chrome Dev Tools	Elements look good	Works at expected
Game page test	All phone sizes checked using Chrome Dev Tools	Elements overlap and game runs faster at lower resolutions	Does not work as expected

Unfixed Bugs

• NA

Deployment

• 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 Master Branch
  • Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

The live link can be found HERE

Credits

Content

• Good/Best practice on the readme were shared by Lauren-Nicole Popich in her mentoring GitHub repositry
• User Stories and tasks creation was implemented following this publication
• Use of Google to import Google fonts
• Inspiration of our game color palette and were based on the selected game background that comes from themeforest.net
• The animation and use of canvas in JavaScript was implemented following this tutorial
• The use of GitHub to collaborate and apply good practices was implemented following this Slack post and this GitHub post
• The team availability was organized using Google sheets

Media

• The creation of the team banner and game logo was implemented using Canva
• The wireframes were created using Balsamiq Cloud
• The icons along the web app were taken from Font Awesome
• The use of the icons was provided by Flaticon
• The ghosts own art were created with Procreate and Photoshop
• The improvement/change of sprites (sequence of images for animation) were implemented using GIMP
• The game background music was selected from opengameart.org and created by Alexandr Zhelanov
• The game background image was selected from themeforest.net

Thank You!

Diego Cardenas
Adam Fairley
Jamie Bradford
Matheus Cafalchio
Mimmi Stockman
Stefania Frustagli
Omar Al-mehdhar