JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<canvas id = "canvas" width = "340" height = "450"></canvas>
<script>
document.addEventListener("mousedown", onDown, false);
function onDown(e) {
	let cX = e.pageX;
  let cY = e.pageY;
}
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let dir = 0;
let speed = 1.7;
let width = 80;
let score = 0;
let x = 100;
let y = 0;
let blockX = [];
let blockY = [];
let blockW = [];
let lost = 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() {
	if (lost == false) {
	ctx.clearRect(-100, -100, 600, 2000);
	block(0, 0, 400, 600, "#00FFFF");
  block(0, 300 + y, 400, 400, "black");
  ctx.beginPath();
    ctx.font = "25px Roboto Mono";
    ctx.fillStyle = "#000000";
    ctx.fillText("score: " + score, 3, 20);
    ctx.closePath();
  }
}
setInterval(render, 10);
</script>
</body>
</head>
</html>