let gameState = 'play game';

let gameOver = false; 

​

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

let startImage; 

let tutorialImage; 

let playTutorialImage; 

let gameOverImage; 

let thankYouImage; 

​

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

let tutorialBoxAngle = 20; 

let noSkipBoxColor = '#6ec6cd';

let yesSkipBoxColor = '#ffb1a5';

​

let tutorialWidBox, tutorialHeiBox; 

let noXSkipBox, noYSkipBox, yesXSkipBox, yesYSkipBox;

​

// ================ 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;

​

function preload(){

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

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

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

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

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

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

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

}

​

function draw() {

  background(220);

  if (gameState == 'start'){

    startScreen();

  }

  else if (gameState == 'tutorial'){

    tutorialScreen();    

  }

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

    playTutorialScreen();

  }

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

    playGameScreen();

  }

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

    gameOverScreen();

  }

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

    thankYouScreen();

  }

}

​

// =============== SCREENS ===============

​

function startScreen(){

  image(startImage, 0, 0, windowWidth, windowHeight);

}

​

function tutorialScreen(){

  image(tutorialImage, 0, 0, windowWidth, windowHeight);

  tutorialBoxAngle = 20; 

  tutorialWidBox =  windowWidth / 3;

  tutorialHeiBox = windowHeight / 5; 

  noXSkipBox = (windowWidth * 2.7 )/ 5;

  noYSkipBox = windowHeight / 4; 

  yesXSkipBox = (windowWidth * 2.7 )/ 5;

  yesYSkipBox = windowHeight / 4 + windowHeight /4; 

  fill(noSkipBoxColor);

  rect (noXSkipBox, noYSkipBox, tutorialWidBox, tutorialHeiBox, tutorialBoxAngle); 

  fill(yesSkipBoxColor);

  rect (yesXSkipBox, yesYSkipBox, tutorialWidBox, tutorialHeiBox, tutorialBoxAngle); 

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

    noSkipBoxColor = '#3BAFC9';

  }

  else {

    noSkipBoxColor = '#6ec6cd'; 

  }

  if ((mouseX > yesXSkipBox && mouseX < yesXSkipBox + tutorialWidBox) && (mouseY > yesYSkipBox && mouseY < yesYSkipBox + tutorialHeiBox)){

    yesSkipBoxColor = '#E97A6A'; 

  }

  else {

    yesSkipBoxColor = '#ffb1a5';

  }

}

​

function playTutorialScreen(){

  image(playTutorialImage, 0, 0, windowWidth, windowHeight);

}

​

function playGameScreen(){

  image(playGameImage, 0, 0, windowWidth, windowHeight);

  noStroke();

  let playerHead = width / 33; // ~50 pixels

  let distanceApart = width/ 26 // ~65 pixels

  let player1 = new playerCharacters(player1Color, -distanceApart, 0, playerHead);

  let player2 = new playerCharacters(player2Color, distanceApart, 0, playerHead);

​

​

  player1.player1Moves();

  player2.player2Moves();

}

​

function gameOverScreen(){

  image(gameOverImage, 0, 0, windowWidth, windowHeight);

​

}

​

function thankYouScreen() {

  image(thankYouImage, 0, 0, windowWidth, windowHeight);

​

}

​

// =============== 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);

    }

  }

}

​

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

​

function mouseClicked(){

  if (gameState == 'start'){

    gameState = 'tutorial';

  }

  else if (gameState == 'tutorial'){

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

      gameState = 'play tutorial'; 

    }

    if ((mouseX > yesXSkipBox && mouseX < yesXSkipBox + tutorialWidBox) && (mouseY > yesYSkipBox && mouseY < yesYSkipBox + tutorialHeiBox)){

      gameState = 'play game';

    }  

  }

}

​

​

// =============== fullscreen functionalities ===============

function keyTyped() {

  if (key === 'f'){

    toggleFullScreen();

  }

}

​

function toggleFullScreen() {

  let fs = fullscreen();

  fullscreen(!fs); 

}

​

function windowResized() {

  // Resize the canvas when the window is resized (or fullscreen is toggled)

  resizeCanvas(windowWidth, windowHeight);

}

​

​