yea

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Snake</title>
</head>
<body>
<canvas id="cvs" style="background-color: antiquewhite" width="1000" height="700"></canvas>
<script>
  //-------------------------------------------------------------------------------------
  //------ Global Variables -------------------------------------------------------------
  //-------------------------------------------------------------------------------------

  // DOM model of canvas
  var cvs = null;
  // 2D konrext of canvas
  var ctx = null;
  // Handle to inretval event
  var hndInterval = null;
  // Snake game grid size
  var gridSize = {col: 100, row: 70};
  // Counts number of frames
  var frameCounter = 0;

  var cvsH = cvs.height;
  var cvsW = cvs.width;

  //-------------------------------------------------------------------------------------
  //------ Classes and Objects-----------------------------------------------------------
  //-------------------------------------------------------------------------------------

  var ESnakeDir = {
    Positive: 1,
    Negative: -1,
    None: 0
  };

  var currentDirLR = ESnakeDir.Positive;
  var currentDirUD = ESnakeDir.None;

  var SnakeElementSize = {
    width: 10,
    height: 10
  };


  //-------------------------------------------------------------------------------------
  //------ Functions --------------------------------------------------------------------
  //-------------------------------------------------------------------------------------

  var pos = {x:500,y:350};

  // Updates Canvas on interval timeout
  function drawCanvas() {
    ctx.clearRect(0, 0, cvs.width, cvs.height);
    ctx.fillRect(pos.x,pos.y,10,10);
    pos.x +=(10 * currentDirLR);
    pos.y +=(10 * currentDirUD);

    frameCounter++;
  }

  function reloadGameAfterHit() {
    if (pos.x < 0 || pos.y < 0 || pos.x >= cvsW / SnakeElementSize.width || pos.y >= cvsH / SnakeElementSize.height) {
      location.reload()
    }
  }


  //-------------------------------------------------------------------------------------

  function startGame() {
    hndInterval = setInterval(drawCanvas, 50);
    reloadGameAfterHit();
  }

  //-------------------------------------------------------------------------------------

  //-------------------------------------------------------------------------------------
  //------ Events -----------------------------------------------------------------------
  //-------------------------------------------------------------------------------------

  function keyDown(event) {
    switch (event.key) {
      case "ArrowUp":
        currentDirUD = ESnakeDir.Negative;
        currentDirLR = ESnakeDir.None;
        break;
      case "ArrowLeft":
        currentDirLR = ESnakeDir.Negative;
        currentDirUD = ESnakeDir.None;
        break;
      case "ArrowRight":
        currentDirLR = ESnakeDir.Positive;
        currentDirUD = ESnakeDir.None;
        break;
      case "ArrowDown":
        currentDirUD = ESnakeDir.Positive;
        currentDirLR =ESnakeDir.None;
        break;
    }
  }

  //-------------------------------------------------------------------------------------
  //------ Main code --------------------------------------------------------------------
  //-------------------------------------------------------------------------------------

  //This function runs after all HTML elements are created and starts the game
  window.onload = function () {
    cvs = document.getElementById("cvs");
    cvs.width = SnakeElementSize.width * gridSize.col;
    cvs.height = SnakeElementSize.height * gridSize.row;
    ctx = cvs.getContext('2d');
    document.addEventListener("keydown", keyDown, false);
    startGame();
  };
  //-------------------------------------------------------------------------------------

</script>
</body>
</html>