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() } })