Untitled

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Snake</title>
    <style>
      html,
      body {
        height: 100%;
        margin: 0;
      }

      body {
        background: black;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      canvas {
        border: 1px solid white;
      }
    </style>
  </head>
  <body>
    <canvas width="400" height="400" id="game"></canvas>

    <script>
      var canvas = document.getElementById("game");
      var context = canvas.getContext("2d");

      var grid = 16;
      var count = 0;

      var snake = {
        x: 160,
        y: 160,

        // snake velocity. Moves one grid length every frame in either x or y direction
        dx: grid,
        dy: 0,

        //keep track of all grids the snake body occupies
        cells: [],

        // length of the snake. Which will change after eating an apple.
        maxCells: 4
      };

      var apple = {
        x: 320,
        y: 320
      };

      //get random whole numbers in a specific range
      function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min)) + min;
      }

      function loop() {
        requestAnimationFrame(loop);

        if (++count < 4) {
          return;
        }

        count = 0;
        context.clearRect(0, 0, canvas.width, canvas.height);

        // move snake by it's velocity
        snake.x += snake.dx;
        snake.y += snake.dy;

        //wrap snake position horizontally on edge of screen
        if (snake.x < 0) {
          snake.x = canvas.width - grid;
        } else if (snake.x >= canvas.width) {
          snake.x = 0;
        }

        //wrap snake position vertically on edge of screen
        if (snake.y < 0) {
          snake.y = canvas.height - grid;
        } else if (snake.y >= canvas.height) {
          snake.y = 0;
        }

        //keep track of where snake has been. The front of the array is always the head of the snake
        snake.cells.unshift({ x: snake.x, y: snake.y });

        //remove cells as we move away from them
        if (snake.cells.length > snake.maxCells) {
          snake.cells.pop();
        }

        //draw apple
        context.fillStyle = "red";
        context.fillRect(apple.x, apple.y, grid - 1, grid - 1);

        //draw snake
        context.fillStyle = "green";
        snake.cells.forEach(function(cell, index) {
          //drawing 1 px smaller than grid creates a grid effect in the snake body
          context.fillRect(cell.x, cell.y, grid - 1, grid - 1);

          //if snake ate an apple
          if (cell.x === apple.x && cell.y === apple.y) {
            snake.maxCells++;

            apple.x = getRandomInt(0, 25) * grid;
            apple.y = getRandomInt(0, 25) * grid;
          }

          for (var i = index + 1; i < snake.cells.length; i++) {
            if (cell.x === snake.cells[i].x && cell.y === snake.cells[i].y) {
              snake.x = 160;
              snake.y = 160;
              snake.cells = [];
              snake.maxCells = 4;
              snake.dx = grid;
              snake.dy = 0;

              apple.x = getRandomInt(0, 25) * grid;
              apple.y = getRandomInt(0, 25) * grid;
            }
          }
        });
      }
      //listens to keyboard events to move snake
      document.addEventListener("keydown", function(e) {
        //left arrow key
        if (e.which === 37 && snake.dx === 0) {
          snake.dx = -grid;
          snake.dy = 0;
        }

        //up arrow
        else if (e.which === 38 && snake.dy === 0) {
          snake.dy = -grid;
          snake.dx = 0;
        }

        //right arrow
        else if (e.which === 39 && snake.dx === 0) {
          snake.dx = grid;
          snake.dy = 0;
        }

        //down arrow
        else if (e.which === 40 && snake.dy === 0) {
          snake.dy = grid;
          snake.dx = 0;
        }
      });

      //start game
      requestAnimationFrame(loop);
    </script>
  </body>
</html>