McTweak.ai

/**
 * Checks if two rectangular objects are colliding
 * @param {Object} rect1 - First rectangle with x, y, width, height
 * @param {Object} rect2 - Second rectangle with x, y, width, height
 * @return {boolean} - True if colliding, false otherwise
 */
function checkCollision(rect1, rect2) {
    // Check if the rectangles are NOT overlapping
    if (
        rect1.x + rect1.width < rect2.x ||  // rect1 is left of rect2
        rect1.x > rect2.x + rect2.width ||  // rect1 is right of rect2
        rect1.y + rect1.height < rect2.y || // rect1 is above rect2
        rect1.y > rect2.y + rect2.height    // rect1 is below rect2
    ) {
        return false; // No collision
    }
    
    return true; // Rectangles are colliding
}

function updateGame() {
    moveBall();
    
    // Create proper rectangle objects with position and size
    const ballRect = {
        x: ball.x - ball.radius,
        y: ball.y - ball.radius,
        width: ball.radius * 2,
        height: ball.radius * 2
    };
    
    const paddleRect = {
        x: paddle.x,
        y: paddle.y,
        width: paddle.width,
        height: paddle.height
    };
    
    // Check for collision
    if (checkCollision(ballRect, paddleRect)) {
        // Ball hits the paddle, so bounce it
        ball.dy = -ball.dy;
    }
    
    drawEverything();
    requestAnimationFrame(updateGame);
}

// Game objects
let ball = {
    x: 250,       // x position
    y: 150,       // y position
    radius: 10,   // ball radius
    dx: 4,        // x velocity (horizontal speed)
    dy: -3,       // y velocity (vertical speed)
    color: '#FFFFFF'
};

let paddle = {
    x: 200,       // x position
    y: 350,       // y position
    width: 100,   // paddle width
    height: 15,   // paddle height
    color: '#00b3ff'
};

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

/**
 * Main game loop
 */
function gameLoop() {
    // Clear the canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    // Move the ball
    ball.x += ball.dx;
    ball.y += ball.dy;
    
    // Wall collision (left/right)
    if (ball.x - ball.radius < 0 || ball.x + ball.radius > canvas.width) {
        ball.dx = -ball.dx;  // Reverse horizontal direction
    }
    
    // Wall collision (top)
    if (ball.y - ball.radius < 0) {
        ball.dy = -ball.dy;  // Reverse vertical direction
    }
    
    // Create rectangular representations for collision detection
    const ballRect = {
        x: ball.x - ball.radius,
        y: ball.y - ball.radius,
        width: ball.radius * 2,
        height: ball.radius * 2
    };
    
    // Check for paddle collision
    if (isColliding(ballRect, paddle)) {
        ball.dy = -Math.abs(ball.dy);  // Always bounce upward
    }
    
    // Check if ball is below paddle (game over condition)
    if (ball.y > canvas.height) {
        // Reset ball
        ball.x = canvas.width / 2;
        ball.y = canvas.height / 2;
    }
    
    // Draw ball
    ctx.beginPath();
    ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
    ctx.fillStyle = ball.color;
    ctx.fill();
    ctx.closePath();
    
    // Draw paddle
    ctx.fillStyle = paddle.color;
    ctx.fillRect(paddle.x, paddle.y, paddle.width, paddle.height);
    
    // Continue the game loop
    requestAnimationFrame(gameLoop);
}

// Handle mouse movement to control paddle
canvas.addEventListener('mousemove', (event) => {
    const canvasRect = canvas.getBoundingClientRect();
    paddle.x = event.clientX - canvasRect.left - paddle.width / 2;
    
    // Keep paddle inside the canvas
    if (paddle.x < 0) {
        paddle.x = 0;
    }
    if (paddle.x + paddle.width > canvas.width) {
        paddle.x = canvas.width - paddle.width;
    }
});

// Start the game
gameLoop();