Galaxy Defense

Levin Ostapeck

Clinton Medbery
Kwyntae Grampus
College of Charleston
CSCI 210 Game Programming Spring 2014

Abstract
Try to shoot enemy aliens and attain the highest score possible before your three lives run out. Missing an enemy
or being hit by one causes the loss of a life. Sprite and background created using Pixlr and Photoshop. Javascript
was used to code the game, and it runs within JSFiddle's resultant window.

Game Mechanics
Mechanics are based on the standard Space Invaders mechanics, with the addition of being able to move forward
and backward as well as left and right. One must dodge and shoot falling enemy ships. Each time a ship makes it
past the player or the player gets hit, a life is deducted. The player starts with three lives. Shooting a ship gives 5
points, and being hit/missing a ship deducts five. With each interval of points there is a slight increase in speed
which will accumulate over time, varying difficulty.

Artwork

Aesthetic: Minimalist sci-fi, cartoony, "retro"

How-to: We created 15 overall used sprites for the game, and one background image. The ships and shots were always
idle to give the feeling of an old arcade game, but the modern colors and highly animated fire gives the reminder of
advancement in technology. Clinton created the original enemy, player, and shot sprite. Levin and Kwyntae worked on
animating the fire in Pixlr. The most important aspect of making an animation sheet is having all of the images exactly
uniform on the x and y axes, with this style of animation. Each fire costume is 32x32pixels. The canvas painter will
constantly reload the scene, so having images that give the feeling of motion is crucial to the process.

Programming
Most of the coding that went into the game was about being as efficient as possible on loading times and relying on outside
resources as possible. For instance, instead of creating an entirely new background and transitioning and waiting for load times of an
image host service; three code snippets read (with explanation in my own words):
//lose screen/top of play functions if-else (combination of Levin and Clinton)
if(lives == 0) { //if at top of reDraw in order to stop the other sprites from animating
canvasPainter.clearRect(0,0,5000,5000); //remove all sprites from the screen
//HTML overlaid text on the same background, save loading resources
canvasPainter.fillText("You Lose - Score: " + score, (SCREEN_WIDTH/2)-100, SCREEN_HEIGHT/2);
canvasPainter.fillText("Refresh to Play Again", (SCREEN_WIDTH/2)-105, SCREEN_HEIGHT/2+30);
window.addEventListener('click', handleClick, false); //allow for a new click to reset the variables and animation
} //the else allows for the condition to be made for play
else{
canvasPainter.clearRect(0,0,5000,5000); //clears the entire window to avoid having to clear each block and waste processing
canvasPainter.fillText(score, 20, 30); //score text overlaid on background
flameTwoX = playerX + 14;
flameTwoY = playerY + 36;
var topLeftX = currFlame * flameSizeX;
var topLeftY = 0;
//allows for animated flame to trail the static enemy sprite, reloads and uses the enemy or player X and Y to keep behind the sprites (Levin and Kwyntae)
flameOneX = enemyX + 17;
flameOneY = enemyY - 12;
canvasPainter.drawImage(flameOne, topLeftX, topLeftY, flameSizeX, flameSizeY, flameOneX, flameOneY, flameSizeX, flameSizeY);//flame animation
canvasPainter.drawImage(enemyImage, enemyX, enemyY);
currFlame = currFlame + 1; //change costume
if (currFlame >= numCostumes[0]) currFlame = 0; //loop the costume to create animation
// places reanimating sprites as lives for the player, rather than changing backgrounds (Levin)
for(var i = 0; i < lives; i++) {
canvasPainter.drawImage(playerThumb, 10 + 50*i, 50); //sets intervals in a for loop, and as lives decrease, the i value will create less life sprites
}