Space Invaders Clone

This game is a simple Space Invaders Clone using HTML Canvas, CSS, and Javascript. Player wins by destroying all invaders or loses if invaders touch player.

Getting Started

Move Player using left and right Arrow Keys. Shoot using spacebar. Try to eliminate Invaders

Launch Game

Space Invaders

Game Grid

• Create a box within grid
• Box should be centered in main grid
• Box contains intro of game and story
• Button for player to start game after reading description
• Create background color for grid

Game story and description

• Create a modal within grid
• Modal should be centered in main grid
• Modal contains intro of game and story
• Modal has button for player to start game after reading description

Instructions for controls

• Create a modal within grid
• Modal should be centered in main grid
• Modal contains contains instructions to controls
• Button for player to play game after reading instructions

Invaders

• Invaders are set up initially in top-half portion of grid at beginning of game
• Invaders move left and right while decending down vertically, continuously till bottom of grid is reached
• Invaders shoot projectiles toward player to try and destroy player
• Invaders take damage before being destroyed
• When enemies touch bottom of grid, game over

Player

• Player is positioned in bottom center of game grid
• Player shoots projectiles to destroy invaders
• player moves horizontally at the bottom of the grid
• Player can take damage up to three times before game over

Collision Detection System

• Invaders can not overlap visually on screen
• Player can not overlap visually with invaders on screen
• Player and invaders need to detect when making contact with projectiles and or each other
• Player, Invaders, and projectiles cannot go outside of game grid

Score Tracker

• Each invader destroyed updates score tracker
• Score tracker is displayed in top left corner of grid
• Score is a number data type

Life Tracker

• Each time player takes damage the visual player icons remaining reduces by 1
• Miniature player icons representing remaining lives left are displayed in bottom right corner of grid

Winning the game

• Player wins game when game when all invaders are destroyed and all potential levels are cleared.

Losing Game

• If player loses all lives, game over.
• If invaders reach bottom of grid, game over
• Player is presented with text saying game over
• Button to reset game to beginning

Future Updates:

1. Fixing Audio
2. Allowing only the row of invaders without another invader in front to shoot player
3. Smoother ingame visuals
4. Moving stars in space
5. Image manipulation
6. Improved visuals and styling
7. Score System
8. More stages or levels
9. Player Projectile Power Ups
10. Boss Battle
11. Controls Modal
12. Backstory