sneik

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

  //-------------------------------------------------------------------------------------
  //------ Bugs -------------------------------------------------------------
  //-------------------------------------------------------------------------------------

  //apple spawns partially outside of canvas sometimes.

  //-------------------------------------------------------------------------------------
  //------ 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};
  //apple random
  let aX;

  let aY;

  AppleAte= 0;

  //apple random defined
  function Applereset(){
    aX= Math.floor(Math.random() * cvs.width) - apple.width;

    aY= Math.floor(Math.random() * cvs.height) - apple.height;
  }

  // Apple
  var apple=new Image();

  apple.src="images/apple.png";


  //-------------------------------------------------------------------------------------
  //------ 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 Snake = {x:500,y:350};

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


    ctx.drawImage(apple, aX,aY,30,30);}


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


  function startGame() {
    hndInterval = setInterval(drawCanvas, 150);
    Applereset();

  }

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

  //-------------------------------------------------------------------------------------
  //------ 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>