//

// Demo of using localStorage api to store high scores

// for a simple clicker game.

//

// See localStorage documentation here:

//   https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

//

// See also, my example videos on creating a state machine for a simple game.

//

// Jared Donovan, 2024.

//

//

​

// The most important functions to demo the local storage are:

//   getHighScores(), which retrieves previous high scores.

//   saveHighScore(), which saves a new score to the localStorage.

//   resetHighScores(), which resets it to empty.

​

// Get a list of high scores from local storage. If nothing has been

// stored yet, then return an empty array.

//

// NOTE: That localStorage only stores simple strings so for an array, 

//       we need to convert to a string in JSON format.

//

// SEE LINE 171 for where this is used.

//

function getHighScores(){

  // Get the string version of the high scores from local storage.

  let highScores = localStorage.getItem("highScores");

  // Convert from the string to an array using built-in JSON.parse.

  highScores = JSON.parse(highScores);

  // NOTE: It is possible that no previous high scores have been saved.

  //       In this case, 'highScores' will be equal to 'null'.

  //       It is probably best to return an empty array instead.

  if (highScores == null){

    highScores = [];

  }

  // Sort the scores in order from highest to lowest before returning.

  // Note: By default javascript sorts array items alphabetically, so

  //       we need to provide a custom sort function '(a, b) => b - a'

  highScores = highScores.sort((a, b) => b - a);

  return highScores;

}

​

// This is a function to save an array of high scores to localStorage so 

// it can be saved across browser sessions. If the browser window gets

// closed and reopened, the data should be saved.

//

// SEE LINE 121 for where this is used.

//

function saveHighScore(newScore){

  let highScores = getHighScores();

  // Push the new score on to the array of high scores.  

  highScores.push(newScore)

​

  // Before we store, use 'stringify' to format the highScores array as JSON!

  highScores = JSON.stringify(highScores);

​

  // Note that scores are not saved in sorted order.

  localStorage.setItem("highScores", highScores);

}

​

// This function resets the stored high scores to empty. This is useful if you

// are debugging and need to reset to the starting state.

//

// SEE LINE 225 for where this is used.

//

function resetHighScores(){

  localStorage.removeItem("highScores");

}

​

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

// 

// NOTE: The rest of the code is just to implement the simple clicking game.

//       All of the code for local storage is in the three functions above.

//

​

// Constants to represent which game state we are in.

const START = 0;

const GAME = 1;

const END = 2;

​

// Variable to record the current state.

let state = START;

​

// Variable to record the time that the user started playing (in milliseconds)

// They will get 10 seconds to click '2' as many times as possible.

// We won't know the value of this until the user actually starts the game 

// by pressing '1' (see keyPressed() function below)

let startTime;

const GAME_LENGTH = 5000;

​

// Variable to record the player score.

let score = 0;

​

// Setup function.

function setup() {

  createCanvas(400, 400);

  textAlign(CENTER, CENTER);

  textSize(24);

  textStyle(BOLD);

  textFont("monospace");

}

​

// Draw function redraws the screen depending on which state we

// are currently in. Also checks the time left if we are in the GAME

// state and ENDs the game if it runs out.

function draw() {

  // First, if the game is playing, check whether the time has run out.

  // If it has, then we should END the game, and record the score in the 

  // list of high scores.

  if (state === GAME){

    let timePlayed = millis() - startTime;

    if (timePlayed >= GAME_LENGTH){

      state = END;

      // Save the new score to the array of high scores stored in local storage.

      saveHighScore(score);

    }

  }

  if (state == START){

    drawStart();

  }

  else if (state == GAME){

    drawGame();

  }

  else if (state == END){

    drawEnd();

  }

}

​

// Function to draw the start screen, shown at the start of the game.

// Displays some instructional text and the top score to beat.

function drawStart(){

  background(255, 200, 200);

  text("TWO-TO-WIN", 200, 50);

  text("Press '2' as many times as you can to get a HIGH SCORE!", 50, 150, 300, 100);

  text("PRESS '1' TO START", 200, 350);

}

​

// Function to draw the game screen, shown while the game is running. 

// Will show the current number of times that the user has clicked. 

function drawGame(){

  background(200, 255, 200);

  text("PRESS '2' TO WIN", 200, 50);

  // Display the current score

  text("Score: " + score, 200, 200);

  // Figure out the time left (in seconds) so we can show the user

  let secondsPlayed = millis() - startTime;

  let secondsLeft = ceil((GAME_LENGTH - secondsPlayed) / 1000);

  text(secondsLeft + " seconds remaining", 200, 350);

}

​

// Function to draw the end screen, shown at the end of the game. 

// Displays a list of high scores.

function drawEnd(){

  background(200, 200, 255);

  text("TIME'S UP. FINAL SCORE: " + score, 200, 50);

  // Display a list of the top 5 scores so far

  let highS = getHighScores();

  text("-=: TOP 3 HIGH SCORES :=-", 200, 140)

  for (let i = 0; i < 3; i = i + 1){

    let y = 180 + 30 * i;

    let rank = i + 1;

    let nextScore = highS[i];

    // Check in case there hasn't been a high score recorded.

    // If one has been recorded, then display it.

    if (nextScore) {

      text("#" + rank + ": " + nextScore, 200, y);    

    }

    // If we haven't recorded a score for this rank yet, show a '_'

    else {

      text("#" + rank + ": _" , 200, y);          

    }

  }

  text("PRESS 'R' to RESET SCORES", 200, 320);

  text("PRESS '3' TO TRY AGAIN", 200, 350);

}

​

// This is a function to retrieve any high scores from localStorage

// that were saved previously. If no scores have been previously

// saved, the function returns an empty array.

// 

​

let highScores = [0, 0, 0];

​

// Keyboard event handler. This allows the user to start and reset the game, 

// as well as increase their score when in the GAME state.

// Note that the state transition from GAME to END is triggered by a timer

// counting down, which we check in the draw function.

function keyPressed(){

  // If '1' is pressed in the START state, then change to the GAME state.

  // Also, record the start time, so we know how long the user has to play for.

  // And, set the score to zero.

  if (state == START && key == "1" ){

    startTime = millis();

    score = 0;

    state = GAME;

  }

  // If '2' is pressed in the GAME state, then the score should increase.

  else if (state == GAME && key == "2"){

    score = score + 1;

  }

  // Otherwise, if '3' is pressed when in END state, then go back to START.

  else if (state == END && key == "3" ){

    state = START;

  }

  // Otherwise, if 'R' is pressed when in END state, then reset scores

  else if (state == END && key == "R" || key == "r"){

    resetHighScores();

  }

}