breakout-custom/public/javascripts/game.js

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

let bricks = [];
let paddle = { x: 175, y: 510, width: 75, height: 15 };
let ball = { x: 200, y: 370, dx: 4, dy: -4, radius: 8 };
const floorY = 525; // Define the floor position

let isPaused = false;

function togglePause() {
    isPaused = !isPaused;
    if (!isPaused) {
        requestAnimationFrame(update);
    }
}

function drawBricks() {
    bricks.forEach(brick => {
        ctx.fillStyle = brick.color;
        ctx.fillRect(brick.x, brick.y, 90, 30);
        ctx.fillStyle = brick.textColor;
        ctx.font = '14px Arial';
        ctx.fillText(brick.text, brick.x + 10, brick.y + 20);
    });
}

function drawPaddle() {
    ctx.fillStyle = '#003333';
    ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
}

function drawBall() {
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
    ctx.fillStyle = '#003333';
    ctx.fill();
    ctx.closePath();
}

function movePaddle(e) {
    if (!isPaused) {
        let relativeX = e.clientX - canvas.offsetLeft;
        if (relativeX > 0 && relativeX < canvas.width) {
            paddle.x = relativeX - paddle.width / 2;
        }
    }
}

function collisionDetection() {
    bricks.forEach((brick, index) => {
        if (
            ball.x > brick.x &&
            ball.x < brick.x + 90 &&  // Changed from 50 to 90
            ball.y > brick.y &&
            ball.y < brick.y + 30     // Changed from 20 to 30
        ) {
            ball.dy = -ball.dy;
            bricks.splice(index, 1);
        }
    });
}

function drawPauseScreen() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = 'white';
    ctx.font = '30px Arial';
    ctx.fillText('PAUSED', canvas.width / 2 - 50, canvas.height / 2);
}

function update() {

    if (isPaused) {
        drawPauseScreen();
        return;
    }

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // Draw background image
    let background = new Image();
    background.src = '/assets/images/background.png';
    ctx.drawImage(background, 0, 0, canvas.width, canvas.height);

    // Draw floor line
    ctx.beginPath();
    ctx.moveTo(0, floorY);
    ctx.lineTo(canvas.width, floorY);
    ctx.strokeStyle = 'white';
    ctx.stroke();

    drawBricks();
    drawPaddle();
    drawBall();

    collisionDetection();

    if (bricks.length === 0) {
        alert('Congratulations! You won!');
        document.location.reload();
        return;
    }

    // Bounce off side walls
    if (ball.x + ball.dx > canvas.width - ball.radius || ball.x + ball.dx < ball.radius) {
        ball.dx = -ball.dx;
    }

    // Bounce off top wall
    if (ball.y + ball.dy < ball.radius) {
        ball.dy = -ball.dy;
    } else if (ball.y + ball.dy > floorY - ball.radius) { // Changed to use floorY
        if (ball.x > paddle.x && ball.x < paddle.x + paddle.width) {
            // Calculate where the ball hit the paddle
            let hitPos = (ball.x - paddle.x) / paddle.width;

            // Change angle based on where the ball hit the paddle
            let angle = hitPos * Math.PI - Math.PI/2;

            // Add some randomness to the angle
            angle += (Math.random() - 0.5) * Math.PI/4;

            // Set new velocity based on this angle
            let speed = Math.sqrt(ball.dx * ball.dx + ball.dy * ball.dy);
            ball.dx = Math.cos(angle) * speed;
            ball.dy = -Math.abs(Math.sin(angle) * speed); // Ensure the ball always goes up
        } else {
            alert('GAME OVER');
            document.location.reload();
        }
    }

    ball.x += ball.dx;
    ball.y += ball.dy;

    requestAnimationFrame(update);
}

document.addEventListener('mousemove', movePaddle, false);

document.addEventListener('keydown', function(e) {
    if (e.key === 'p' || e.key === 'P') {
        togglePause();
    }
});

// Create pause button
const pauseButton = document.createElement('button');
pauseButton.textContent = 'Pause';
pauseButton.style.position = 'absolute';
pauseButton.style.top = '10px';
pauseButton.style.left = '10px';
document.body.appendChild(pauseButton);

pauseButton.addEventListener('click', togglePause);

fetch('/bricks')
    .then(response => response.json())
    .then(data => {
        bricks = data;
        update();
    });