Загрузка данных

<!DOCTYPE html>
<html>
<body style="background:black; color:white; text-align:center;">

<h2>Snake Game</h2>
<canvas id="c" width="300" height="300" style="background:#111"></canvas>

<script>
let c = document.getElementById("c");
let ctx = c.getContext("2d");

let x = 150, y = 150;
let dx = 10, dy = 0;

document.onkeydown = e => {
  if (e.key == "ArrowUp") { dx = 0; dy = -10; }
  if (e.key == "ArrowDown") { dx = 0; dy = 10; }
  if (e.key == "ArrowLeft") { dx = -10; dy = 0; }
  if (e.key == "ArrowRight") { dx = 10; dy = 0; }
};

function game() {
  ctx.fillStyle = "black";
  ctx.fillRect(0,0,300,300);

  x += dx;
  y += dy;

  ctx.fillStyle = "lime";
  ctx.fillRect(x,y,10,10);
}

setInterval(game, 100);
</script>

</body>
</html>