JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<canvas id = "canvas" width = "400" height = "550"></canvas>
<script>
let ctx = document.getElementById("canvas").getContext("2d");
let over = false;
let rows = [];
let feedback = [];
let answer = "";
let say = "";
let i = 0;
let z = 0;
let mX = 0;
let mY = 0;
let cX = 0;
let cY = 0;
let pegX = 0;
let pegY = 0;
let color = 0;
let row = 9;
let colors = ["white", "blue", "#ff6600", "red", "yellow", "green", "#595959"];
document.addEventListener("mousemove", function moved(e) {mX = e.clientX;mY = e.clientY;});
document.addEventListener("mousedown", function down(e) {
	cX = e.pageX;
	cY = e.pageY;
	let x = 30;
	let y = 90;
	for (let i = 0; i < 10; i++) {
		for (let z = 0; z < 4; z++) {
			if (i == row) {
				if (mX > (x + 25) - 15 && mX < (x + 25) + 15 && mY > (y + 25) - 15 && mY < (y + 25) + 15) {
				
			rows.splice((i * 4) + z, 1, color);
				}
			}
	x += 40;
		}
		x = 30;
		y += 45;
	}
});
document.addEventListener("keydown", function keyDown(e) {
switch(e.keyCode) {
	case 49: color = 0; break;
	case 50: color = 1; break;
	case 51: color = 2; break;
	case 52: color = 3; break;
	case 53: color = 4; break;
	case 54: color = 5; break;
}
}, true);
function text(t, x, y, px, c) {
	ctx.beginPath();
    ctx.font= px + "px Roboto Mono";
    ctx.fillStyle = c;
    ctx.fillText(t, 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();
}
let feedbackColors = ["#808080", "white", "red"];
function render() {
/*
clear
make the background
make the frame of the game
repeat 10 times
repeat 4 times
make a block at x, y, 30, 30, color[rows[i] + z]

if i == the row
snap to spot



*/
let x = 30;
let y = 90;
let g = 0;
	ctx.clearRect(0, 0, 600, 600);
	block(0, 0, 400, 600, "black");
	block(10, 20, 250, 520, "grey");
	
	for (i = 0; i < 10; i += 1) {
		for (z = 0; z < 4; z++) {
			block(x, y, 30, 30, colors[rows[g]]); // colors[rows[i] + z]
			if (i ==...