Untitled

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const colors = ["#ff0000",
    "#00ff00",
    "#0000ff",
    "#ffff00",
    "#ff00ff"]

const randomColor = colors[Math.floor(Math.random() * colors.length)]
const randomColor2 = colors[Math.floor(Math.random() * colors.length)]

x = screenX;
y = screenY;
let isDrawing;
let isFalling = true;
gridx = 120;
gridy = 240;
spawnx = 90;
spawny = 100;
puyox = 100;
puyoy = 30;
bottom = 240;

function doublepuyo() {function fall() {
    puyoy++
}

    ctx.beginPath(),
        ctx.arc(puyox, puyoy, 10, 0, 2 * Math.PI),
        ctx.stroke(),
        ctx.fillStyle = (randomColor),
        ctx.fill(),
        console.log(puyoy)

    ctx.beginPath(),
        ctx.arc(puyox, puyoy + 20, 10, 0, 2 * Math.PI),
        ctx.stroke(),
        ctx.fillStyle = (randomColor2),
        ctx.fill(),
        console.log(puyoy)
}

function grid() {
    ctx.beginPath(),
        ctx.rect(50, 100, gridx, gridy),
        ctx.stroke(),
        ctx.fillStyle = ("#00ffff"),
        ctx.fill()
}

function spawner() {
    ctx.beginPath(),
        ctx.rect(spawnx, spawny, 20, 20),
        ctx.stroke(),
        ctx.fillStyle = ("#ffffff"),
        ctx.fill()
}

window.addEventListener("keydown", (e) => {
    switch (e.code) {
        case "Space":
            puyoy += 1
    }
})

grid()
spawner()
doublepuyo()
fall()