Ping-Pong z komputerem

// Inicjalizacja canvas i kontekstu
const canvas = document.getElementById('pongCanvas');
const context = canvas.getContext('2d');

// Ustawienia wymiarów canvas
canvas.width = 800;
canvas.height = 600;

const pauseButton = document.getElementById('pauseButton');
let isGamePaused = false; // Flaga do sprawdzania, czy gra jest zatrzymana

// Definicje obiektów
const paddleWidth = 10;
const paddleHeight = 100;
const ballRadius = 10;

const player = {
    x: 0,
    y: canvas.height / 2 - paddleHeight / 2,
    width: paddleWidth,
    height: paddleHeight,
    color: "#fff",
    dy: 0,
    speed: 6,
    score: 0
};

const computer = {
    x: canvas.width - paddleWidth,
    y: canvas.height / 2 - paddleHeight / 2,
    width: paddleWidth,
    height: paddleHeight,
    color: "#fff",
    speed: 4,
    score: 0
};

const ball = {
    x: canvas.width / 2,
    y: canvas.height / 2,
    radius: ballRadius,
    speed: 4,
    dx: 4,
    dy: 4,
    color: "#fff"
};

// Funkcja rysowania obiektów
function drawRect(x, y, width, height, color) {
    context.fillStyle = color;
    context.fillRect(x, y, width, height);
}

function drawCircle(x, y, radius, color) {
    context.fillStyle = color;
    context.beginPath();
    context.arc(x, y, radius, 0, Math.PI * 2);
    context.closePath();
    context.fill();
}

function drawNet() {
    for (let i = 0; i < canvas.height; i += 20) {
        drawRect(canvas.width / 2 - 1, i, 2, 10, '#fff');
    }
}

// Rysowanie wyniku
function drawScore() {
    document.getElementById('score').innerText = `Gracz: ${player.score} | Komputer: ${computer.score}`;
}

// Funkcja do poruszania komputerem (AI)
function moveComputer() {
    const difficulty = Math.random() * (ball.speed - 2) + 1; // Dynamiczne dopasowanie trudności
    if (ball.y < computer.y + computer.height / 2) {
        computer.y -= computer.speed * difficulty;
    } else if (ball.y > computer.y + computer.height / 2) {
        computer.y += computer.speed * difficulty;
    }
}

// Obsługa klawiatury
document.addEventListener('keydown', event => {
    if (event.key === 'ArrowUp') {
        player.dy = -player.speed;
    } else if (event.key === 'ArrowDown') {
        player.dy = player.speed;
    }
});

document.addEventListener('keyup', event => {
    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
        player.dy = 0;
    }
});

// Kolizje z paletkami
function checkCollision(paddle, ball) {
    return ball.x - ball.radius < paddle.x + paddle.width &&
           ball.x + ball.radius > paddle.x &&
           ball.y + ball.radius > paddle.y &&
           ball.y - ball.radius < paddle.y + paddle.height;
}

// Resetowanie piłki po zdobyciu punktu
function resetBall() {
    ball.x = canvas.width / 2;
    ball.y = canvas.height / 2;
    ball.speed = 4;
    ball.dx = (Math.random() > 0.5 ? 1 : -1) * 4;
    ball.dy = (Math.random() > 0.5 ? 1 : -1) * 4;
}

// Aktualizacja punktów
function updateScore() {
    if (ball.x - ball.radius < 0) {
        computer.score += 1;
        resetBall();
    } else if (ball.x + ball.radius > canvas.width) {
        player.score += 1;
        resetBall();
    }
    drawScore();
}

// Funkcja do aktualizacji stanu gry
function update() {
    // Jeśli gra jest zatrzymana, nie aktualizujemy stanu
    if (isGamePaused) return;

    // Ruch piłki
    ball.x += ball.dx;
    ball.y += ball.dy;

    // Ruch gracza
    player.y += player.dy;

    // Kolizje ze ścianami
    if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
        ball.dy *= -1;
    }

    // Kolizje z paletkami
    if (checkCollision(player, ball)) {
        let collidePoint = ball.y - (player.y + player.height / 2);
        collidePoint = collidePoint / (player.height / 2);

        let angleRad = (Math.PI / 4) * collidePoint;
        ball.dx = ball.speed * Math.cos(angleRad);
        ball.dy = ball.speed * Math.sin(angleRad);

        ball.speed += 0.5;
        ball.dx = Math.abs(ball.dx); // Upewnij się, że piłka odbija się w prawo
    }

    if (checkCollision(computer, ball)) {
        let collidePoint = ball.y - (computer.y + computer.height / 2);
        collidePoint = collidePoint / (computer.height / 2);

        let angleRad = (Math.PI / 4) * collidePoint;
        ball.dx = ball.speed * Math.cos(angleRad);
        ball.dy = ball.speed * Math.sin(angleRad);

        ball.speed += 0.5;
        ball.dx = -Math.abs(ball.dx); // Upewnij się, że piłka odbija się w lewo
    }

    // Ruch komputera (AI)
    moveComputer();

    // Aktualizacja punktów
    updateScore();
}

// Funkcja do renderowania gry
function render() {
    // Czyszczenie canvas
    context.clearRect(0, 0, canvas.width, canvas.height);

    // Rysowanie elementów
    drawNet();
    drawRect(player.x, player.y, player.width, player.height, player.color);
    drawRect(computer.x, computer.y, computer.width, computer.height, computer.color);
    drawCircle(ball.x, ball.y, ball.radius, ball.color);
}

// Główna pętla gry
function gameLoop() {
    update();
    render();
    if (!isGamePaused) {
        requestAnimationFrame(gameLoop);
    }
}

// Obsługa zatrzymywania i wznawiania gry
pauseButton.addEventListener('click', () => {
    isGamePaused = !isGamePaused;
    if (isGamePaused) {
        pauseButton.innerText = "Wznów";
    } else {
        pauseButton.innerText = "Zatrzymaj";
        gameLoop(); // Uruchom ponownie główną pętlę gry, jeśli gra była zatrzymana
    }
});

// Rozpoczęcie gry
drawScore(); // Początkowy stan wyniku
gameLoop();