JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<canvas id = "canvas" width = "500" height = "500"></canvas>
<script>
let ctx = document.getElementById("canvas").getContext("2d");
let mX = 0;
let mY = 0;
let x = 200;
let y = 200;
let dir = 0;
let upPressed = false;
let downPressed = false;
let leftPressed = false;
let rightPressed = false;
document.addEventListener("keydown", function keyDown(e) {
	if (e.keyCode == 37) {
  	leftPressed = true;
  	mX -= 1.2;
    dir -= 1;
  } else if (e.keyCode == 38) {
  	downPressed = true;
  	mY -= 1.2;
  } else if (e.keyCode == 39) {
  	rightPressed = true;
		mX += 1.2;
  	dir += 1;
  } else if (e.keyCode == 40) {
  	upPressed = true;
  	mY += 1.2;
  }
}, 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, 1000, 1000);
  if (mX > 0.3) {
  	mX -= 0.3;
  }
  if (mX < -0.3) {
  	mX += 0.3;
  }
  if (mY > 0.3) {
  	mY -= 0.3;
  }
  if (mY < -0.3) {
  	mY += 0.3;
  }
  x += mX;
  y += mY;
  block(0, 0, 600, 600, "black");
  block(x, y, 50, 50, "red");
}
setInterval(render, 10);
</script>
</body>
</head>
</html>