How to add a high score to a game in WoofJS

This tutorial explains how to add a high score to a game in WoofJS, as shown in the example below. To add a high score, we will need to use the localStorage.getItem() and localStorage.setItem() functions.

To add a high score, create a new project at woofjs.com and use the following code. Pay attention to the comments in the code that explain how it works.

// To add a permanent high score to the game, we will use localStorage.
// localStorage allows you to save information to the user's computer
// that will still be there if they restart the game or leave the
// game and come back later. In this game, we will have a highscore
// variable that will be used in the game called 'highscore' and 
// a localStorage variable called 'myhighscore' that will be stored
// outside the game program and on the user's computer.

// Look for the notes below on how to update and retrieve a high score.

setBackdropURL("https://www.codemahal.com/sprites/blue_background.png")

// Create the score variable
var score = 0

// Create high score variable. Retrieve existing high score but if
// it doesn't exist, then create high score and set it to zero.
var highscore = localStorage.getItem("myhighscore") || 0

var time = 20
var speed = 5

// This text displays the score
var scoretext = new Text({
  text: "Score: " + score, 
  size: 18, 
  x: minX + 20,
  y: maxY - 20,
  color: "yellow", 
  fontFamily: "arial", 
  textAlign: "left"
})

// This text displays the high score
var highscoretext = new Text({
  text: "High score: " + highscore, 
  size: 18, 
  x: minX + 20,
  y: maxY - 40,
  color: "lightyellow", 
  fontFamily: "arial", 
  textAlign: "left"
})

var timetext = new Text({
  text: "Time remaining: 20", 
  size: 18, 
  x: maxX - 200,
  y: maxY - 20,
  color: "red", 
  fontFamily: "arial", 
  textAlign: "left"
})

var gameovertext = new Text({
  text: "GAME OVER!", 
  size: 40, 
  x: 0,
  y: -50,
  color: "blue", 
  fontFamily: "Comic Sans ms", 
})

gameovertext.hide()

every(1, 'second', () => {
  if (time !== 0) {
    time -= 1
    timetext.text = "Time remaining: " + time
  }
})

var player = new Image({
  url: "http://www.codemahal.com/sprites/player.gif",
  width: 30, 
  height: 30,
  x: 0,
  y: 0
})

var enemy = new Image({
  url: "http://www.codemahal.com/sprites/enemy.png",
  width: 30, 
  height: 30,
  x: 50,
  y: 100
})


forever(() => {
  if (player.x > maxX) {
    player.x = maxX
  }
  if (player.x < minX) {
    player.x = minX
  }
  
  if (player.y > maxY) {
    player.y = maxY
  }
  if (player.y < minY) {
    player.y = minY
  }
  
  if (keysDown.includes('UP')) {
    player.y += speed
  }
  
  if (keysDown.includes('DOWN')) {
    player.y -= speed
  }
  
  if (keysDown.includes('LEFT')) {
    player.x -= speed
  }
  
  if (keysDown.includes('RIGHT')) {
    player.x += speed
  }
  
  if(player.touching(enemy)){
    enemy.x = random(minX, maxX)
    enemy.y = random(minY, maxY)
    score += 1
    scoretext.text = "Score: " + score
  }
  
  // Check if player has beaten high score
  if(score > highscore){
    // Set in-game high score variable to current score
    highscore = score
    // Update text to display new high score
    highscoretext.text = "High score:" + highscore
    // Store high score permanently on player's computer
    localStorage.setItem("myhighscore", highscore)
  }
  
  if(time === 0){
    gameovertext.show()
    freeze()
  }

})

onMouseDown(() => {
  if(time===0){
    score = 0
    time = 20
    scoretext.text = "Score: 0"
    gameovertext.hide()
    defrost()
  }
})