Project: JavaScript Game
Project Summary
This is a game purely made by JavaScript without using any external libraries.
Players can use the touchscreen buttons or the keyboard to play the game.
This course-project had three team members, among which I had the most contribution (80%) based on GitHub stats.
The code is highly readable and uses extensive comments.
Code on GitHub DemoTechnologies Used
Frontend
JavaScript (Object Oriented)
HTML, CSS
Backend
Not Applicable
Details
The Canvas
- The Canvas size is 600 x 600 px.
- The Spacecraft and Space Invader pictures are each 60 x 60 px.
- The game takes place on a 10 x 10 grid, and to move the spacecraft, we add 60 to its X coordinate.
- After each change the Canvas is cleared and everything is redrawn at their new positions.
- The game was designed for a computer or tablet screen.
The Objects
- The space craft, the laser beam, and the explosion are individual objects that have variables for their X and Y positions, and another variable to tell whether they should be visible hidden at any time.
- Moving the space craft consists of changing its X location and redrawing the whole Canvas.
- The game ends when one of the space invaders reaches the ground or if it hits the space craft. At this moment, the explosion graphic is drawn over the space craft graphic.
The Invaders
- The invaders are multiple objects created from a constructor function with an initial random X position.
- At every time interval, a new invader is created and added to the array of invaders. Once an invader is shot, its object is removed from the array.
- At every time interval, the invaders' Y position is increased by a fixed amount until they reach the ground, hit our space craft or die. This is done by looping over the array of live invaders.
- The invaders’ generation and movement speed increases with each level.
The Shooting
- When a shot is fired, we loop through the invaders array to determine if one of them was shot, and if so, we draw the laser beam from the space craft to the invader.
- Then the invader graphic is replaced with the explosion graphic. The laser beam and the explosion are hidden by default, we first assign proper X, Y positions to them, and then make them visible. Then we use a timer to hide both again after a small period.
Code on GitHub Demo