let circleX = 200;

let obstacles = [];

let xPositions = [];

let obstacleSpeed = 1; // Initial speed of obstacles

let speedIncrement = 0.4;

let score = 0;

let wonGame = false;

​

let startimage;

// A sketch that resizes itself to fill the window

// Mangtronix - 2020-09-30

// MIT License

​

​

let help = "Press f (possibly twice) to toggle fullscreen";

​

function preload() {

  startimage = loadImage('images/startimage.png');

  grass = loadImage('images/grass.png');

  playimage = loadImage('images/playimage.png');

  endimage = loadImage('images/endimage.png');

  horse = loadImage('images/horse.png');

  obstacle_1 = loadImage('images/obstacle_1.png');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  restartGame();

  print(help);

  xPositions = [windowWidth * (3 / 12), windowWidth * (5 / 12), windowWidth * (7 / 12), windowWidth * (9 / 12)];

}

​

function restartGame() {

  // Reset character position, lives, etc

  wonGame = false;

  gameState = 'start';

  circleX = 200; // Reset circle position if needed

  obstacles = []; // Clear the obstacles array

  score = 0; // Reset the score

  obstacleSpeed = 1; 

}

​

function draw() {

  background(220);

  if (gameState == 'start') {

    drawInstructions();

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

    drawGame();

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

    drawEndScreen();

  }

}

​

function drawInstructions() {

  //print('drawing instructions');

  background(255); // white

 textSize(20);

  startimage.resize(windowWidth, windowHeight);

  image(startimage, 0, 0);

    if (!serialActive) {

    text("Press Space Bar to select Serial Port", 20, 30);}

  // } else {

  //   text("Connected", 20, 30);

  // }

}

​

function drawGame() {

  background('#FFFFFF');

  // grass.resize(windowWidth, windowHeight);

  // image(grass, 0, 0);

  playimage.resize(windowWidth, windowHeight);

  image(playimage, 0, 0);

  // fill('#bae1ff');

  // rect(windowWidth*(2/12), 0, windowWidth*(2/12), windowHeight);

  // fill('#ffb3ba');

  // rect(windowWidth*(4/12), 0, windowWidth*(2/12), windowHeight);

  // fill('#ffffba');

  // rect(windowWidth*(6/12), 0, windowWidth*(2/12), windowHeight);

  // fill('#baffc9');

  // rect(windowWidth*(8/12), 0, windowWidth*(2/12), windowHeight);

  // let border = 30;

  // background('#009bb4');

  // // A rectangle

  // fill('#f39100');

  // noStroke();

  // rect(border, border, windowWidth - 2 * border, windowHeight - 2 * border);

  fill(0);

   let circleRadius = min(windowWidth, windowHeight) * 0.04; // Adjust the proportion as needed

  // ellipse(circleX, windowHeight * (2 / 3), circleRadius * 2, circleRadius * 2);

  image(horse, circleX - circleRadius, windowHeight * (2 / 3) - circleRadius, circleRadius * 2, circleRadius * 3);

​

  // ellipse(circleX, windowHeight*(2/3), 50, 50);

  // Use the received distance value to control the size of the ellipse

  // let ellipseSize = map(distance, 0, 100, 10, 200); // Map the distance to ellipse size

    // Create obstacles randomly

  if (frameCount % 40 === 0) {

    let randomIndex = floor(random(xPositions.length));

    let randomX = xPositions[randomIndex];

    let obstacle = new Obstacle(randomX);

    obstacles.push(obstacle);

  }

  if (frameCount % 4000 === 0) { 

    obstacleSpeed += speedIncrement; // Increase the speed

  }

  // Update and display obstacles

  for (let i = obstacles.length - 1; i >= 0; i--) {

    obstacles[i].speed = obstacleSpeed; // Update obstacle speed

    obstacles[i].update();

    obstacles[i].display();

  // Update and display obstacles

  for (let i = obstacles.length - 1; i >= 0; i--) {

    obstacles[i].update();

    obstacles[i].display();

    // Remove obstacles when they reach the bottom of the screen

    if (obstacles[i].offScreen()) {

      obstacles.splice(i, 1);

    }

  }

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

  let obstacle = obstacles[i];

  let distance = dist(circleX, windowHeight * (2 / 3), obstacle.x, obstacle.y);

  // let minDistance = 25 + obstacle.radius; // Radius of the circle + radius of the player

    let minDistance = obstacle.radius + (circleRadius / 2);

​

  if (distance < minDistance) {

    // gameOver();

    // return; // End the draw loop

        // Lost the game!

    wonGame = false;

    // Change to end game state

    gameState = 'end';

  } else if (obstacle.y > windowHeight && !obstacle.passed) {

      obstacle.passed = true; // Flag the obstacle as passed

      score++; // Increment the score when an obstacle is successfully avoided

    }

}

  rect(windowWidth*0.04, windowHeight*0.01, textSize(`Score: ${score}`)+windowWidth*0.1, windowHeight*0.05);

  fill(0);

  textSize(30);

  textStyle(BOLD);

  text(`Score: ${score}`, windowWidth*0.05, windowHeight*0.05);

  }

}

​

function keyPressed() {

  if (key == " ") {

    // important to have in order to start the serial connection!!

    setUpSerial();

  }

  if (keyCode === ENTER) {

     if (gameState == 'start') {

    // Start the game

    gameState = 'playing';

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

    // Magically win game on space bar

    if (key == ' ') {

      // Won game!

      wonGame = true;

      gameState = 'end';

    }

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

    restartGame();

  }

  }

}

​

function drawEndScreen() {

  if (wonGame)  {

    background('blue');

    text('You WON!!', 100, 200);

  } else {

  endimage.resize(windowWidth, windowHeight);

  image(endimage, 0, 0);

  textSize(150);

  textAlign(CENTER, CENTER);

    textStyle(BOLD);

  fill('#012495');

     text(`${score}`, windowWidth*0.8, windowHeight*0.65);

  }  

}

​

​

// This function will be called by the web-serial library

// with each new *line* of data. The serial library reads

// the data until the newline and then gives it to us through

// this callback function

function readSerial(data) {

  ////////////////////////////////////

  //READ FROM ARDUINO HERE

  ////////////////////////////////////

​

  if (data != null) {

    // make sure there is actually a message

    // split the message

    let fromArduino = split(trim(data), ",");

    // if the right length, then proceed

    if (fromArduino.length == 1) {

      // only store values here

      // do everything with those values in the main draw loop

      if (data === '1') {

      circleX = windowWidth*(3/12); // Change circle position if '1' is received

    } else if (data === '2') {

      circleX = windowWidth*(5/12); // Change circle position if '2' is received

    } else if (data === '3') {

      circleX = windowWidth*(7/12); // Change circle position if '3' is received

    } else if (data === '4') {

      circleX = windowWidth*(9/12); // Change circle position if '4' is received

    }

    }

​

    //////////////////////////////////

    //SEND TO ARDUINO HERE (handshake)

    //////////////////////////////////

    let sendToArduino = circleX + "\n";

    writeSerial(sendToArduino);

  }

}

​

​

class Obstacle {

  constructor(x) {

    this.x = x;

    this.y = 0;

    this.speed = obstacleSpeed; // Adjust speed as needed

    // this.radius = 20; // Radius of the circle

    this.radius = min(windowWidth, windowHeight) * 0.03;

  }

  update() {

    this.y += this.speed;

  }

  display() {

    fill(255, 0, 0);

    // ellipse(this.x, this.y, this.radius * 2, this.radius * 2);

    image(obstacle_1, this.x, this.y, this.radius * 2.5, this.radius * 2.5);

  }

  offScreen() {

    return this.y > windowHeight + this.radius; // Consider the radius for off-screen detection

  }

}

// function gameOver() {

//   noLoop(); // Stop the draw loop

//   textSize(32);

//   textAlign(CENTER, CENTER);

//   fill(255, 0, 0);

//   text("Game Over", windowWidth / 2, windowHeight / 2); // Display Game Over message

// }

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  xPositions = [windowWidth * (3 / 12), windowWidth * (5 / 12), windowWidth * (7 / 12), windowWidth * (9 / 12)];

}

​

function keyTyped() {

  // $$$ For some reason on Chrome/Mac you may have to press f twice to toggle. Works correctly on Firefox/Mac

  if (key === 'f') {

    toggleFullscreen();

  }

  // uncomment to prevent any default behavior

  // return false;

}

​

// Toggle fullscreen state. Must be called in response

// to a user event (i.e. keyboard, mouse click)

function toggleFullscreen() {

  let fs = fullscreen(); // Get the current state

  fullscreen(!fs); // Flip it!

}

​