The project is representing two events we had to deal with in 2020, the so-called Asian murder hornets and the coronavirus.
The project is a game that mimics arcade-style 2D shooter games.
The player is a hornet facing off against cells of the coronavirus and taking them down with glowing green bullets.
Whenever a virus reaches the bottom of the screen, the player loses.
While developing this project, I came across a lot of problems , the most complicated being the interaction between the bullet and virus.
I was not sure how to call a property of an object in an array while comparing it to another property of an object in another array and then making something happen with it.
However, I ended up using a nested for loop to linear search both the virus and bullet and using a conditional to check if the x and y value of those searched are matching.
Creating a project for myself and implementing the coding strategies I’ve learned over this semester definitely cemented what I’ve learned and see the usage of these techniques in my own way.
Overall, I learned about my strength and weaknesses when tackling a coding project through this experience.
var movement = []
var bullets = [];
var xpos;
var ypos;
var cv;
var score;
var c=0
var virus = [];
var cvimage = [];
var cvlinks = [
"https://i.imgur.com/Nw3KzRI.png", // virus images
"https://i.imgur.com/JlYsbHq.png",
"https://i.imgur.com/rIXhNzt.png",
"https://i.imgur.com/SjJmecC.png"
]
var count = 0;
function preload(){
for (var i = 0; i<4; i++){ // loading images into array
cvimage[i] = loadImage(cvlinks[i]);
}
hornet = loadImage("https://i.imgur.com/tU0dXCU.png")
hornetshadow = loadImage("https://i.imgur.com/JErLPWR.png")
}
function setup() {
createCanvas(500, 500);
for (var i = 0; i < 100; i++){ // initial background lines
var rx = random(width);
var ry = random(height);
movement[i] = makemovement(rx,ry);
}
}
function draw() {
background(255)
startgame();
updatemovement();
removemovement();
addmovement();
updatevirus();
addvirus();
removevirus();
drawhornet();
updateremovebullet();
bulletvirusinteraction();
lose();
count++
}
function startgame(){ // openning of game
push()
translate(width/2,height/2)
fill(0)
scale(c)
circle(0,0,5)
c+=2
pop()
}
// BACKGROUND MOVEMENT
function updatemovement(){
for (var i = 0; i < movement.length; i++){ //background lines appearing and moving
movement[i].move(); //moving
movement[i].display(); // appearing
}
}
function removemovement(){
var movementtokeep = []; // array to keep existing lines
for (var i = 0; i < movement.length; i++){ //going through lines to see which to keep
if (movement[i].y + 100 < 500) {
movementtokeep.push(movement[i]);
}
}
movement = movementtokeep; //return kept lines back inot movement array
}
function addmovement() {
for (var i = 0; i < 100; i++){ // adding more background lines
var rx = random(width);
var ry = random(height);
movement.push(makemovement(0))
movement[i] = makemovement(rx,ry);
}
}
function mvmtMove() {
this.y += this.speed; // lines movement down canvas
}
function mvmtDisplay() { // white lines
stroke(255);
line(this.x,this.y,this.x,this.y+100);
}
function makemovement(startx,starty) { //properties of background object
var mvmt = {x: startx,
y: starty,
speed: 1,
move: mvmtMove,
display: mvmtDisplay}
return mvmt;
}
function drawhornet(){
xpos=constrain(mouseX,0,width-50); // keep hornet in canvas
ypos=map(mouseY,0,height,350,450);// keep hornet in bottom portion of the canvas
image(hornet,xpos,ypos,50,50); // draw hornet
}
// VIRUS
function updatevirus(){
for (var i = 0; i < virus.length; i++){ // showing and mocing viruses
virus[i].move();
virus[i].display();
}
}
function addvirus() { // creating a new row of virus
if (count % 100 == 0){
for (var i = 0; i < 4; i++){
virus.push(makecv(int(random(10))*50)); // x position of virus is at mulitples of 50
}
}
}
function removevirus(){ // if virus is less than height of canvas the virus is kept
var viruskeep = [];
for (var i = 0; i < virus.length; i++){
if (virus[i].y < height) {
viruskeep.push(virus[i]);
}
}
virus=viruskeep
}
function makecv(startx) { // object propeties of virus with x value being varied from loop from before
var virus = {x:startx,
y: -100,
speed:.5,
img: random(cvimage),
move: virusmove,
display: virusdisplay}
return virus;
}
function virusmove() { // virus movement
this.y += this.speed;
}
function virusdisplay() {// show virus
image(this.img,this.x,this.y,50,50);
}
//BULLET
function mousePressed(){ // when mouse is pressed a new bullet is generated
var startingbullet = makebullet(xpos, ypos);
bullets.push(startingbullet);
}
function updateremovebullet(){ //move and show bullet while keeping if under 150 counts to keep array short
newbullets = [];
for (var i = 0; i < bullets.length; i++) {
var b = bullets[i];
b.stepFunction();
b.drawFunction();
if (b.age < 150) {
newbullets.push(b);
}
}
bullets = newbullets; // kept bullets back into bullets array
}
function bulletmove() { // bullet movement
this.y -= this.dy;
this.age ++
}
function bulletdisplay() { // glowing green bullets
fill(0,200,0)
ellipse(this.x,this.y,10)
fill(0,255,0)
ellipse(this.x,this.y,5)
}
function makebullet(bulletx, bullety) { // bullet object properties
b = {x: bulletx,
y: bullety,
dy: 4,
age: 0,
stepFunction: bulletmove,
drawFunction: bulletdisplay
}
return b;
}
function bulletvirusinteraction (){
for (var i= virus.length-1;i >0; i--) { // linear search virus backwards so when spliced it doesnt skip one
for (var j= bullets.length-1;j >0; j--) { // linear search bullets
if ((bullets[j].x <= virus[i].x+50) // range of bullet and virus x values must match
& (bullets[j].x >= virus[i].x-50)
&& (bullets[j].y <= virus[i].y+25)){ // range of bullet and virus y values must match
virus.splice(i,1); //if they match then both bullet and virus disappear from the array
bullets.splice(j,1);
}
}
}
}
function lose (){
for (var i= 0 ;i < virus.length; i++) {
if ( virus[i].y==450){ // if any virus' y value passes 450 then player loses
gameover(); // trigger gameover screen
}
}
}
function gameover (){
fill(255,0,0);
rect(0,0,500,500);
noStroke();
fill(0);
textSize(50);
text('GAME OVER',100, height/2);
textSize(20);
frameRate(0); // end frame
}