script.js

/** @type {HTMLCanvasElement} */
const canvas = document.querySelector("#game");
const ctx = canvas.getContext("2d");
CanvasItem.ctx = ctx;

const h = canvas.height,
    w = canvas.width;
const settings = {
    gridSize: w / 70,
    lines: 16,
    running: false,
    life: 0,
    maxScore: 0,
    score: 0
}
CanvasBrick.width = settings.gridSize;
CanvasBrick.height = settings.gridSize / 1;

const grid = {},
    paddle = new CanvasPaddle(w / 2 - w / 8 / 2, h * (1 - 0.01), w / 8, h * 0.01, "#fff");
/** @type {[CanvasBall]} */
let balls = [];

window.addEventListener("keydown", (e) => {
    if (e.key == "ArrowRight")
        paddle.direction = 1

    if (e.key == "ArrowLeft")
        paddle.direction = -1
})

window.addEventListener("keyup", (e) => {
    if (e.key == "ArrowRight" && paddle.direction == 1)
        paddle.direction = 0

    if (e.key == "ArrowLeft" && paddle.direction == -1)
        paddle.direction = 0
})

function startGame() {
    if (settings.running)
        return;
    settings.running = true;
    settings.life = 2;
    settings.maxScore = CreateBrickGrid();
    settings.score = 0;
    balls = [new CanvasBall(w / 2, h / 2, settings.gridSize / 3, "#fff")]
    gameLoop();
}

function gameLoop() {
    updateGame();
    drawGame();

    if (settings.running)
        requestAnimationFrame(gameLoop);
}

function gameOver() {
    settings.running = false;

}

function CreateBrickGrid() {
    const powers = ["ball", "multi", "mega"]
    const lines = settings.lines;
    let count = 0;
    const colors = ["mediumorchid", "deeppink", "red", "tomato", "orange", "gold", "yellow", "lime", "turquoise"]
    for (let line = 0; line < lines; line++) {
        if (!grid[line])
            grid[line] = {};

        for (let x = 0; x < w / settings.gridSize; x++) {
            const brick = new CanvasBrick(x * CanvasBrick.width,
                line * CanvasBrick.height,
                colors[~~((line + x ** 0.55 + (1 + Math.cos(x))) % colors.length)],
                Math.random() < 0.5 ? powers[~~(Math.random() * powers.length)] : null
            )
            grid[line][x] = brick;
            count++;
        }
    }
    return count;
}

//update
function updateGame() {

    let ballLost = true;
    for (const ball of balls) {
        ballLost = ball.update() && ballLost
    }

    //test if life lost & handle it
    if (ballLost) {
        settings.life--;
        if (settings.life <= 0)
            return gameOver();
        balls = [new CanvasBall(w / 2, h / 2, settings.gridSize / 3, "#fff")]
    }
    balls.forEach(b => {
        const hitBrick = b.testCollision(grid)
        if (hitBrick) {
            b.speed *= 1.05;
            settings.score++;
            if (settings.score >= settings.maxScore)
                settings.running = false;
            switch (hitBrick?.power) {
                case "ball":
                    balls.push(new CanvasBall(w / 2, h / 2, settings.gridSize / 3, "#fff"))
                    break;
                case "mega":
                    const sizeIncrease = -b.r * 0.2;
                    b.r += sizeIncrease;
                    setTimeout(() => { b.r -= sizeIncrease }, 5 * 1000)
                    break;
                case "multi":
                    const oldBalls = balls.map(a => a).filter(b => !b.checkOutbound());
                    if (oldBalls.length < 100)
                        oldBalls.forEach(b => balls.push(new CanvasBall(b.x, b.y, settings.gridSize / 3, "red")))
                    break;
            }
        }
    })
    paddle.update(balls);
}

//draw staff
function drawGame() {
    ctx.clearRect(0, 0, w, h);
    drawBricks()
    balls.forEach(b => b.draw());
    paddle.draw();
}

function drawBricks() {
    for (let key in grid) {
        const line = grid[key]
        for (let lineKey in line) {
            const brick = line[lineKey]
            brick.draw()
        }
    }
}