snake.html

<canvas id="gc"></canvas>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="util.js"></script>
<script src="counter.js"></script>
<script src="apple.js"></script>
<script src="snake.js"></script>
<script src="screen.js"></script>
<script src="controller.js"></script>
<script>
  var screen;
  var snake;
  var counter;
  var interval;

  window.onload=startGame;

  function startGame() {
    let squares =  40; // number of squares on the grid (horizontal)
    let snakeTail = 6; // snake tail size
    let pointsPerApple = 10; // points for each apple ate

    screen = new Screen(squares);
    snake = new Snake(snakeTail, screen.verticalSquares,
      screen.horizontalSquares);
    apple = new Apple(screen.verticalSquares, screen.horizontalSquares);
    counter = new Counter(pointsPerApple);

    sortApple();
    interval = setInterval(draw,1000/15);

    document.addEventListener("keydown",keyPush);
  }

  function draw() {
    snake.crawl();

    if (snake.ateOwnTail()) {
      gameOver();
    }

    if (snake.ateApple(apple)) {
      snake.growTail();
      counter.plusOne();
      sortApple();
    }

    screen.draw(snake, apple, counter);
  }

  function gameOver() {
    clearInterval(interval);

    interval = setInterval(()=>screen.blinkSnakeHead(snake), 200);

    onAnyKeyPress = function onKeyPress() {
      clearInterval(interval);
      document.removeEventListener('keydown', onKeyPress);
      startGame();
    }

    document.addEventListener("keydown", onAnyKeyPress);
  }

  function sortApple() {
    do {
      apple.sortPosition();
    } while (snake.overlapsApple(apple));
  }

</script>