p5.js Web Editor | Final Project Racing Component

xxxxxxxxxx
/* Week 11.2 bidi serial example
 * Originally by Aaron Sherwood
 * Modified by Mangtronix
 *
 * Add this library to Sketch files
 *  https://github.com/mangtronix/IntroductionToInteractiveMedia/blob/master/code/p5.web-serial.js files
 *
 * You must include this line in your index.html (in Sketch Files) to load the
 * web-serial library
 *
 *     <script src="p5.web-serial.js"></script>
 *
 * Arduino code:
 * https://github.com/mangtronix/IntroductionToInteractiveMedia/blob/master/code/Week11Serial.ino
 */
​
let level = 0;
let racestate = 0;
let clicked = false;
let timedata;
let time = 0;
let highscores = [];
let scoresaved = 0;
​
​
function loadScores() {
  let storedScores = getItem("leaderboard");
  if (storedScores) {
    highscores = storedScores;
    console.log("Highscores loaded:", highscores);
  } else {
    console.log("No highscores found.");
  }
}
​
function saveScores() {
  // make changes to the highscores array here...
  storeItem("leaderboard", highscores);
  console.log("Highscores saved:", highscores);
}
​
function setup() {
  loadScores();
  highscores.sort((a, b) => a.time - b.time);
  createCanvas(640, 480);
  textSize(18);
}
​
function draw() {
  if (
    mouseX > width / 2 - 75 &&
    mouseX < width / 2 + 75 &&
    mouseY > height / 2 - 75 &&
    mouseY < height / 2 - 25 &&
    level == 0 &&
    clicked
  ) {
    level = 1;
    clicked = false;
    print("Play");
  }
​
  // Check if the mouse is inside the High Scores button
  if (
    mouseX > width / 2 - 75 &&
    mouseX < width / 2 + 75 &&
    mouseY > height / 2 + 25 &&
    mouseY < height / 2 + 75 &&
    level == 0 &&
    clicked
  ) {
    // Do something when the High Scores button is clicked
    clicked = false;
    level = 2;
    console.log("High Scores button clicked");
  }
  if (level == 0) {
    clicked = false;
    racestate = 0;
    scoresaved = 0;
    background(220);
    textSize(32);
    textAlign(CENTER);
    fill(0);
​
    // Play button
    rectMode(CENTER);
    fill(255, 0, 0);
    rect(width / 2, height / 2 - 50, 150, 50);
    fill(255);
    textSize(24);
    text("Play", width / 2, height / 2 - 40);
​
    // High Scores button
    rectMode(CENTER);
    fill(0, 255, 0);
    rect(width / 2, height / 2 + 50, 150, 50);
    fill(255);
    textSize(24);
    text("High Scores", width / 2, height / 2 + 60);
  } else if (level == 1) {
    background(220);
    textSize(32);
    textAlign(CENTER);
    fill(0);
​
    if (!serialActive) {
      rectMode(CENTER);
      fill(255, 0, 0);
      rect(width / 2, height / 2 - 50, 420, 50);
      fill(255);
      textSize(24);
      text("Press Space Bar to select Serial Port", width / 2, height / 2 - 40);
    } else if (racestate == 0) {
      rectMode(CENTER);
      fill(0, 255, 0);
      rect(width / 2, height / 2 - 50, 200, 50);
      fill(255);
      textSize(24);
      text("Ready to Race!", width / 2, height / 2 - 40);
    } else if (racestate == 1) {
      rectMode(CENTER);
      fill(0, 0, 255);
      rect(width / 2, height / 2 - 50, 200, 50);
      fill(255);
      textSize(24);
      text("Race In-Progress", width / 2, height / 2 - 40);
    } else if (racestate == 2) {
      rectMode(CENTER);
      fill(150, 150, 0);
      rect(width / 2, height / 2 - 50, 420, 50);
      fill(255);
      textSize(24);
      text(timedata, width / 2, height / 2 - 40);
      
      if(scoresaved == 0){
      
      let name = prompt(
        "Please enter your name to add your time to the leaderboards:"
      );
      if (name) {
        highscores.push({ name, time });
        highscores.sort((a, b) => a.time - b.time);
        highscores.splice(10); // Keep only the top 10 high scores
      }
      
      saveScores();
      scoresaved =1;
      }
          textSize(12);
    fill(255);
    text("< Main Menu", 37, 15);
​
    if (mouseX >= 5 && mouseX <= 145 && mouseY >= 10 && mouseY <= 40) {
      push();
      fill(0, 0, 0, 1);
      stroke(255);
      rect(5, 10, 145, 30);
      pop();
      if (clicked) {
        level = 0;
      }
    }
    }
  } else if (level == 2) {
    background(220);
    textSize(26);
    fill(255);
    let title = "Leaderboards";
    let titleWidth = textWidth(title);
    text(title, width / 2, height / 2 - 115);
    textSize(16);
    for (let i = 0; i < highscores.length; i++) {
      let scoreText = `${highscores[i].name}: ${highscores[i].time}`;
      text(scoreText, width / 2, 150 + i * 30 + 30);
    }
​
    textSize(12);
    fill(255);
    text("< Main Menu", 37, 15);
​
    if (mouseX >= 5 && mouseX <= 145 && mouseY >= 10 && mouseY <= 40) {
      push();
      fill(0, 0, 0, 1);
      stroke(255);
      rect(5, 10, 145, 30);
      pop();
      if (clicked) {
        level = 0;
      }
    }
  }
}
​
function keyPressed() {
  if (key == " ") {
    // important to have in order to start the serial connection!!
    setUpSerial();
  }
}
​
function mouseClicked() {
  if (!clicked) {
    clicked = true; // set the clicked variable to true
  }
  // Check if the mouse is inside the Play button
}
​
function readSerial(data) {
  ////////////////////////////////////
  //READ FROM ARDUINO HERE
  ////////////////////////////////////
​
  if (data != null) {
    // make sure there is actually a message
    // split the message
    let fromArduino = data;
    if (data == "") {
      racestate = 0;
    } else if (data == "Race started!") {
      print(data);
      racestate = 1;
    } else if (data != "Race started!") {
      racestate = 2;
      print(data);
      timedata = data;
​
      let pattern = /\d+(?:\.\d+)?/; // This regular expression matches one or more digits, optionally followed by a decimal point and more digits.
      let match = data.match(pattern);
      if (match) {
        time = parseInt(match[0]);
        console.log(time); // Output: 42
      }
      data = "";
    }
​
    //////////////////////////////////
    //SEND TO ARDUINO HERE (handshake)
    //////////////////////////////////
    let sendToArduino = "\n";
    writeSerial(sendToArduino);
  }
}
​
Cookies

Sketch Files

Console

Preview
