How to add more levels to a game in WoofJS

This tutorial explains how to add a second level to a game in WoofJS, as shown in the example below.

To implement a second level in your game, use the following code. Make sure you pay attention to the comments in the code that explain how it works.

// In this game there will be two levels
// Level 1 - Enemy stays still
// Level 2 - Background changes and enemy starts moving

setBackdropURL("http://www.codemahal.com/sprites/grass_background.png")

var score = 0
var time = 60
var speed = 5

// Create a variable to keep track of the current level
var level = 1

var newRound = new Sound({
  url: "./docs/sounds/round_new.mp3",
  loop: false,
  speed: "normal",
  volume: "normal"
})

var scoretext = new Text({
  text: "Score: 0", 
  size: 18, 
  x: minX + 20,
  y: maxY - 20,
  color: "yellow", 
  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
})

// Add a marker for the enemy to point to when it starts moving
var enemy1Location = new Image({
  width: 1, 
  height: 1,
})

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 score is greater than 10, start Level 2
  if(score > 10){
    // Set level variable to 2
    level = 2
  }
  
  // Check if level 2 has started
  if(level == 2){
    // Change backdrop image
    setBackdropURL("./docs/images/boss-backdrop.jpg")
    setBackdropStyle("cover")    // Start moving enemy
    
    enemy.move(5)
    // Scroll down to see code that makes enemy change direction
  }
  
  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
  }
  
  // End game when time is up
  if(time === 0){
    // Show game over message
    gameovertext.show()
    // Freeze game
    freeze()
  }

})

// Click the screen to restart game when game ends
onMouseDown(() => {
  if(time===0){
    score = 0
    time = 20
    scoretext.text = "Score: 0"
    gameovertext.hide()
    defrost()
    newRound.startPlaying()
  }
})

// Every 1 second...
every(1, 'second', () => {
  // Check if on level 2
  if(level == 2){
    // Make enemy marker move to random location
    enemy1Location.x = randomX()
    enemy1Location.y = randomY()
    // Point enemy towards marker location
    enemy.pointTowards(enemy1Location)
  }
})