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 playerX = 178;
let playerY = 178;
let mainX = 0;
let mainY = 0;
let moveX = 0;
let moveY = 0;
let spawn = [166, 166];
document.addEventListener("keydown", function down(e) {
switch(e.keyCode) {
	case 37: moveX = 2; break;
  case 38: moveY = 2; break;
  case 39: moveX = -2; break;
  case 40: moveY = -2; break;
  
}
}, false);
document.addEventListener("keyup", function up(e) {
switch(e.keyCode) {
	case 37: moveX = 0; break;
  case 38: moveY = 0; break;
  case 39: moveX = 0; break;
  case 40: moveY = 0; break;
}
}, false);
function load() {
	block(mainX + 166, mainY + 166, 65, 65, "green");
	let code = "";
}
function zombies(){

}
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, 500, 500); // clear
  block(0, 0, 500, 500, "black"); // background
  mainX += moveX;
  mainY += moveY;
  load();
  block(playerX, playerY, 45, 45, "red");
  
}
setInterval(render, 10);
</script>
</body>
</head>
</html>