JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<canvas id = "canvas" width = "400" height = "400"></canvas>
<script>
let ctx = document.getElementById("canvas").getContext("2d");
let hX = 200;
let hY = 200;
let tailX = [];
let tailY = [];
let TL = 50;
let MX = 0;
let MY = 0;
let aX = 300;
let aY = 200;
document.addEventListener("keydown", function down(e){
	switch(e.keyCode) {
  	case 37: MX = -20; MY = 0; break;
    case 38: MY = -20; MX = 0; break;
    case 39: MX = 20; MY = 0; break;
    case 40: MY = 20; MX = 0; break;
  }
}, false);
function block(x, y, w, h, c) {
	ctx.beginPath();
  ctx.rect(x, y, w, h);
  ctx.fillStyle = c;
  ctx.fill();
  ctx.closePath();
}
function render() {
	ctx.clearRect(0, 0, 400, 400);
  block(0, 0, 400, 400, "black");
  block(hX, hY, 20, 20, "green");
  hX += MX;
  hY += MY;
  tailX.push(hX);
  tailY.push(hY);
  if (TL < tailX.length) {
  	tailX.shift();
    tailY.shift();
  }
  block(aX, aY, 20, 20, "red");
  if (hX == aX && hY == aY) {
  	TL++;
    aX = Math.floor(Math.random() * 20) * 20;
    aY = Math.floor(Math.random() * 20) * 20;
  }
  for (let i = 0; i < TL; i++) {
  	block(tailX[i], tailY[i], 20, 20, "green");
  }
}
setInterval(render, 60);
</script>
</body>
</head>
</html>