let gameState = 'play game';

let gameOver = false; 

let roundSetup = false;

let insideHitBox = false; 

let musicPlaying= false; 

​

let gameRound = 4; 

let gameScore = 0;

let lives = 5; 

let bonusHeart = false;

let creaturePerRound = 2;

let maxCreatureOnScreen = 10; 

​

// ================ Game Sounds ================

let gameMusic; 

let menuMusic; 

​

​

// ================ Game Images ================

let startImage; 

let friendshipWarningImage;

let instructionImage; 

let tutorialImage; 

let playTutorialImage; 

let getReadyImage;

let gameOverImage; 

let thankYouImage;

​

// text images

let noTutorialImage;

let yesTutorialImage; 

let yesDanceAgainImage;

let noStoptheDanceImage; 

let gameTextFont; 

​

// arrows and letter button images 

let arrUP_ARROW, arrDOWN_ARROW, arrLEFT_ARROW, arrRIGHT_ARROW;

let arrUP_LETTER, arrDOWN_LETTER, arrLEFT_LETTER, arrRIGHT_LETTER;

​

let greenDOWN, greenUP, greenLEFT, greenRIGHT, greenW, greenA, greenS, greenD;

let pinkDOWN, pinkUP, pinkLEFT, pinkRIGHT, pinkW, pinkA, pinkS, pinkD;

let orangeDOWN, orangeUP, orangeLEFT, orangeRIGHT, orangeW, orangeA, orangeS, orangeD;

let greenComb, pinkComb, orangeComb;

​

​

// ================ Tutorial Variables ================

let tutorialBoxAngle = 20; 

let tutorial_creature = 2; 

let tutorial_creatureSpeed = 0.2; 

let noSkipBoxColor = '#6ec6cd';

let yesSkipBoxColor = '#ffb1a5';

​

let tutorialWidBox, tutorialHeiBox; 

let noXSkipBox, noYSkipBox, yesXSkipBox, yesYSkipBox;

​

let tutorialSetup = false; 

​

// ================ Game Over Variables ================

let endWidBox, endHeiBox; 

let noXEndBox, noYEndBox, yesXEndBox, yesYEndBox;

let endBoxAngle = 20; 

let noEndBoxColor = '#6ec6cd';

let yesEndBoxColor = '#ffb1a5';

​

// ================ Player Variables ================

let amplitude = 2;  // Height of the bobbing

let frequency = 0.09;  // Speed of the bobbing

let player1Color = '#F66954E5';

let player2Color = '#25A4ADE8';

let xPlayerHead, yPlayerhead;

let widthPlayer, heightPlayer; 

​

// ================ Creature Variables ================

let scaleComb; // scale for the arrow images to appear

let delayTime = 200; // 300 millisecond delay between user input

let lastRemoveTime = 0; // time since the last arrow/letter removal

let fadeInSpeed = 1; // spawn fade-in speed

let xHitBox, yHitBox; // closest the creatures can be to the characters 

​

let creatureSpeedFactor = 1; // inital creature speed 

let creatureTint = 10; // inital transparent of the creature 

let creatureColor = {easy: [96, 195, 54, creatureTint], medium: [210, 68, 210, creatureTint] , hard: [245, 130, 25, creatureTint]};

​

let greenPerRound, pinkPerRound, orangePerRound; 

// ***** GREEN (easy creatures) *****

let greenNumberofComb = 4; // number of combination for green_ creatures 

let greenSpeedx, greenSpeedy; 

let greenPoints = 4;

let greenCreaturesArr = []

​

// ***** PINK (medium creatures)*****

let pinkNumberofComb = 6; // number of combination for pink_ creatures 

let pinkSpeedx, pinkSpeedy; 

let pinkPoints = 6; 

let pinkCreaturesArr = []

​

// ***** ORANGE (hard creatures)*****

let orangeNumberofComb = 8; // number of combination for orange_ creatures 

let orangeSpeedx, orangeSpeedy; 

let orangePoints = 8;

let orangeCreaturesArr = []

​

​

function preload(){

  // background images 

  startImage = loadImage('/background_images/startingScreen.png');

  friendshipWarningImage = loadImage('/background_images/friendshipWarning.png')

  instructionImage = loadImage('/background_images/instructions.png');

​

  tutorialImage = loadImage('/background_images/tutorial.png');

  playTutorialImage = loadImage('/background_images/playTutorial.png');

  playGameImage = loadImage('/background_images/playGame.png');

  getReadyImage = loadImage('/background_images/getReady.png');

  gameOverImage = loadImage('/background_images/gameOver.png');

  thankYouImage = loadImage('/background_images/thankyou.png');

  gameTextFont = loadFont('/_text/gameFont.ttf')

  noTutorialImage = loadImage('/_text/noTutorial.png');

  yesTutorialImage = loadImage('/_text/yesTutorial.png');

  yesDanceAgainImage = loadImage('/_text/yesDanceAgain.png');

  noStoptheDanceImage = loadImage('/_text/noStoptheDance.png');

  // green arrow and letter images 

  greenDOWN = loadImage('/_arrows/greenDOWN.png');

  greenUP = loadImage('/_arrows/greenUP.png');

  greenLEFT = loadImage('/_arrows/greenLEFT.png');

  greenRIGHT = loadImage('/_arrows/greenRIGHT.png');

  greenW = loadImage('/_letters/greenW.png');

  greenA = loadImage('/_letters/greenA.png');

  greenS = loadImage('/_letters/greenS.png');

  greenD = loadImage('/_letters/greenD.png');

  // pink arrow and letter images 

  pinkDOWN = loadImage('/_arrows/pinkDOWN.png');

  pinkUP = loadImage('/_arrows/pinkUP.png');

  pinkLEFT = loadImage('/_arrows/pinkLEFT.png');

  pinkRIGHT = loadImage('/_arrows/pinkRIGHT.png');

  pinkW = loadImage('/_letters/pinkW.png');

  pinkA = loadImage('/_letters/pinkA.png');

  pinkS = loadImage('/_letters/pinkS.png');

  pinkD = loadImage('/_letters/pinkD.png');

  // orange arrow and letter images 

  orangeDOWN = loadImage('/_arrows/orangeDOWN.png');

  orangeUP = loadImage('/_arrows/orangeUP.png');

  orangeLEFT = loadImage('/_arrows/orangeLEFT.png');

  orangeRIGHT = loadImage('/_arrows/orangeRIGHT.png');

  orangeW = loadImage('/_letters/orangeW.png');

  orangeA = loadImage('/_letters/orangeA.png');

  orangeS = loadImage('/_letters/orangeS.png');

  orangeD = loadImage('/_letters/orangeD.png');

  // sounds

  gameMusic = loadSound('_sounds/gameMusic.mp3');

  menuMusic = loadSound('_sounds/menuMusic.mp3');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  frameRate(120);

  arrUP_ARROW = [greenUP, pinkUP, orangeUP];

  arrDOWN_ARROW = [greenDOWN, pinkDOWN, orangeDOWN];

  arrLEFT_ARROW = [greenLEFT, pinkLEFT, orangeLEFT];

  arrRIGHT_ARROW = [greenRIGHT, pinkRIGHT, orangeRIGHT];

  arrUP_LETTER = [greenW, pinkW, orangeW];

  arrDOWN_LETTER = [greenS, pinkS, orangeS];

  arrLEFT_LETTER = [greenA, pinkA, orangeA];

  arrRIGHT_LETTER = [greenD, pinkD, orangeD];

  greenSpeedx = width / 825 ; // 2

  greenSpeedy = height/ (height/0.63); // 1 

  greenComb = [greenDOWN, greenUP, greenLEFT, greenRIGHT, greenW, greenA, greenS, greenD];

  pinkSpeedx = width / 945;  // 3

  pinkSpeedy = height/ (height/0.6);  

  pinkComb = [pinkDOWN, pinkUP, pinkLEFT, pinkRIGHT, pinkW, pinkA, pinkS, pinkD];

  orangeSpeedx = width / 1110; // 1.5 

  orangeSpeedy = height/ (height/0.35); 

  orangeComb = [orangeDOWN, orangeUP, orangeLEFT, orangeRIGHT, orangeW, orangeA, orangeS, orangeD];

}

​

function draw() {

  background(220);

  // console.log(gameState);

  if (!musicPlaying){

    playMusic();

    musicPlaying = true;

  }

  if (gameState == 'start'){

    startScreen();

  }

  else if(gameState == 'friendship warning'){

    showFriendShipWarning(); 

  }

  else if (gameState == 'instructions') {

    showInstructionScreen(); 

  }

  else if (gameState == 'tutorial'){

    tutorialScreen();    

  }

  else if (gameState == 'play tutorial'){

    playTutorialScreen();

  }

  else if (gameState == 'get ready'){

    showGetReady();

  }

  else if (gameState == 'play game') {

    playGameScreen();

  }

  else if (gameState == 'game over') {

    gameOverScreen();

  }

  else if (gameState == 'thank you') {

    thankYouScreen();

  }

}

​

function resetGame(){

    gameScore = 0; // reset score to zero

    gameRound = 1; 

    lives = 6;

    creaturePerRound = 2;

    greenCreaturesArr = [];

    pinkCreaturesArr = [];

    orangeCreaturesArr = [];

    roundSetup = false; 

}

​

function playMusic(){

  if (gameState == 'get ready' || gameState == 'tutorial'){

    gameMusic.loop();

  }

  else if(gameState == 'start' || gameState == 'game over'){

    menuMusic.loop();

  }

}

​

function hearts() {

  fill(255, 0, 0, 150); // Red color for the heart

  stroke(height/515);

  let heartSize = height/40; 

  let heartX = width/2 -  0.43 * (lives * ((heartSize) + (height/ 75))) + width/ 130;

  let heartY = (height/2 - height/20) + sin(frameCount * frequency) * amplitude; 

​

  for (let i = 0; i < lives; i++){

    // Draw left and right top arcs of the heart

    beginShape();

​

    // Left half of the heart

    vertex(heartX, heartY + heartSize * 0.25); // Bottom center

    bezierVertex(heartX - heartSize, heartY - heartSize * 0.5, heartX - heartSize * 0.5, heartY - heartSize, heartX, heartY - heartSize * 0.3);

​

    // Right half of the heart

    bezierVertex(heartX + heartSize * 0.5, heartY - heartSize, heartX + heartSize, heartY - heartSize * 0.5, heartX, heartY + heartSize * 0.25);

​

    endShape(CLOSE);

    heartX += heartSize + (height/ 75);

  }  

}

​

function showRound(xRound, yRound) {

  textFont(gameTextFont);

  fill('#66a6ab')

  strokeWeight(height/171)

  textSize(height/9);

  textAlign(LEFT, CENTER); 

  text(gameRound, xRound, yRound); 

  strokeWeight(1)

}

​

function showScore(xScore, yScore, scoreSize){

  textFont(gameTextFont);

  fill('#66a6ab')

  strokeWeight(height/171)

​

  textSize(scoreSize);

  textAlign(LEFT, CENTER); 

  text(gameScore, xScore, yScore); 

  strokeWeight(1)

}

​

function creatureOnScreen(numGreenCreatures, numberPinkCreatures, numberOrangeCreatures){  

  if (gameState == 'play tutorial'){

    for (let i = 0; i < numGreenCreatures; i++){

      greenCreature = new creatureSpawn(creatureColor.easy, greenComb, greenNumberofComb, tutorial_creatureSpeed, tutorial_creatureSpeed, width, 0);

      greenCreaturesArr.push(greenCreature);

    }

  }

  else if(gameState == 'play game'){

    for (let i = 0; i < numGreenCreatures; i++){

    greenCreature = new creatureSpawn(creatureColor.easy, greenComb, greenNumberofComb, greenSpeedx, greenSpeedy, width, 0);

    greenCreaturesArr.push(greenCreature);

    }

    for (let i = 0; i < numberPinkCreatures; i++){

      pinkCreature = new creatureSpawn(creatureColor.medium, pinkComb, pinkNumberofComb, pinkSpeedx, pinkSpeedy, width, 0);

      pinkCreaturesArr.push(pinkCreature);

    }

​

    for (let i = 0; i < numberOrangeCreatures; i++){

      orangeCreature = new creatureSpawn(creatureColor.hard, orangeComb, orangeNumberofComb, orangeSpeedx, orangeSpeedy, width, 0);

      orangeCreaturesArr.push(orangeCreature);

    }

  }

}

​

// FUNCTION THAT GENERATES THE NUMBER OF CREATURES 

function creatureRandomizer(roundCreatures) {

  greenPerRound = 0;

  pinkPerRound = 0;

  orangePerRound = 0;

  for (let i = 0; i < creaturePerRound; i++){

    let randCreature = random(roundCreatures);

    if (randCreature === 'greenCreature'){

      greenPerRound += 1;

    }

    else if (randCreature === 'pinkCreature'){

      pinkPerRound += 1;

    }

    else if(randCreature === 'orangeCreature'){

      orangePerRound += 1; 

    }

  }

}

​

// =============== CHARACTER CLASS ===============

class playerCharacters {

  // x1Body, y1Body, x2Body, y2Body, x3Body, y3Body,

  constructor(playerColor, xHead, yHead, headSize){

    this.amp = amplitude; 

    this.freq = frequency;

    this.playerColor = playerColor; 

    this.xHead = xHead + width / 2;

    this.yHead = yHead + height / 2 + sin(frameCount * this.freq) * this.amp;

    this.headSize = headSize; 

    this.x1Body = this.xHead - width/75;

    this.y1Body = this.yHead + height/6.5;

    this.x2Body = this.xHead - width/75;

    this.y2Body = this.yHead + height/960; 

    this.x3Body = this.xHead + width/75;

    this.y3Body = this.yHead + height/960;   

    this.x4Body = this.xHead + width/75;

    this.y4Body = this.yHead + height/6.5;

    this.showBody = true; 

    // =============== PLAYER VARIATIONS ===============

    // Up-Arrow & Down-Arrow + W key & S key

    this.yHead_UP_key = height/100; // ~8 pixels

    this.yHead_DOWN_key = width / 33; // ~50 pixels

    this.playerUpDownVariation = width / 33; // ~50 pixels

    // Right-Arrow and D key

    this.xHead_RIGHT_key = width/ 45; // ~37 pixels

    this.yHead_RIGHT_key = height/ 56; // ~18 pixels

    this.x1Body_RIGHT_key = width / 165; // ~10 pixels

    this.x2Body_RIGHT_key = width / 42; // ~35 pixels

    this.x3Body_RIGHT_key = width / 33; // ~50 pixels

    this.x4Body_RIGHT_key = width / 83; // ~20 pixels

    this.y3Body_RIGHT_key = height / 56; // ~18 pixels

    this.y4Body_RIGHT_key = height / 56; // ~18 pixels

    // Left-Arrow and A key

    this.xHead_LEFT_key = width/ 45; // ~37 pixels

    this.yHead_LEFT_key = height/ 56; // ~18 pixels

    this.x1Body_LEFT_key = width / 83; // ~20 pixels

    this.x2Body_LEFT_key =  width / 33; // ~50 pixels

    this.x3Body_LEFT_key =  width / 48; // ~18 pixels

    this.x4Body_LEFT_key = width / 165; // ~10 pixels

    this.y3Body_LEFT_key = height / 56; // ~18 pixels

    this.y4Body_LEFT_key = height / 56; // ~18 pixels

​

​

  }

  player1Moves() {

    fill(this.playerColor);

    if (keyIsDown(UP_ARROW)) {

      circle(this.xHead, this.yHead - this.yHead_UP_key, this.headSize);  

​

      let y1temp = this.y1Body - this.playerUpDownVariation; 

      let y4temp = this.y4Body - this.playerUpDownVariation; 

      bezier(this.x1Body, y1temp, this.x2Body, this.y2Body, this.x3Body, this.y3Body, this.x4Body, y4temp);

    } 

    else if (keyIsDown(DOWN_ARROW)){

      circle(this.xHead, this.yHead + this.yHead_DOWN_key, this.headSize);  

      let y2temp = this.y2Body + this.playerUpDownVariation; 

      let y3temp = this.y3Body + this.playerUpDownVariation; 

      bezier(this.x1Body, this.y1Body, this.x2Body, y2temp, this.x3Body, y3temp, this.x4Body, this.y4Body);

    }

    else if (keyIsDown(RIGHT_ARROW)){

      circle(this.xHead + this.xHead_RIGHT_key, this.yHead + this.yHead_RIGHT_key, this.headSize); 

      let x1temp = this.x1Body + this.x1Body_RIGHT_key;

      let x4temp = this.x4Body + this.x4Body_RIGHT_key;

      let x2temp = this.x2Body + this.x2Body_RIGHT_key;

      let y2temp = this.y2Body + this.y3Body_RIGHT_key;

      let x3temp = this.x3Body + this.x3Body_RIGHT_key;

      let y3temp = this.y3Body + this.y4Body_RIGHT_key;

      bezier(x1temp, this.y1Body, x2temp, y2temp, x3temp, y3temp, x4temp, this.y4Body);     

    }

    else if (keyIsDown(LEFT_ARROW)){

      circle(this.xHead - this.xHead_LEFT_key, this.yHead + this.yHead_LEFT_key, this.headSize); 

      let x1temp = this.x1Body - this.x1Body_LEFT_key;

      let x4temp = this.x4Body - this.x4Body_LEFT_key;

      let x2temp = this.x2Body - this.x2Body_LEFT_key;

      let y2temp = this.y2Body + this.y3Body_LEFT_key;

      let x3temp = this.x3Body - this.x3Body_LEFT_key;

      let y3temp = this.y3Body + this.y4Body_LEFT_key;

      bezier(x1temp, this.y1Body, x2temp, y2temp, x3temp, y3temp, x4temp, this.y4Body);  

    }

    else {

      circle(this.xHead, this.yHead, this.headSize);  

      bezier(this.x1Body, this.y1Body, this.x2Body, this.y2Body, this.x3Body, this.y3Body, this.x4Body, this.y4Body);

    }

  }

  player2Moves() {

    fill(this.playerColor);

    if (keyIsDown(87)) { // w key 

      circle(this.xHead, this.yHead - height/100, this.headSize);  

​

      let y1temp = this.y1Body - this.playerUpDownVariation; 

      let y4temp = this.y4Body - this.playerUpDownVariation; 

      bezier(this.x1Body, y1temp, this.x2Body, this.y2Body, this.x3Body, this.y3Body, this.x4Body, y4temp);

    } 

    else if (keyIsDown(83)){ // s key

      circle(this.xHead, this.yHead + (width) / 33, this.headSize);  

      let y2temp = this.y2Body + this.playerUpDownVariation; 

      let y3temp = this.y3Body + this.playerUpDownVariation; 

      bezier(this.x1Body, this.y1Body, this.x2Body, y2temp, this.x3Body, y3temp, this.x4Body, this.y4Body);

    }

    else if (keyIsDown(68)){ // d key

      circle(this.xHead + this.xHead_RIGHT_key, this.yHead + this.yHead_RIGHT_key, this.headSize); 

      let x1temp = this.x1Body + this.x1Body_RIGHT_key;

      let x4temp = this.x4Body + this.x4Body_RIGHT_key;

      let x2temp = this.x2Body + this.x2Body_RIGHT_key;

      let y2temp = this.y2Body + this.y3Body_RIGHT_key;

      let x3temp = this.x3Body + this.x3Body_RIGHT_key;

      let y3temp = this.y3Body + this.y4Body_RIGHT_key;

      bezier(x1temp, this.y1Body, x2temp, y2temp, x3temp, y3temp, x4temp, this.y4Body);     

    }

    else if (keyIsDown(65)){ // a key

      circle(this.xHead - this.xHead_LEFT_key, this.yHead + this.yHead_LEFT_key, this.headSize); 

      let x1temp = this.x1Body - this.x1Body_LEFT_key;

      let x4temp = this.x4Body - this.x4Body_LEFT_key;

      let x2temp = this.x2Body - this.x2Body_LEFT_key;

      let y2temp = this.y2Body + this.y3Body_LEFT_key;

      let x3temp = this.x3Body - this.x3Body_LEFT_key;

      let y3temp = this.y3Body + this.y4Body_LEFT_key;

      bezier(x1temp, this.y1Body, x2temp, y2temp, x3temp, y3temp, x4temp, this.y4Body);  

    }

    else {

      circle(this.xHead, this.yHead, this.headSize);  

      bezier(this.x1Body, this.y1Body, this.x2Body, this.y2Body, this.x3Body, this.y3Body, this.x4Body, this.y4Body);

    }

  }

  playerHitBox(otherPlayer) {

    fill(0,0,0,180)

    heightPlayer =  this.y1Body - (this.yHead - this.headSize) + height/20;

​

    widthPlayer = this.x4Body - otherPlayer.x1Body+ width/15;  

    xHitBox = width/2;

    yHitBox = height/2 + heightPlayer/4 + height/150;

    // uncomment to see the hitbox 

    // circle(this.x4Body, this.y4Body, 10)

    // circle(otherPlayer.x1Body, otherPlayer.y1Body, 10)

    // rect(xHitBox - widthPlayer/2, yHitBox - heightPlayer/2, widthPlayer, heightPlayer, 20)

  }

}

​

// =============== CREATURE CLASS ===============

class creatureSpawn {

  constructor(creatureColor, arrLetterArrow, numberOfComb, creatureSpeedx, creatureSpeedy, xCreature, yCreature){

    this.creatureRed = creatureColor[0];

    this.creatureGreen = creatureColor[1];

    this.creatureBlue = creatureColor[2];

    this.creatureTint = creatureColor[3]; 

    this.arrLetterArrow = arrLetterArrow; 

    this.numberOfComb = numberOfComb; 

    this.creatureSpeedx = creatureSpeedx;

    this.creatureSpeedy = creatureSpeedy;

    this.hitBox = false; 

    this.xCreature = this.spawn_point().x; 

    this.yCreature = this.spawn_point().y; 

    this.xCombArr = xCreature - scaleComb * this.numberOfComb / 2;

    this.yCombArr = (yCreature - (scaleComb * 1.85)) + height / 2 + sin(frameCount * this.freq) * this.amp; 

    // Generate the combination once and store it

    this.genCombArr = this.generate_combination();    

  }

  controls() {

    // ******* ARROW *******

    if (keyIsDown(UP_ARROW) && this.genCombArr.length > 0 && arrUP_ARROW.includes(this.genCombArr[0].img)) {

      let currTime = millis();

      if (currTime - lastRemoveTime > delayTime) {

        this.genCombArr.shift();

        this.realignImages();

        lastRemoveTime = currTime;

      }

    }

    else if (keyIsDown(DOWN_ARROW) && this.genCombArr.length > 0 && arrDOWN_ARROW.includes(this.genCombArr[0].img)) {

      let currTime = millis();

      if (currTime - lastRemoveTime > delayTime) {

        this.genCombArr.shift();

        this.realignImages();

        lastRemoveTime = currTime;

      }

    }

    else if (keyIsDown(LEFT_ARROW) && this.genCombArr.length > 0 && arrLEFT_ARROW.includes(this.genCombArr[0].img)) {

      let currTime = millis();

      if (currTime - lastRemoveTime > delayTime) {

        this.genCombArr.shift();

        this.realignImages();

        lastRemoveTime = currTime;

      }

    }

    else if (keyIsDown(RIGHT_ARROW) && this.genCombArr.length > 0 && arrRIGHT_ARROW.includes(this.genCombArr[0].img)) {

      let currTime = millis();

      if (currTime - lastRemoveTime > delayTime) {

        this.genCombArr.shift();

        this.realignImages();

        lastRemoveTime = currTime;

      }

    }

    // ******* LETTERS *******

    if (keyIsDown(87) && this.genCombArr.length > 0 && arrUP_LETTER.includes(this.genCombArr[0].img)) { // w key 

      let currTime = millis();

      if (currTime - lastRemoveTime > delayTime) {

        this.genCombArr.shift();

        this.realignImages();

        lastRemoveTime = currTime;

      }

    }

    else if (keyIsDown(83) && this.genCombArr.length > 0 && arrDOWN_LETTER.includes(this.genCombArr[0].img)) {

      let currTime = millis();

      if (currTime - lastRemoveTime > delayTime) {

        this.genCombArr.shift();

        this.realignImages();

        lastRemoveTime = currTime;

      }

    }

    else if (keyIsDown(65) && this.genCombArr.length > 0 && arrLEFT_LETTER.includes(this.genCombArr[0].img)) {

      let currTime = millis();

      if (currTime - lastRemoveTime > delayTime) {

        this.genCombArr.shift();

        this.realignImages();

        lastRemoveTime = currTime;

      }

    }

    else if (keyIsDown(68) && this.genCombArr.length > 0 && arrRIGHT_LETTER.includes(this.genCombArr[0].img)) {

      let currTime = millis();

      if (currTime - lastRemoveTime > delayTime) {

        this.genCombArr.shift();

        this.realignImages();

        lastRemoveTime = currTime;

      }

    }

  }

  // ******* COMBINATION *******

  draw_Combinations() {

    scaleComb = width/ 30;

    for (let i = 0; i < this.genCombArr.length; i++) {

      let comb = this.genCombArr[i];

      if (comb.creatureTint < 255){

        comb.creatureTint += fadeInSpeed; 

      }

      comb.x = this.xCreature - scaleComb * this.numberOfComb / 2 + i * scaleComb;

      comb.y = this.yCreature - (scaleComb * 1.7);

      tint(255, comb.creatureTint);

      image(comb.img, comb.x, comb.y, scaleComb, scaleComb);

      noTint(); // Reset the tint after drawing

​

    }

  }

  // ******* CREATURE *******

  draw_Creature() {

    fill(this.creatureRed, this.creatureGreen, this.creatureBlue, this.creatureTint);

    let creatureSize = width / 25;

    circle(this.xCreature, this.yCreature, creatureSize);

​

    // Calculate direction towards center

    let dx = xHitBox - this.xCreature;

    let dy = yHitBox - this.yCreature;

​

    // Calculate distance to center

    let distance = dist(this.xCreature, this.yCreature, xHitBox, yHitBox);

​

    // Check if creature is inside rectangular hitbox with a buffer

    let insideRectangle = this.xCreature > xHitBox - widthPlayer / 2 &&

                        this.xCreature < xHitBox + widthPlayer / 2 &&

                        this.yCreature > yHitBox - heightPlayer / 2 &&

                        this.yCreature < yHitBox + heightPlayer / 2;

​

    if (this.creatureTint < 255) {

      this.creatureTint += fadeInSpeed;

    }

​

    if (!insideRectangle) {

      // Move creature towards center

      this.xCreature += dx / distance * this.creatureSpeedx;

      this.yCreature += dy / distance * this.creatureSpeedy;

      this.hitBox = false;

    } else {

      this.hitBox = true;

    }

​

    return this.hitBox;

  }

  windowResize_Creature(){

    this.xCreature = this.spawn_point().x; 

    this.yCreature = this.spawn_point().y; 

    this.genCombArr = this.generate_combination();

  }

  realignImages(){

    this.xCombArr = this.xCreature - (scaleComb * this.genCombArr.length / 2); 

    for(let i = 0; i < this.genCombArr.length; i++){

      this.genCombArr[i].x = this.xCombArr; 

      this.xCombArr += scaleComb; 

    }

  }

  generate_combination(){

    let creatureCombArr = []; 

    for(let i = 0; i < this.numberOfComb; i++) {

      let im = random(this.arrLetterArrow); 

      creatureCombArr.push({img: im, x: this.xCombArr, y: this.yCombArr, creatureTint: this.creatureTint }); 

      this.xCombArr += scaleComb;

    }

    return creatureCombArr; 

  }

  spawn_point() {

    let borderWidth = width / 700; 

    let borderHeight = height / 300;

    let points = [];

​

    // Left edge

    let yRandomLeft = random(0, height);

    points.push({x: random(0, borderWidth), y: yRandomLeft});

​

    // Right edge

    let yRandomRight = random(0, height);

    points.push({x: random(width - borderWidth, width), y: yRandomRight});

​

    // Top edge

    let xRandomTop = random(0, width);

    points.push({x: xRandomTop, y: random(0, borderHeight)});

​

    // Bottom edge

    let xRandomBottom = random(0, width);

    points.push({x: xRandomBottom, y: random(height - borderHeight, height)});

    return random(points);

  }

  isCombLeft() {

    return this.genCombArr.length;

  } 

}

​

// =============== MOUSE CLICKED ===============

function mouseClicked(){

  if (gameState == 'start'){

    gameState = 'friendship warning';

  }

  else if(gameState == 'friendship warning'){

    gameState = 'tutorial';

​

  }

  else if (gameState == 'tutorial'){

    if ((mouseX > noXSkipBox && mouseX < noXSkipBox + tutorialWidBox) && (mouseY > noYSkipBox && mouseY < noYSkipBox + tutorialHeiBox)){