Skip to content
Asteroids was one of the earliest video games, first released in 1979, and was simply mind blowing at the time. Get to experiment with the online version of the game based on HTML5 and Canvas .
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
assets
css
js
scss
DEPLOYMENT.md
brief.md
index.html
readme.md

readme.md

ASTEROIDS

(General Assembly Project 1 : Simple front-end game)

Goal: To create the classic arcade game ASTEROIDS by HTML5

Technologies used

  • HTML5 + Canvas
  • SCSS
  • CSS Animation
  • Vanilla Javascript (ECMAScript6)
  • GitHub

My Game - Asteroids

asteroids_logo

Game overview

Asteroids is an arcade space shooter released in 1979 by Atari, Inc. The object of the game is to maneuver your spaceship through space, dodging and destroying asteroids and saucers.

The object of the game is to destroy all the asteroids on the screen. However, when you shoot an asteroid, it breaks into smaller pieces, which must also be destroyed.

Game Instructions

Asteroids is a two-dimensional vector shooter. You control your spaceship and dodging from the asteroid and destroy them. Also, saucer appears periodically and must be dealt with as well.

The controlling by the spaceship using a series of keys:

  • arrow right key > - Rotate right
  • arrow left key < - Rotate left
  • arrow up key ^ - Thrust
  • space key - Fire

The playing field consists of your spaceship, floating asteroids, and the occasional alien taking shots at you. You control the spaceship to avoid collisions and to blast obstacles. You start with 3 spaceships. On the normal machine set up, you earn a free spaceship every 10,000 points.

When you start the game, your spaceship will be in the middle of the screen. Heading toward your spaceship will be anywhere 7 large asteroids. Your job is to blast those rocks. However, * when you blast them, they break up into 2 medium asteroids. Blasting a medium asteroid gives you 2 small asteroids.* screen with bigsaucer

In addition, you have to contend with large and small saucers. the small saucers will begin to appear after 10,000 points.

screen shot 2018-09-07 at 13 33 07

The player wins points in every hit on an asteroid or saucer according to the following way:

Picture Attacker Points
icon-l-asteroid Large Asteroid 20 Points
icon-m-asteroid Medium Asteroid 50 Points
icon-s-asteroid Small Asteroid 100 Points
icon-saucer Large Saucer 200 Points
icon-saucer-small Small Saucer 1000 Points

Keep in mind a couple of things when shooting:

  • You can have 4 shots on the screen at any one time. This is useful for when you are blasting rocks at close range. You can pretty much drill them to dust.
  • Your shots "wrap around" the screen. This means any shot that goes past the edge of the screen will reappear on the opposite side traveling the same direction. The saucers also have "wrap around" shots.

Process

In the first stage, I planned how the game was going to look, this step required understanding how the original game worked precisely, what technologies could be used to build the game and the class structure of the game.

In the second stage, I set my goals to MVP to make sure that the technology I chose was suitable for building the game.

At the development stage I developed the following order:

  1. Set the UI of the game
  2. Development of spaceship
  3. Develop the possibility to shoot by spaceship
  4. Develop the asteroids (including their explosion into different parts and their creation in a different way).
  5. Develop the possibility to score, level and lives.
  6. Developing the saucer
  7. Add sound and improve UI

Challenges

One of the challenges in the building of the game is to understand how the original game works behind the scenes and how to make the game similar to the original game of Atari.

Another challenge is to work with a canvas technology, that requires drawing each object in a vector way.

Wins

Learning of canvas technology, how it works and how to correctly use technology for developing games.

Future features

  • Mobile support - Displays on-screen joystick to control the spaceship
  • Adding an option to save the results locally or on DB.
  • Adding an option to login.
  • Adding an additional UI option that is innovative and colorful.
You can’t perform that action at this time.