JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<html>
<head>
<body style = "text-align: center">
<canvas id = "canvas" width = "720" height = "540" style = "border: 1px solid"></canvas>
<script>
let ctx = document.getElementById("canvas").getContext("2d");
let turn = 1;
let cX = 0;
let cY = 0;
let down = true;
let peices = [];
let mX = 0;
let mY = 0;
ctx.beginPath();
 ctx.rect(0, 0, 100, 100);
 ctx.fillStyle = "black";
 ctx.fill();
 ctx.closePath();


for (let i = 0; i < 42; i++) {
 peices.push(0);
}

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();
}
*/

/*function block(x, y, w, h, c) {
 ctx.beginPath();
 ctx.rect(x, y, w, h);
 ctx.fillStyle = c;
 ctx.fill();
 ctx.closePath();
}*/
/*
function circle(x, y, d, c) {
 ctx.beginPath();
 ctx.arc(x, y, d, 0, 2 * Math.PI);
 ctx.fillStyle = c;
 ctx.fill();
 ctx.closePath();
 
}
*/
/*
document.addEventListener("mousemove", function(e) {
 let rect = canvas.getBoundingClientRect();
 mX = e.clientX - rect.left;
 mY = e.clientY - rect.top;
});

document.addEventListener("mousedown", function(e) {
 let rect = canvas.getBoundingClientRect();
 cX = e.pageX - rect.left;
 cY = e.pageY - rect.top;
 down = true;
});
*/
/*function render() {
let x = 137;
let y = 125;
let colors = ["black", "red", "yellow"];
 ctx.clearRect(0, 0, 1000, 1000);
 block(0, 0, 720, 540, "black");
 /*
 block(80, 80, 550, 491, "#0000ff");
 for (let i = 0; i < 42; i++) {
  //circle(x, y, 30, colors[peices[i]]);
  if (x > 550) {
   x = 137;
   y += 73;
  } else {
   x += 73;
  }
 }
 //circle(mX, mY, 30, colors[turn]);
 if (mX > 116 && mX < 530 + 73) {
  circle((Math.round((mX / 73)) * 73) - 9, 40, 30, colors[turn]);
  if (down == true) {
   peices.splice((Math.round(mX / 73) * 73) / 7, 1, turn);
  }
 }
 down = false;
 
}
setInterval(render, 10);

</script>
</body>
</head>
</html>