<!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
x tuşu şut
Pc için sanırım
