I created a interactive game about Covid-19. When the program runs, it first gives the instruction of the game for the first few seconds, You have to click on the heads of the humans to remove them, so that they keep social distance. If you successfully keep the number of the people under 4, you succeed. If you fail to do so and there are more than 12 people, game over. I was inspired by how the social distance is crucial to keep us safe during this time of pandemic. We just have to keep ourselves not too crammed in one place! I wish I could add more interactive/intuitive features including click to start or click to restart the game.
//Jae Son , Section C
var humans = [];
function setup() {
createCanvas(500, 400);
rectMode(CENTER);
frameRate(20);
}
function draw() {
background(210,237,178);
for (var i = 0; i < humans.length; i++){
var human = humans[i];
humans[i].display();
}
//game instruction in the beginning
if (frameCount <80) {
noStroke();
fill(152,183,108);
rect(250,200,300,200);
fill(255);
textSize(20);
textStyle(BOLD);
text('click the head and',140,180);
text('remove the humans to',140,200);
text('keep the social distance',140,220);
}
//game starts after the instruction
if (frameCount > 80 & frameCount % 10 == 0){
var newHuman = createHuman(random(25,476),random(10,278),0,0);
humans.push(newHuman);
}
//if there is more than 12 people, game over
if (humans.length > 12) {
fill(242,158,158);
rect(250,200,350,250);
fill(255);
textSize(20);
textStyle(BOLD);
text('No one bothered to keep',130,140);
text('the social distance',130,160);
text('and Now we are at the',130,180);
text('highest risk of COVID 19.',130,200);
text('Try better!',130,240);
frameRate(0);
}
//if there is less than 4 people, game clear
if (humans.length < 4 & frameCount > 200){
fill(157,209,244);
rect(250,200,300,250);
fill(255);
textSize(20);
textStyle(BOLD);
text('Everyone kept the',140,140);
text('social distance and',140,160);
text('and we are at',140,180);
text('lower risk of COVID 19.',140,200);
text('Good job!',140,240);
frameRate(0);
}
}
//humans
//creating Human objects and drawing them
function createHuman(humanx,humany,humandx,humandy){
var human = {x: humanx, y: humany,
dx: humandx, dy: humandy,
display: drawHuman,
humancolor: color(random(220,255),random(80,100),random(100,200))
}
return human;
}
function drawHuman(){
noStroke();
fill(this.humancolor);
push();
ellipse(this.x,this.y,15,15);
rect(this.x,this.y+22,16,27);
rect(this.x-12,this.y+22,4,22);
rect(this.x+12,this.y+22,4,22);
rect(this.x-3,this.y+52,5,33);
rect(this.x+3,this.y+52,5,33);
pop();
}
//remove humans when their head is clicked
function mousePressed() {
for (var i = humans.length - 1; i >= 0; i--) {
if (dist(humans[i].x, humans[i].y, mouseX, mouseY) < 20) {
humans.splice(i, 1);
}
}
}