Как сбросить javascript игру при закрытии всплывающего окна

Question

Эта игра в стиле змеи открывается во всплывающем окне, когда вы нажимаете кнопку на странице, затем вы получаете стартовый экран и инструкции, вы нажимаете кнопку «Пуск», чтобы начать игру, а при ее проигрыше отображается ваш счет и некоторый текст. Если вы закроете всплывающее окно и снова откроете его, оно все равно показывает счет, а не начальный экран.

Как мне сделать его сброс, когда всплывающее окно закрыто?

jQuery(document).ready(function($) {

  $("#canvas").addClass("displayNone");
  $("#lose").addClass("displayNone");
  $("#post").removeClass("displayNone");
  $("#controls").removeClass("displayNone");

  $('#play').on('click', function() {
    $('#playdiv').addClass('show-game');
  })

  var canvas = $("#canvas")[0];;
  var ctx = canvas.getContext("2d");
  var w = $("#canvas").width();
  var h = $("#canvas").height();
  var cw = 10;
  var d;
  var food;
  var score;
  var snake_array;

  $("#score").addClass("displayNone");
  $("#start").click(function() {
    $("#start").addClass("displayNone");
    $("#lose").addClass("displayNone");
    $("#post").addClass("displayNone");
    $("#canvas").removeClass("displayNone");
    init();
  })
  var keys = [];

  window.addEventListener("keydown",
    function(e) {
      keys[e.keyCode] = true;
      switch (e.keyCode) {
        case 37:
        case 39:
        case 38:
        case 40:
        case 32:
          e.preventDefault();
          break;
        default:
          break;
      }
    },
    false);

  window.addEventListener('keyup',
    function(e) {
      keys[e.keyCode] = false;
    },
    false);

  // was here

  function init() {
    d = "right";
    create_snake();
    create_food();
    score = 0;

    if (typeof game_loop != "undefined") clearInterval(game_loop);
    game_loop = setInterval(paint, 90);
  }
  //    init();

  function create_snake() {
    var length = 5;
    snake_array = [];
    for (var i = length - 1; i >= 0; i--) {
      snake_array.push({
        x: i,
        y: 0
      });
    }
  }

  function create_food() {
    food = {
      x: Math.round(Math.random() * (w - cw) / cw),
      y: Math.round(Math.random() * (h - cw) / cw),
    };
  }

  function paint() {
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, w, h);
    ctx.strokeStyle = "black";
    ctx.strokeRect(0, 0, w, h);

    var nx = snake_array[0].x;
    var ny = snake_array[0].y;

    if (d == "right") nx++;
    else if (d == "left") nx--;
    else if (d == "up") ny--;
    else if (d == "down") ny++;

    if (nx == -1 || nx == w / cw || ny == -1 || ny == h / cw || check_collision(nx, ny, snake_array)) {
      document.querySelector('#score').innerText = 'Your score: ' + score;
      $("#score").removeClass("displayNone");
      $("#lose").removeClass("displayNone");

      $("#start").removeClass("displayNone");
      $("#canvas").addClass("displayNone");
      //init();
      return;
    }

    if (nx == food.x && ny == food.y) {
      var tail = {
        x: nx,
        y: ny
      };
      score++;

      create_food();
    } else {
      var tail = snake_array.pop();
      tail.x = nx;
      tail.y = ny;
    }

    snake_array.unshift(tail);
    for (var i = 0; i < snake_array.length; i++) {
      var c = snake_array[i];
      paint_cell(c.x, c.y);
    }

    paint_cell(food.x, food.y);
    var score_text = "Score: " + score;
    ctx.fillText(score_text, 5, h - 5);
  }

  function paint_cell(x, y) {
    ctx.fillStyle = "pink";
    ctx.fillRect(x * cw, y * cw, cw, cw);
    ctx.strokeStyle = "red";
    ctx.strokeRect(x * cw, y * cw, cw, cw);
  }

  function check_collision(x, y, array) {
    for (var i = 0; i < array.length; i++) {
      if (array[i].x == x && array[i].y == y) return true;
    }
    return false;
  }

  $(document).keydown(function(e) {
    var key = e.which;
    if (key == "37" && d != "right") d = "left";
    else if (key == "38" && d != "down") d = "up";
    else if (key == "39" && d != "left") d = "right";
    else if (key == "40" && d != "up") d = "down";
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div> unknown HTML please post it here</div>

Answer 1

Похоже, вы никогда не чистите setInterval на выходе. Пожалуйста, попробуйте clearInterval. Присоедините к window, не локально проверяемый.

const window.timerId = setInterval(init, 9000)

// При инициализации

if (window.game_loop != "undefined") clearInterval(game_loop);
    window.game_loop = setInterval(paint, 90);