​

let gameTime; //variable to track the general game time

​

let clicks = 0; //variable to count the number of times a person

​

let myCharacters; //class for my characters (theMole and the Politician)

​

let arrayEllipses = []; //the array that stores the coordinates of the ellipses

​

let politicianImage; //variable for the image of the politician

​

let moleImage; //variable for the image of the mole

​

let bg; //variable for the background image

​

let ellipseX; //a variable for the X coordinate of the ellipses

​

let ellipseY; //a variable for the Y coordinate of the ellipses

​

let rectStrokeWeight; //global variable for the weight of the rectangular button's stroke

​

let circleStrokeWeight; //global variable for the circular "back" button's stroke

​

let instructionsRect; //variable for the "Instructions" button

​

let mainSound; //variable for the background music of the game

​

let buttonSound; //the sound that is played when anything is clicked or any key is pressed

​

let lossSound; //the sound that is played when the person loses

​

function preload() {

  //image taken from https://openai.com/product/dall-e-2

  bg = loadImage("background_image.png");

​

  climate = loadFont("ClimateCrisis-Regular-VariableFont_YEAR.ttf");

​

  //image take from https://www.clipartmax.com/so/politician-clipart/

  politicianImage = loadImage("politician.png");

​

  // the sound is taken from https://www.proudmusiclibrary.com/en/tag/arcade

  mainSound = loadSound("mainSound.mp3");

​

  //the sound is taken from https://www.landr.com

  buttonSound = loadSound("button.mp3");

​

  //image taken from

  //https://www.pngwing.com/en/search?q=mole+Cartoon

  moleImage = loadImage("Mole.png");

​

  //the sound is taken from https://mixkit.co/free-sound-effects/arcade/

  lossSound = loadSound("loss.mp3");

}

​

function setup() {

  createCanvas(500, 500);

  textAlign(CENTER);

  rectMode(CENTER);

  mainSound.play();

  mainSound.setVolume(0.5);

  //defining the strokeWeight of my buttons

  rectStrokeWeight = 5;

  circleStrokeWeight = 5;

​

  //creating a class of characters

  myCharacters = new Character();

​

  //creating an array to hold the coordinates of all the ellipses to refer to it later on

  arrayEllipses = [

    [95, 225],

    [95, 325],

    [95, 425],

    [235, 225],

    [235, 325],

    [235, 425],

    [375, 225],

    [375, 325],

    [375, 425],

  ];

}

​

//assigning functions to the specific windows the user will get redirected to

function draw() {

  background(220);

  image(bg, 0, 0, width, height);

​

  //creating different states for the different windows of the game

  if (gameState == "start") {

    drawMainPage();

  } else if (gameState == "playing") {

    drawGame();

  } else if (gameState == "win") {

    drawWinScreen();

  } else if (gameState == "loss") {

    drawLossScreen();

  } else if (gameState == "instructions") {

    drawInstructions();

  }

}

​

//function for drawing the instructions

function drawInstructions() {

  background(bg,width,height);

​

  textAlign(CENTER);

  textWrap(WORD);

  textSize(11);

  fill(255, 51, 236,220);

  stroke(252, 255, 51);

  strokeWeight(3);

  textFont(climate);

  text(

    "You have probably heard about “Whack-A-Mole” before. However, have you ever thought about how realistic this game is? You take a hammer and you hit an animal. Sounds familiar? Yes, it is animal abuse!",

    width/2,

    height/5,

    width

  );

  text(

    "In this game, you are given a similar game: it comes with a twist, though. Apart from the mole, there is another character joining you - a politician who committed animal abuse. In this game, you are NOT allowed to hit the mole. If you hit the mole, you automatically lose. The only way for you to win is to whack the politician at least 30 times in the span of 20 seconds. ",

    width/2,

    height/2.5,

    width

  );

  textSize(27);

  text(

    "WHACK THE POLITICIAN!",

    width/2,

    height/1.55,

    width

  );

​

  //creating a button that allwos the person to go back to the original window

  fill(255, 51, 236, 190);

  stroke(252, 255, 51);

  strokeWeight(circleStrokeWeight);

  circle(width / 1.13, height / 12, 50);

​

  //increasing the stroke weight of the button if it's hovered over

  let d = dist(mouseX, mouseY, width / 1.13, height / 12);

  if (d < 50 / 2) {

    circleStrokeWeight = 8;

  } else {

    circleStrokeWeight = 5;

  }

​

  //re-directing the user to the opening window if they click on the button

  if (d < 50 / 2 && mouseIsPressed && gameState == "instructions") {

    gameState = "start";

    buttonSound.play();

  }

​

  //creating the button itself

  textSize(10);

  strokeWeight(2);

  text("Back", width / 1.13, height / 11);

}

​

//the function of the main page

function drawMainPage() {

  //creating the title of the game

  textSize(35);

  stroke(252, 255, 51);

  strokeWeight(10);

  fill(255, 51, 236, 190);

  textFont(climate);

  text("Whack-A-Politician", width / 2, height / 4);

​

  //creating "Press any key to start"

  textSize(10);

  strokeWeight(3);

  text("Press any key to start", width / 2, height / 1.5);

​

  //creating the button for the instructions

  stroke(252, 255, 51);

  strokeWeight(rectStrokeWeight);

  fill(255, 51, 236, 230);

​

  //necessary dimensions ofthe rectangle

  let rectX = width / 2;

  let rectY = height / 1.3;

  let rectWidth = (3 * width) / 4 - width / 4;

  let rectHeight = height / 1.3 - height / 1.5;

  let rightRectX = rectX + rectWidth / 2;

  let leftRectX = rectX - rectWidth / 2;

  let upperRectY = rectY - rectHeight / 2;

  let lowerRectY = rectY + rectHeight / 2;

​

  //creating the rectangle itself

  rect(rectX, rectY, rectWidth, rectHeight, 20);

​

  // the text inside the rectangle

  textSize(10);

  strokeWeight(3);

  text("Click here for the Instructions", width / 2, height / 1.29);

​

  //highlighting the rectangle when mouse is hovered over the button

  if (

    mouseX > leftRectX &&

    mouseX < rightRectX &&

    upperRectY < mouseY &&

    mouseY < lowerRectY

  ) {

    rectStrokeWeight = 8;

  } else {

    rectStrokeWeight = 5;

  }

​

  //calling the "Instructions" window when the rectangle is clicked on

  if (

    mouseX > leftRectX &&

    mouseX < rightRectX &&

    upperRectY < mouseY &&

    mouseY < lowerRectY &&

    mouseIsPressed

  ) {

    gameState = "instructions";

    buttonSound.play();

  }

}

​

//function for the "playing" window (a.k.a) the game itself

function drawGame() {

  //creating a variable that is random integer 

  randomNumber = int(random(0, 9));

​

  //creating the ellipses

  image(bg, 0, 0, width, height);

  for (let i = 1; i < 7; i += 2) {

    //managing t he x coordinate of the circles and the image

    for (let j = 1; j < 7; j += 2) {

      //managing the y coordinate of the circles and the image

      strokeWeight(2);

      stroke(255, 255, 238);

      fill(221, 255, 238);

      let ellipseX = i * 70 + 25;

      let ellipseY = j * 50 + 175;

      let ellipseWidth = 120;

      let ellipseHeight = 50;

      ellipse(ellipseX, ellipseY, ellipseWidth, ellipseHeight);

    }

  }

​

  //calling the functions for my classes

  myCharacters.displayMole();//changing the position of the images

  myCharacters.update();//redirecting the user to either a "win" or "lose" window

}

​

  //the function that represents the time since the game started

function restartGame() {

  let now = round(millis() / 1000);

  gameTime = now;

}

​

  //the function that represents the restarted time every time the game is restarted

function millisInGame() {

  // Subtract when the game started from current time

  return round(millis() / 1000) - gameTime;

}

​

class Character {

  constructor(

    politicianX,

    politicianY,

    moleX,

    moleY,

    characterWidth,

    characterHeight

  ) {

    this.politicianX = 95;

    this.politicianY = 425;

    this.moleX = 235;

    this.moleY = 225;

    this.characterWidth = 100;

    this.characterHeight = 100;

  }

​

  displayMole() {

    //push and pop are used so that changing the image mode does not affect all the other images in the game 

    push();

    imageMode(CENTER);

​

    //displaying the image of the politician

    image(

      politicianImage,

      this.politicianX,

      this.politicianY,

      this.characterWidth,

      this.characterHeight

    );

    //displaying the image of the mole

    image(

      moleImage,

      this.moleX,

      this.moleY,

      this.characterWidth,

      this.characterHeight

    );

    pop();

​

    //creating the time rectangle

    fill(250);

    stroke(2);

    rect(width / 2, height / 4.5, width / 5, height / 1.3 - height / 1.5, 45);

    fill(0);

    strokeWeight(0);

    textSize(16);

    text("Time: " + millisInGame(), width / 2, height / 4.5);

​

    //setting the variable for when the mouse is over the politician's image

    let hoverPolitician =

      mouseX > this.politicianX - this.characterWidth/2 &&

      mouseX < this.politicianX + this.characterWidth/2 &&

      mouseY > this.politicianY - this.characterHeight/2 &&

      mouseY < this.politicianY + this.characterHeight/2;

​

    //setting the variable for when the mouse is over the mole's image

    let hoverMole =

      mouseX > this.moleX - this.characterWidth / 6 &&

      mouseX < this.moleX + this.characterWidth / 6 &&

      mouseY > this.moleY - this.characterHeight / 6 &&

      mouseY < this.moleY + this.characterHeight / 6;

​

    //pulling out random elements from my array

    this.randomNumberPolitician = int(random(0, 9));

    this.randomNumberMole = int(random(0, 9));

    //check if the integer is the same; if so, choose a different hole for the mole

    while (this.randomNumberPolitician == this.randomNumberMole) {

      hoverMole = false;

      this.randomNumberPolitician = int(random(0, 9));

      this.randomNumberMole = int(random(0, 9));

    }

​

    //changing the position of the politician if the image is clicked

    if (hoverPolitician && mouseIsPressed) {

      this.politicianX = arrayEllipses[this.randomNumberPolitician][0];

      this.politicianY = arrayEllipses[this.randomNumberPolitician][1];

      this.moleX = arrayEllipses[this.randomNumberMole][0];

      this.moleY = arrayEllipses[this.randomNumberMole][1];

      clicks++;

      buttonSound.play();

    }

​

    //redirecting the user to the "loss" window if the image of the mole is clicked 

    if (hoverMole && mouseIsPressed) {

      gameState = "loss";

      lossSound.play();

    }

​

    //drawing the box that holds the click number

    fill(250);

    strokeWeight(2);

    rect(width / 1.1, height / 4.5, width / 6, height / 1.3 - height / 1.5, 45);

    fill(0);

    strokeWeight(0);

    text(clicks + "/30", width / 1.1, height / 4.5);

  }

​

  update() {

    //checking if the politician has been clicked 30 times

    if (clicks == 30) {

      gameState = "win";

    }

    //checking if the user ran out of time and was unable to satisfy the requirement of the game 

    if (millisInGame() > 20 && clicks < 30) {

      gameState = "loss";

      lossSound.play();

    }

  }

}

​

​

function keyPressed() {

  //proceeding to the game window if the key is pressed on the starting window AND restarting the time every time that is done

  if (gameState == "start") {

    // Start the game

    gameState = "playing";

    buttonSound.play();

    restartGame();//allows me to restart the time for the game

    millisInGame();//allows me to represent the new time every time the game is restarted

  }

​

  //being able to go back to the main window and play again after the results were displayed

  if (gameState == "win" || gameState == "loss") {

    gameState = "start";

    mainSound.play();

    clicks = 0;

    restartGame();

    millisInGame();

  }

}

​

function drawWinScreen() {

  background(bg, width, height);

​

  mainSound.stop();

​

  stroke(252, 255, 51);

  strokeWeight(rectStrokeWeight);

  fill(255, 51, 236);

​

  rect(width / 2, height / 2, width, height / 2.5);

​

  textSize(57);

  strokeWeight(10);

  text("YOU WON!!!", width / 2, height / 2);

​

  fill(0);

  textFont(climate);

  textSize(20);

  strokeWeight(3);

  text("Press any key to restart", width / 2, height / 1.5);

}

​

function drawLossScreen() {

  background("yellow");

​

  mainSound.stop();

​

  fill(0);

  textSize(57);

  stroke(250);

  strokeWeight(10);

  text("YOU LOST:(", width / 2, height / 2);

​

  fill(0);

  textFont(climate);

  textSize(20);

  strokeWeight(3);

  text("Press any key to restart", width / 2, height / 1.5);

}

​