Concept and design:
When I was a kid, I was obsessed with the game Chicken Invaders. I remembered spending 2-3 hours playing it every time I was free from school and homework. It was a way of life for my PC back then. And so, I wanted to emulate the engine of that game for this mid-term project and have fun creating it. I call my interactive game “Alien Slayer.”
Here’s my design:
Here’s the overall structure of the code design:
let spritesheet;
// example spritesheet: https://png.toolxox.com/vhv?p=imRwRx_top-down-spaceship-sprite-hd-png-download/
// i'll edit the spritesheet so that the spaceship can only move left, right, up, down
let sprites = [];
let direction = 1;
let step = 0;
let x; //the spaceship's x position
let y; //the spaceship's y position
let speed = 4; //the animation speed, image moving on canvas
function setup() {
createCanvas(400, 400);
}
function preload()
loadImage()
spaceship = loadImage ("spaceship.png")
// or create a pixelated spaceship
function draw() {
background(220);
// create a cosmos background
// 1. gradient color
// 2. use loops (for/while loops) to create stars scattered across the space
// create evil aliens
// 1. create a class for show() and move() the evil aliens, with loops (for/while loops). The number of evil aliens is random, from 2 to 10. They will appear at the top of the canvas
// 2. use loops (for/while loops) to make the evil aliens start moving down 5 steps every time the frame is refreshed.
// 3. the evil aliens will randomly drop bombs.
// use sprite sheet animation for the spaceship
// 1. use (for loops) to create a nested array for the spaceship sprite sheet
// 2. use get() to get different tiles of the sprite sheet
// 3. use function keyPressed() and if conditions to make the spaceship move each step
// create a laser beam attack for the spaceship
// 1. create a class to draw the laser beam and use the show() to call out the beam
// 2. use function mousePressed() {} to shoot the laser beam that can only go up
// gameplay
// game screen gives instructions and waits for user input
// The spaceship needs to be moved around using the keys on the keyboard, to the location vertically under an evil alien to attack it (sprite sheet animation)
// if (){} the laser beam hits the evil alien, the alien is obliterated
// if (){} the bombs dropped by the evil alien hit the spaceship, it will lose one life.
// keep playing until all evil aliens are obliterated.
// if (){} one evil alien touches the spaceship, the player loses.
// displaying score
// user gets one score everytime an evil alien is obliterated.
// user receives 5 lives per game. if the number of lives == 0, the user loses and the game will end.
}
The most frightening or complex part of the project is to match the coordinate of the aliens’ bombs so that when they touch the spaceship, it will lose one life. Similarly, the laser beam’s coordinate has to match that of the alien so that the spaceship can kill it. Also, I still need to figure out how to make the aliens erratically drop bombs for the spaceship to dodge. I also still need to figure out how to display the score and the spaceship’s lives in a translucent board at the top of the canvas.
What I’ve been doing is I’ve been trying to write the algorithm for matching coordinates. It’s mostly about using the if function. I’ve also been testing the algorithm for randomly creating bombs from the aliens. This game is essentially about two objects having the same coordinates and randomness.
I’m also going to implement a sound library into the project (for example, a laser beam sounds, the alien dropping a bomb, the sound of the spaceship’s moving, etc.).