<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Haxball Oyunu</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="gameContainer">
        <div id="loginContainer">
            <input type="text" id="username" placeholder="Kullanıcı Adı">
            <button onclick="startGame()">Başla</button>
        </div>
        <canvas id="gameCanvas" style="display: none;"></canvas>
        <div id="scoreboard" style="display: none;">
            <span id="score">0 - 0</span>
        </div>
    </div>
    <script src="game.js"></script>
</body>
</html>
body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #282c34;
    color: white;
    font-family: Arial, sans-serif;
}

#gameContainer {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-direction: column;
}

#loginContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#gameCanvas {
    background-color: #000;
    width: 100%;
    max-width: 800px;
    height: 100%;
    max-height: 500px;
}

#scoreboard {
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
}
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const loginContainer = document.getElementById('loginContainer');
const scoreboard = document.getElementById('scoreboard');
const scoreDisplay = document.getElementById('score');

let ball, players, goals, currentPlayer, botPlayer;
let gameInterval;

function startGame() {
    const username = document.getElementById('username').value;
    if (!username) {
        alert('Lütfen bir kullanıcı adı giriniz.');
        return;
    }

    loginContainer.style.display = 'none';
    canvas.style.display = 'block';
    scoreboard.style.display = 'block';

    resizeCanvas();
    initializeGame();
    gameInterval = setInterval(update, 1000 / 60);
}

function resizeCanvas() {
    canvas.width = window.innerWidth * 0.8;
    canvas.height = window.innerHeight * 0.8;
}

window.addEventListener('resize', resizeCanvas);

function initializeGame() {
    ball = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        radius: 10,
        dx: 0,
        dy: 0
    };

    players = [
        { id: 1, x: 50, y: canvas.height / 2 - 25, width: 20, height: 20, dx: 0, dy: 0, score: 0, color: '#f00', isCurrent: true },
        { id: 2, x: canvas.width - 70, y: canvas.height / 2 - 25, width: 20, height: 20, dx: 0, dy: 0, score: 0, color: '#00f', isCurrent: false }
    ];

    goals = [
        { x: 0, y: canvas.height / 2 - 50, width: 10, height: 100 },
        { x: canvas.width - 10, y: canvas.height / 2 - 50, width: 10, height: 100 }
    ];

    currentPlayer = players.find(player => player.isCurrent);
    botPlayer = players.find(player => !player.isCurrent);
}

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

function drawPlayer(player) {
    ctx.fillStyle = player.color;
    ctx.fillRect(player.x, player.y, player.width, player.height);
}

function drawGoal(goal) {
    ctx.fillStyle = '#fff';
    ctx.fillRect(goal.x, goal.y, goal.width, goal.height);
}

function updateBallPosition() {
    ball.x += ball.dx;
    ball.y += ball.dy;

    if (ball.x + ball.radius > canvas.width) {
        ball.x = canvas.width - ball.radius;
        ball.dx = -ball.dx;
    } else if (ball.x - ball.radius < 0) {
        ball.x = ball.radius;
        ball.dx = -ball.dx;
    }

    if (ball.y + ball.radius > canvas.height) {
        ball.y = canvas.height - ball.radius;
        ball.dy = -ball.dy;
    } else if (ball.y - ball.radius < 0) {
        ball.y = ball.radius;
        ball.dy = -ball.dy;
    }

    goals.forEach((goal, index) => {
        if (
            ball.x + ball.radius > goal.x &&
            ball.x - ball.radius < goal.x + goal.width &&
            ball.y + ball.radius > goal.y &&
            ball.y - ball.radius < goal.y + goal.height
        ) {
            players[index == 0 ? 1 : 0].score++;
            resetBall();
        }
    });
}

function resetBall() {
    ball.x = canvas.width / 2;
    ball.y = canvas.height / 2;
    ball.dx = 0;
    ball.dy = 0;
}

function movePlayer(player) {
    player.x += player.dx;
    player.y += player.dy;
    if (player.x < 0) player.x = 0;
    if (player.x + player.width > canvas.width) player.x = canvas.width - player.width;
    if (player.y < 0) player.y = 0;
    if (player.y + player.height > canvas.height) player.y = canvas.height - player.height;
}

function moveBot() {
    const speed = 2;
    const goalX = goals[0].x + goals[0].width;

    if (botPlayer.x > goalX) {
        if (botPlayer.y < ball.y) {
            botPlayer.dy = speed;
        } else if (botPlayer.y > ball.y) {
            botPlayer.dy = -speed;
        } else {
            botPlayer.dy = 0;
        }

        if (botPlayer.x < ball.x) {
            botPlayer.dx = speed;
        } else if (botPlayer.x > ball.x) {
            botPlayer.dx = -speed;
        } else {
            botPlayer.dx = 0;
        }
    } else {
        botPlayer.dx = 0;
        if (ball.x + ball.radius > canvas.width / 2 && ball.dx > 0) {
            if (botPlayer.y < ball.y) {
                botPlayer.dy = speed;
            } else if (botPlayer.y > ball.y) {
                botPlayer.dy = -speed;
            } else {
                botPlayer.dy = 0;
            }
        } else {
            botPlayer.dy = 0;
        }
    }

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

    if (botPlayer.x < 0) botPlayer.x = 0;
    if (botPlayer.x + botPlayer.width > canvas.width) botPlayer.x = canvas.width - botPlayer.width;
    if (botPlayer.y < 0) botPlayer.y = 0;
    if (botPlayer.y + botPlayer.height > canvas.height) botPlayer.y = canvas.height - botPlayer.height;
}

function update() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    players.forEach(drawPlayer);
    goals.forEach(drawGoal);
    updateBallPosition();
    players.forEach(movePlayer);
    moveBot(botPlayer);
    checkCollision();
    scoreDisplay.innerText = `${players[0].score} - ${players[1].score}`;
}

function handleKeyDown(e) {
    if (e.key === 'w' || e.key === 'ArrowUp') currentPlayer.dy = -5;
    if (e.key === 's' || e.key === 'ArrowDown') currentPlayer.dy = 5;
    if (e.key === 'a' || e.key === 'ArrowLeft') currentPlayer.dx = -5;
    if (e.key === 'd' || e.key === 'ArrowRight') currentPlayer.dx = 5;
    if (e.key === 'x' || e.key === 'X') shootBall();
}

function handleKeyUp(e) {
    if (e.key === 'w' || e.key === 's' || e.key === 'ArrowUp' || e.key === 'ArrowDown') currentPlayer.dy = 0;
    if (e.key === 'a' || e.key === 'd' || e.key === 'ArrowLeft' || e.key === 'ArrowRight') currentPlayer.dx = 0;
}

function shootBall() {
    if (currentPlayer) {
        ball.dx = (ball.x - currentPlayer.x) / 10;
        ball.dy = (ball.y - currentPlayer.y) / 10;
    }
}

function checkCollision() {
    players.forEach(player => {
        const dx = ball.x - (player.x + player.width / 2);
        const dy = ball.y - (player.y + player.height / 2);
        const distance = Math.sqrt(dx * dx + dy * dy);

        if (distance < ball.radius + player.width / 2) {
            const angle = Math.atan2(dy, dx);
            const speed = 5;

            ball.dx = Math.cos(angle) * speed;
            ball.dy = Math.sin(angle) * speed;

            // Oyuncular birbirinin içinden geçemesin
            player.x -= Math.cos(angle) * speed * 1.5;
            player.y -= Math.sin(angle) * speed * 1.5;
        }
    });
}

document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
Selamlar Hayırlı Cumalar capilot ile basit bir haxball yaptım yukardaki kodları https://codepen.io/pen/ bu sitede yerlerine ekleyip alta gelen kullanıcı yerine random isim yazıp giriş yapın karşı taraf bot ama buglar var x tuşu şut