leithdm / shooty-rocks Goto Github PK

• Overview
• UX
  • User Stories
  • Design
    • Color Scheme
    • Icons
    • Typography
  • Wireframes
• Features
  • Existing Features
  • Future Features
• Technologies Used
  • Front-End Technologies
  • Miscellaneous Technologies
• Agile Project Management
• Testing
• Deployment
• Credits
  • Media
  • Acknowledgments

Overview

Shooty Rocks is an endless space shooter arcade game inspired by the classic 1979 Asteroids game. You can play the deployed game here.

UX

The inspiration for developing this game came from the classic Asteroids game conceived by Lyle Raines who was Atari's vice president of engineering in 1979. Ed Logg eventually took the lead on the project and is credited with its programming.

User Stories

• User Stories were written from the perspective of the user, and are detailed below (in no particular order).

"As a user, I ______________________________________________"

• need to have a responsive game, playable from any device (mobile, tablet, desktop).
• should have an invincibility shield for a set period of time when game restarts.
• should see GAME OVER when I lose all my lives.
• should progress through the game via Levels i.e. Level 1, Level 2, etc.
• should have a triangular ship to match the original game.
• should see irregular shaped asteroids.
• should see an explosion when I shoot an asteroid.
• should be able to turn soundfx on and off as a menu option.
• should hear different sound-fx while playing the game.
• should have a visual cue for the number of lives I have during the game.
• should be able to shoot the asteroids with bullets.
• should be able to shoot bullets using keyboard input.
• should be able to move the ship using keyboard input.
• should be able to move my ship forwards, backwards, left, and right.
• should have my ship render onto the centre of the canvas at the start of the game.
• should feel friction when my ship is no longer moving forward, and my ship should finally stop.
• should be given 3 lives at the start of the game.
• should have a visual cue (explosion) when my ship is hit by an asteroid.
• should have a visual cue (afterburner at back of ship) when my ship is thrust forward.
• should see my score increment every time I shoot an asteroid. Different asteroids get different points.
• should see my ship reappear on the opposite side of the screen if I move off-screen.
• should see the large and medium sized asteroids break up into x2 smaller asteroids when hit by a bullet.
• should find the game easy to begin with, and as the game progresses it should get increasingly more difficult.
• should be able to shoot bullets by tapping a "FIRE" button when on mobile.
• should be able to move the ship using swipes or a button keypad when playing the game on mobile.
• should be able to click on a HIGH SCORES menu button, and be presented with the highest score.

Design

Mobile responsiveness was a key consideration in this project, and resulted in the development of a gamepad controller in order to move the ship when playing on mobile. The use of responsive CSS sizing elements including vw , vh and grid helped to ensure the site responds to the appropriate device, along with my own container element that is functionally the same as a Bootstrap container but without the overhead of using the framework.

Color Scheme

• The gamepad color scheme is loosely based on the SNES controller:

Icons

• Font Awesome 5.6.1 icons are used in the how to play page, and in the gamepad controller buttons.

Typography

• Google Fonts were used across the site, namely:
  • Press Start 2P : game title and menu buttons.
  • Roboto Mono : in-game dashboard including score, highscore, ships, level.

Wireframes

• Wireframes were created using Balsamiq Wireframes and can be viewed by clicking on links below.

Features

Existing Features

• Progressive Difficulty: the game is an endless space shooter arcade game. The game starts at Level 1, and becomes increasingly more difficult as each level progresses. This is implemented by increasing the number of asteroids, and increasing the speed at which the asteroids move.
• Play Again: Once the game is over, a pop up screen allows the user to play again, or exit to the main menu.
• Sound FX / Music: option to turn Sound FX and background Music on/off from within the game. These setting options are stored in local storage.
• How to Play: a menu item to explain how to play the game on both Desktop and Mobile.
• High Score: a menu item to display the highest score achieved. High score is also displayed within the game to provide extra incentive to the user. This value is stored in local storage.
• In-game Dashboard: displaying High Score, Score, Level, Ships, and buttons for navigating back to the main menu and for controlling sound fx/music.
• Gamepad Controller: built for mobile users. Designed with large buttons and positioned for ease of use. The gamepad controller is also hidden on large (>992px) devices and replaced with a background pattern.

Future Features

A full list of future features can be viewed in the Product Backlog, but we will briefly mention some of them here:

• In-game enhancements: alien space ships that shoot at player, extra-lives, flashier explosions/collisions, game-over music, different backgrounds for different levels.
• Menu Items: high score Leaderboard, e.g. top 10 high scores.

Technologies Used

Front-End Technologies

• HTML5 - used to provide content and structure.
• CSS3 - used to provide styling.
• JavaScript ES6 - the game is built entirely from vanilla JavaScript.
• Jasmine - used for Test-Driven Development (TDD).
• Howler.js - an audio library for the modern web.
• Google Fonts - used to provide font styling.
• Am I Responsive? - used to show site responsiveness.

Miscellaneous Technologies

• VS Code - used as the primary IDE.
• GitHub - used for remote storage of code.
• TinyPNG - used to optimize (.jpg, .png) images for faster loading.
• Balsamiq - used to create the project's wireframes.

Agile Project Management

GitHub Projects was used to iteratively sprint through the development of this app. Each User Story became an individual Issue, and was placed in a Kanban board composed of the following columns:

1. Backlog - all user stories, ordered by value/priority.
2. Sprint - a subset of user stories to be completed in a x1 week sprint.
3. In Progress - user stories currently being worked on from current sprint.
4. Done - user stories completed, and tested.

A separate git branch was created for each user story, and a Pull Request (PR) was submitted for its subsequent approval/merger into the master repository. Along with tracking user stories, Github Projects was also used to track bugs. The full list of user stories/bugs and their relevant PR's can be viewed here.

Testing

The testing process can be viewed here.

Deployment

How to deploy

To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:

1. From the menu items near the top of the page, select Settings.
2. Scroll down to the GitHub Pages section.
3. Under Source click the drop-down menu labelled None and select Master Branch.
4. The page refreshes automatically, and the website is now deployed.
5. Scroll back down to the GitHub Pages section in Settings to retrieve the link to the deployed website. It may take a short time to go live, but typically < 60 seconds.

How to run locally:

To clone this project from GitHub:

1. Under the repository’s name, click Clone or download.
2. In the Clone with HTTPS section, copy the given URL.
3. In your IDE of choice, open Git Bash.
4. Change the current working directory to the location where you want the cloned directory to be made.
5. Type git clone, and then paste the URL copied in Step 2

git clone https://github.com/leithdm/milestone-project-2.git

1. Press Enter. Your local clone will be created.

Credits

Media

• Audio:
  • Classic Gaming provided the in-game Sound FX. These are the same sounds used in the original Asteroids 1979 arcade classic.
  • Background music was provided royalty free by DL Sounds.
  • Audio compression and conversion was provided via FreeConvert.
• Images:
  • The background image used in the game menu was again provided by Classic Gaming. A filter was applied to darken the image.
  • The in-game star background was provided by Jake Weirick via Unsplash.
  • The patterned background visible on desktop was provided by Hero Patterns.
• Game Programming Tutorials:
  • Make JavaScript Asteroids in One Video: a great introductory video.
  • Code Asteroids in JavaScript (1979 Atari game) - tutorial: another excellent tutorial.
  • Canvas tutorials provided by MDN web docs.
  • Code Your First Game: Arcade Classic in JavaScript on Canvas: a free course on Udemy.
  • How to Program Games: Tile Classic in JS for HTML5 Canvas: a paid course on Udemy.