Mercedes.Benz
Hectopat
Daha fazla
- Sistem Özellikleri
- İşlemci: Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz 2.30 GHz
RAM: 8,00 GB
Sistem Türü: 64 bit işletim sistemi, x64 tabanlı işlemci
- Cinsiyet
- Erkek
HaxBall benzeri oyun yaptım fakat kodlar çalışmıyor. yani fiziklerde botta sıkıntı var, 3 gündür uğraşıyorum yapamadım. yardımcı olabilecek var mı? (css javascript ve html kullanarak yazdım)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Futbol-Hokey Oyunu</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="scoreboard">
<span id="score1">0</span> - <span id="score2">0</span>
</div>
<div id="gameCanvasContainer">
<canvas id="gameCanvas"></canvas>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
body, html {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #000;
overflow: hidden;
}
#scoreboard {
position: absolute;
top: 20px;
left: 20px;
font-size: 24px;
color: #fff; /* Beyaz metin */
}
#gameCanvasContainer {
position: relative;
width: 800px;
height: 400px;
background-color: #000;
border: 2px solid #fff;
overflow: hidden;
}
canvas {
width: 100%;
height: 100%;
}
JavaScript:
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 400;
const playerRadius = 20;
const ballRadius = 10;
const goalWidth = 20;
const goalHeight = 100;
const goalPostWidth = 5;
const player1 = {
x: 50,
y: canvas.height / 2,
radius: playerRadius,
color: '#3498db',
speed: 5,
kickingDistance: 50,
score: 0,
upKey: 'KeyW',
downKey: 'KeyS',
leftKey: 'KeyA',
rightKey: 'KeyD',
};
const player2 = {
x: canvas.width - 70,
y: canvas.height / 2,
radius: playerRadius,
color: '#e74c3c',
speed: 6,
score: 0,
};
const ball = {
x: canvas.width / 2,
y: canvas.height / 2,
radius: ballRadius,
color: '#fff',
speed: 7,
dx: 0,
dy: 0,
kickPower: 12,
kickCooldown: false,
};
let score1 = 0;
let score2 = 0;
const scoreboard1 = document.getElementById('score1');
const scoreboard2 = document.getElementById('score2');
function drawPlayer(player) {
ctx.beginPath();
ctx.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
ctx.fillStyle = player.color;
ctx.fill();
ctx.closePath();
}
function drawBall() {
ctx.beginPath();
ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
ctx.fillStyle = ball.color;
ctx.fill();
ctx.closePath();
}
function drawGoals() {
// Sol kale
ctx.fillStyle = '#ccc'; // Gri
ctx.fillRect(0, canvas.height / 2 - goalHeight / 2, goalWidth, goalHeight);
// Sol kale direkleri
ctx.fillRect(goalWidth - goalPostWidth / 2, canvas.height / 2 - goalHeight / 2, goalPostWidth, goalHeight);
// Sağ kale
ctx.fillRect(canvas.width - goalWidth, canvas.height / 2 - goalHeight / 2, goalWidth, goalHeight);
// Sağ kale direkleri
ctx.fillRect(canvas.width - goalWidth + goalPostWidth / 2, canvas.height / 2 - goalHeight / 2, goalPostWidth, goalHeight);
}
function updateScoreboard() {
scoreboard1.textContent = score1;
scoreboard2.textContent = score2;
}
function update() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawGoals();
drawPlayer(player1);
drawPlayer(player2);
drawBall();
// Player 1 hareket
movePlayer(player1);
// Bot oyuncu hareket (Player 1 gibi)
moveBotLikePlayer(player2);
// Top hareket
ball.x += ball.dx;
ball.y += ball.dy;
// Topun duvarlarla çarpışması
if (ball.y + ball.radius > canvas.height || ball.y - ball.radius < 0) {
ball.dy *= -1;
}
if (ball.x + ball.radius > canvas.width || ball.x - ball.radius < 0) {
ball.dx *= -1;
}
// Oyuncularla topun çarpışması
if (checkCollision(ball, player1)) {
handlePlayerCollision(player1);
}
if (checkCollision(ball, player2)) {
handlePlayerCollision(player2);
}
// Kale direkleriyle çarpışma kontrolü
if (checkGoalPostCollision(ball, 0) || checkGoalPostCollision(ball, 1)) {
ball.dx *= -1;
}
// Gol kontrolü
if (ball.x < 0) {
scoreGoal(player2);
}
if (ball.x > canvas.width) {
scoreGoal(player1);
}
updateScoreboard();
requestAnimationFrame(update);
}
function movePlayer(player) {
if (keyState[player.upKey] && player.y - player.radius > 0) {
player.y -= player.speed;
}
if (keyState[player.downKey] && player.y + player.radius < canvas.height) {
player.y += player.speed;
}
if (keyState[player.leftKey] && player.x - player.radius > 0) {
player.x -= player.speed;
}
if (keyState[player.rightKey] && player.x + player.radius < canvas.width / 2) {
player.x += player.speed;
}
// Player 1 topa vur
if (keyState['Space'] && !ball.kickCooldown && distance(player.x, player.y, ball.x, ball.y) < player.radius + ball.radius + player.kickingDistance) {
kickBall(player);
}
}
function moveBotLikePlayer(bot) {
// Bot, Player 1 gibi hareket edecek
if (ball.x < canvas.width / 2) {
const angleToBall = Math.atan2(ball.y - bot.y, ball.x - bot.x);
bot.dx = bot.speed * Math.cos(angleToBall);
bot.dy = bot.speed * Math.sin(angleToBall);
}
}
function handlePlayerCollision(player) {
const angle = Math.atan2(ball.y - player.y, ball.x - player.x);
ball.dx = ball.speed * Math.cos(angle);
ball.dy = ball.speed * Math.sin(angle);
}
function scoreGoal(scorer) {
if (scorer === player1) {
score1++;
} else if (scorer === player2) {
score2++;
}
// Top pozisyonunu ve hızını sıfırla
ball.x = canvas.width / 2;
ball.y = canvas.height / 2;
ball.dx = 0;
ball.dy = 0;
// Şut aralığını ayarla
ball.kickCooldown = false;
}
function kickBall(player) {
const angle = Math.atan2(ball.y - player.y, ball.x - player.x);
ball.dx = ball.kickPower * Math.cos(angle);
ball.dy = ball.kickPower * Math.sin(angle);
// Şut aralığı kontrolü
ball.kickCooldown = true;
setTimeout(() => {
ball.kickCooldown = false;
}, 500); // 0.5 saniye şut aralığı
}
function checkCollision(entity1, entity2) {
const distance = Math.sqrt((entity1.x - entity2.x) ** 2 + (entity1.y - entity2.y) ** 2);
return distance < entity1.radius + entity2.radius;
}
function checkGoalPostCollision(ball, side) {
if (side === 0) {
// Sol kale direkleri
return ball.x - ball.radius < goalWidth && ball.y > canvas.height / 2 - goalHeight / 2 && ball.y < canvas.height / 2 + goalHeight / 2;
} else if (side === 1) {
// Sağ kale direkleri
return ball.x + ball.radius > canvas.width - goalWidth && ball.y > canvas.height / 2 - goalHeight / 2 && ball.y < canvas.height / 2 + goalHeight / 2;
}
}
function distance(x1, y1, x2, y2) {
return Math.sqrt((x2 - x1) ** 2 + (y2 - y1) ** 2);
}
const keyState = {};
document.addEventListener('keydown', function(e) {
keyState[e.code] = true;
});
document.addEventListener('keyup', function(e) {
keyState[e.code] = false;
});
update();
