Homework 2: Space Invaders Tribute

Short Description:

Write a program that behaves something like Space Invaders

Goals

When you finish this homework, you should have written a javascript program that

Demonstrates your ability to manipulate "pixels" on the 2d HTML canvas
Used timers or intervals
Solved problems involving lines
Demonstrated your ability to use javascript at an intermediate level.

Formal Description

The game Space Invaders features a block of aliens who are attempting to capture the planet and a defender who is attempting to shoot them down. The player takes on the role of the defender. Between the defender and the aliens are four shields, which provide some level of cover until they are destroyed.

Your goal is to write a tribute game using only a modified version of my canvas. You must modify the canvas only as described below. You may not use any other graphics primitives.

The defender can move across the bottom of the screen either left or right. They can fire their gun at the aliens or the shields, but they may only have one active shot at a time. The shot travels straight up until it hits something or reaches the top of the screen. If the shot hits an alien, the alien is eliminated. If the shot hits a shield, part of the shield is destroyed. Once the shot is finished the player can shoot again. These shots were visualized as a short line segments traveling up.

There is a bank of 11×5 aliens (five rows of eleven evenly, spaced) that start at the top left of the screen. These aliens travel as a block back and forth across the screen, dropping down a fixed amount each time they reach an edge. If an entire outside column of aliens is eliminated, the next column becomes the edge and they will travel further. Each time an alien is eliminated, the remaining aliens speed up by a fixed amount. The aliens have two sprites, which they switch between each time they moved.

The bottom most alien for each column can fire a shot at the player or at the shields. These shots appear to be fired somewhat at random, and should be limited to at most 4 active shots at any time. If the shot hits a shield, a portion of the shield is destroyed. If the shot hits the defender, the defender is destroyed. In the arcade game, the player had three lives.

The shields appear to be made up of a set of blocks. For our game, make the shields a 4×3 array of blocks, with a block destroyed when it is hit. A shield block is also destroyed if an alien comes into contact with it.

I used this video for my description, however you might gain some insight, or at least entertainment from this clip as well.

For this game you should:

[5 points] Modify my canvas class so that all member data is protected. Add getters and setters as required to make the canvas useful.
[5 points] Implement a defender
- The defender moves along the bottom of the screen.
  - 'a' or 'j' moves the defender to the left.
  - 'd' or 'k' moves the defender to the right.
  - 'f' fires the shot, but only one shot at a time.
[10 points] Implement a block of aliens.
- The block starts in the upper left hand corner and moves as described.
- The aliens have two different poses, which they swap between as they move.
- The alien block fire up to four shots. These shots appear as longer line segments than the defender shots and travel straight down.
[10 points] Implement collision detection for the shots of both the aliens and the defender.
- Add an explosion animation when the shot hits an element.
- If an end column of aliens is eliminated the aliens in the next column become the end and the group travels further to the right/left as appropriate.
- The aliens speed up as members of their invading force are destroyed. This should be proportional to the number of aliens destroyed.
[10 points] Add a set of four shields, each composed of 4×3 elements. This can only be achieved if the previous point is completed.
- When an element is hit by a shot it is destroyed.
- When an element is hit by an alien it is destroyed.
[2 points] Add an end of game screen that displays when the defender is destroyed or an alien reaches the bottom of the screen.
[2 points] Add multiple lives for the defender.
[6 points] Add html elements to the side of the screen/canvas that display statistics/score/lives.

There are a total of 40 points available for this homework. You can score a maximum of 50 points. Any "extra" points will be included in your homework score and calculated in your final average.

Please do not make a complete reproduction of Space Invaders, please do not title your project Space Invaders. This is a tribute so please incorporate some differences. We are not interested in any copyright infringement. Also, please note on your page that this is a "Tribute to Space Invaders"

Documentation

Please make an intro page for this assignment that

Links to your game
Lists your collaborators.
Lists the components above that you belieive you have or have not completed.
Discusses any interesting or problematic code.
Discusses any special considertions.

Please use relative references to your code in the html file. This will allow me to extract the file in my local environment.

Additional Requirements/Comments

I expect you to build your code based on my examples.

Extras

I find that I want to continue to play with simulations/visualizations of this type. Please do so, but only if you have sufficient time, do not enhance this, or any other project at the expense of your other classes.

Submission

When you have finished your assignment, please submit a tar or zip file containing all files needed for this project.

Submit your file to the D2L homework folder homework 2 by the due date.