JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<h2 id = "load"> </h2>
<canvas id = "canvas" width = "300" height = "300" style="border:1px solid"></canvas>
<script>
// hey! what are you doing in here? please follow me on scratch at https://scratch.mit.edu/users/frogggeee_Test/ . thanks.
/* ====== IDEAS ======
add fossils
add rocket ship to the moon
add china town
add lava market
add buried treasure
add worms
add tnt
add option to start in a new area. (new world, everything reset except tools, money, upgrades)
add compass in the shop that leads to the lava shop.
add map of the world.
*/
let loaded = false;
let ctx = document.getElementById("canvas").getContext("2d");
let keysPressed = [];
function text(text, x, y, px, color) {
    ctx.beginPath();
    ctx.font= px + "px Roboto Mono";
    ctx.fillStyle = color;
    ctx.fillText(text, x, y);
    ctx.closePath();
}
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
document.addEventListener("mousemove", function(e) {
mX = e.clientX;
mY = e.clientY;
});
function keyDownHandler(e) {
		//keysPressed = [];
    if (keysPressed.includes(e.keyCode) == false) {
    keysPressed.push(e.keyCode);
    }
    //e.keyCode
}
function keyUpHandler(e) {
    // e.keyCode
   // if (keysPressed.includes(e.keyCode) == true) { // keysPressed.indexOf(e.keyCode)
    //keysPressed.splice(0, 1, );
    //keysPressed = [];
    //}
}
document.addEventListener("mousedown", function(e) {
	cX = e.pageX - 7;
    cY = e.pageY - 7;    
    click = true;
});
function block(x, y, w, h, c, z) {
  ctx.beginPath();
  if (z == false) {
   ctx.rect(x, y, w, h);
  } else {
   ctx.rect(x * zoom, y * zoom, w * zoom, h * zoom);
  }
  ctx.fillStyle = c;
  ctx.fill();
  ctx.closePath();
}
function render() {
ctx.clearRect(0, 0, 1000, 1000);
text(keysPressed, 50, 50, 25, "black");
}
setInterval(render, 10);
setInterval()
</script>
</body>
</head>
</html>