Back to Projects

Brick Breaker: Final Game - Solution

“Run” to see new changes ✕

Look inside

Run

main.js

index.html

style.css

Run

/**
 * This version of the game only converts objects. This is 
 * the minimum student's should do.
 */

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

const canvasRect = canvas.getBoundingClientRect();
const borderWidth = 2;
const w = canvas.width;
const h = canvas.height;
let score = 0;
let lives = 3; 
let brickWidth;
let brickHeight = 20;
let brickYSpace = 30;
let running = false;
const bricks = [];

const ball = {
    size: 20,
    x: w /2,
    y: h / 2,
    xVel: Math.trunc(Math.random() * 3 + 1),
    yVel: 3,
    move () {
        if (this.x + this.xVel + this.size < w && this.x + this.xVel - this.size > 0) {
            this.x += this.xVel;
        } else {
            this.xVel *= -1;
        }
        if (this.y + this.yVel - this.size > 0) {
            this.y += this.yVel;
        } else {
            this.yVel *= -1;
        } 
    }
};

const paddle = {
    width: 100,
    x: w / 2 - this.width /2,
    move (mouseX) {
        this.x = mouseX - 0.5 * this.width;
        if (this.x < 0) {
            this.x = 0;
        } else if (this.x + this.width > w) {
            this.x = w - this.width;
        }
    }
};

function randomColor() {
    let red = Math.trunc(Math.random() * 255);
    let green = Math.trunc(Math.random() * 255);
    let blue = Math.trunc(Math.random() * 255);

return `rgb(${red}, ${green}, ${blue})`
}

function resetBricks(numBricks = 4, numRows = 1) {
    brickWidth = (w - 30) / numBricks - 10;
    for (let i = 0; i < numRows; i++) {
        for (let j = 0; j < numBricks; j++) {
            const brick = {
                x: (brickWidth + 10) * j + 20,
                y: 50 + brickYSpace * i,
                color: randomColor()
            };
            bricks.push(brick);
            
        }
    }
}

function printStats() {
    ctx.font = "20px Arial";
    ctx.fillStyle = "black";
    ctx.textAlign = "left";
    ctx.textBaseline = "bottom";
    ctx.fillText(`Score: ${score}`, 10,30);
    ctx.fillText(`Lives: ${lives}`, 390,30);
}

function drawBricks() {
    for (let i = 0; i < bricks.length; i ++) {
        ctx.fillStyle = bricks[i].color;
        ctx.fillRect(bricks[i].x, bricks[i].y, brickWidth, brickHeight);
    }
}

function drawBall() {
    ctx.fillStyle = "purple";
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.size, 0, 2 * Math.PI);
    ctx.fill();
}

function keyDown(event) {
    if (event.code == "Space") {
        running = !running;
        requestAnimationFrame(gameLoop);
    }
}

function mouseMove(event) {
    let mouseX = event.clientX - canvasRect.left - borderWidth;
    paddle.move(mouseX);
}

function drawPaddle() {
    ctx.fillStyle = "blue";
    ctx.fillRect(paddle.x, h - 30, paddle.width, 20);
}

function checkPaddleCollision() {
    // Check if it is at the paddle height
    if (ball.y + ball.size > h - 30 && ball.y + ball.size < h - 10) {
        // Check if it is within the paddle box
        if (ball.x >= paddle.x && ball.x <= paddle.x + paddle.width) {
            // Hitting the paddle, reverse Y velocity
            ball.yVel *= -1;
        }
    }
}

function levelUp() {
    resetBricks(9,5);
    ball.yVel *= 1.5;
    ball.xVel *= 1.5;
}

function checkBrickCollision() {
    for (let i = 0; i < bricks.length; i++) {
        if (ball.y - ball.size < bricks[i].y + 20 && 
        ball.y - ball.size > bricks[i].y &&
        ball.x > bricks[i].x && ball.x < bricks[i].x + brickWidth) {
            score ++;
            bricks.splice(i,1);
            ball.yVel *= -1;
        }
    }
}

function checkMiss() {
    return ball.y + ball.size > h;
}

function gameLoop() {
    ctx.clearRect(0, 0, w, h);
    printStats();
    drawBricks();
    ball.move();
    drawBall();
    drawPaddle();
    checkPaddleCollision();
    checkBrickCollision();
 
    if (bricks.length == 0) {
        levelUp();
    }
    if (!running) {
        ctx.font = "40px Arial";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillStyle = "red";
        ctx.fillText("Hit space to start", w/2, 3* h/4);
    }
    if (running && !checkMiss()) {
        requestAnimationFrame(gameLoop);
    } else if (checkMiss()) {
        lives --;
        ball.x = w / 2;
        ball.y = h / 2;
        ball.xVel = Math.trunc(Math.random() * 3 + 1);
        running = false;
        requestAnimationFrame(gameLoop)
    }
    if (lives == 0) {
        document.removeEventListener("keydown", keyDown);
        ctx.clearRect(0, 0, w, h);
        printStats();
        ctx.font = "40px Arial";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.fillStyle = "black";
        ctx.fillText("Game Over", w/2, h/2);
    }
     
}

resetBricks(9,5);
document.addEventListener("mousemove", mouseMove);
document.addEventListener("keydown", keyDown);
gameLoop();

Console

Click RUN to execute project