HTML
<!DOCTYPE html>
<html>
<head>
<body>
<h1>scratch ticket test</h1>
<p>by frogggeee</p>
<canvas id = "canvas" width = "160" height = "250"></canvas>
<script>
let ctx = document.getElementById("canvas").getContext("2d");
let x = 0;
let y = 0;
let mouseX = 0;
let mouseY = 0;
let cX = 0;
let cY = 0;
let sX = [];
let sY = [];
let sT = [];
let erased = 0;
let down = false;
let thing = ["", "7", "6", "5", "4", "3", "2", "1"];
let prizes = [];
let grid = [];
for (let o = 0; o < thing.length; o++) {
for (let i = 0; i < o; i++) {
prizes.push(thing[o]);
}
}
for (let z = 0; z < 100; z++) {
grid.push(prizes[Math.floor(Math.random() * prizes.length)]);
}
let img = new Image();
img.src = "https://www.insidescience.org/sites/default/files/5_heic1808a_crop.jpg";
document.addEventListener("mousemove", function moved(e) {mouseX = e.clientX; mouseY = e.clientY - 100;});
document.addEventListener("mousedown", function onDown(e) {cX = e.pageX; cY = e.pageY; down = true; });
document.addEventListener("mouseup", function onUp(e) {down = false});
function block(x, y, w, h, c) {
ctx.beginPath();
ctx.rect(x, y, w, h);
ctx.fillStyle = c;
ctx.fill();
ctx.closePath();
}
function scratch(x, y, w, h) {
let xx = x;
let yy = y + 10;
for (let i = 0; i < w; i++) {
for (let g = 0; g < h; g++) {
sX.push(xx + 5);
sY.push(yy);
sT.push(true);
xx += 2;
}
yy += 2;
xx = 0;
}
}
function row(x, y, s) {
for (let i = 0; i < 3; i++) {
block((i * 50) + 5, y + 10, 49, 49, "black");
text(grid[(s * 3) + i], (i * 50) + 15, 45 + y, 35, "white");
}
}
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();
}
scratch(0, 0 * 60, 25, 75);
scratch(0, 1 * 60, 25, 75);
scratch(0, 2 * 60, 25, 75);
scratch(0, 3 * 60, 25, 75);
function render() {
ctx.clearRect(0, 0, 400, 400);
block(0, 0, 200, 250, "grey");
row(0, 60 * 0, 1);
row(0, 60 * 1, 2);
row(0, 60 * 2,...