Как реализовать переход уровней?

Question

[Павел Орловский]

Здравствуйте. Подскажите как можно реализовать переход уровней от одного к другому в Canvas. Когда прошел первый, открывается второй и так далее. Как можно покинуть состояние законченного первого уровня и попасть в обнуленное состояние второго на чистом JS в Canvas?
Вот мой корнейвой файл Game.js

import TileMap from "./TileMap.js";

const tileSize = 32;
const velocity = 2;

const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
const tileMap = new TileMap(tileSize);
const pacman = tileMap.getPacman(velocity);
const enemies = tileMap.getEnemies(velocity);

let gameOver = false;
let gameWin = false;
const gameOverSound = new Audio("sounds/gameOver.wav");
const gameWinSound = new Audio("sounds/gameWin.wav");

function gameLoop() {
  tileMap.draw(ctx);
  drawGameEnd();
  pacman.draw(ctx, pause(), enemies);
  enemies.forEach((enemy) => enemy.draw(ctx, pause(), pacman));
  checkGameOver();
  checkGameWin();

  requestAnimationFrame(gameLoop);
}

function checkGameWin() {
  if (!gameWin) {
    gameWin = tileMap.didWin();
    if (gameWin) {
      gameWinSound.play();
    }
  }
}

function checkGameOver() {
  if (!gameOver) {
    gameOver = isGameOver();
    if (gameOver) {
      gameOverSound.play();
    }
  }
}

function isGameOver() {
  return enemies.some(
    (enemy) => !pacman.powerDotActive && enemy.collideWith(pacman)
  );
}

function pause() {
  return !pacman.madeFirstMove || gameOver || gameWin;
}

function drawGameEnd() {
  let indentTextByX;
  if (gameOver || gameWin) {
    let text = "You Win!";
    indentTextByX = 70;
    if (gameOver) {
      text = "Game Over!";
      indentTextByX = 20;
    }

    ctx.fillStyle = "black";
    ctx.fillRect(0, canvas.height / 2.25, canvas.width, 80);

    ctx.font = "80px Impact";
    const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
    gradient.addColorStop(0, "magenta");
    gradient.addColorStop(0.5, "blue");
    gradient.addColorStop(1, "red");

    ctx.fillStyle = gradient;

    ctx.fillText(text, indentTextByX, canvas.height / 1.825);
  }
}

tileMap.setCanvasSize(canvas);
requestAnimationFrame(gameLoop);

Answer 1

[Сергей Соколов]

сделать кнопку «На следующий уровень!»,
по нажатию всё сбросить и начать со следующим уровнем.