JavaScript HaxBall benzeri kodlanan web tabanlı oyun çalışmıyor

Mercedes.Benz

Mercedes.Benz

Hectopat
Katılım
3 Mart 2022
Mesajlar
165
Yer
Stuttgart/Almanya
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();
 
JS'yi bununla değiştirerek dener misiniz?

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,
    dx: 0,
    dy: 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
    moveBot(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 moveBot(bot) {
    // Bot, topa yöneliyor
    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);

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

    // Botun sınırları aşmaması için kontroller
    if (bot.y - bot.radius < 0) {
        bot.y = bot.radius;
    }
    if (bot.y + bot.radius > canvas.height) {
        bot.y = canvas.height - bot.radius;
    }
    if (bot.x - bot.radius < canvas.width / 2) {
        bot.x = canvas.width / 2 + bot.radius;
    }
    if (bot.x + bot.radius > canvas.width) {
        bot.x = canvas.width - bot.radius;
    }
}

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();
 
A

uwu emrw kun dedi:
JS'yi bununla değiştirerek dener misiniz?

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,
 dx: 0,
 dy: 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.
 moveBot(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 moveBot(bot) {
 // Bot, topa yöneliyor.
 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);

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

 // Botun sınırları aşmaması için kontroller.
 if (bot.y - bot.radius < 0) {
 bot.y = bot.radius;
 }
 if (bot.y + bot.radius > canvas.height) {
 bot.y = canvas.height - bot.radius;
 }
 if (bot.x - bot.radius < canvas.width / 2) {
 bot.x = canvas.width / 2 + bot.radius;
 }
 if (bot.x + bot.radius > canvas.width) {
 bot.x = canvas.width - bot.radius;
 }
}

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();
Genişletmek için tıkla...

Olmus hocam da gol sistemi calısmıyor top giriyor gol olmuyor fizikler HaxBall'daki gibi olsa daha iyi olurdu ama bot calsıyor teşekkürler!
 
Mercedes.Benz dedi:
A



Olmus hocam da gol sistemi calısmıyor top giriyor gol olmuyor fizikler HaxBall'daki gibi olsa daha iyi olurdu ama bot calsıyor teşekkürler!
Genişletmek için tıkla...
Bir de böyle dener misiniz?

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,
    dx: 0,
    dy: 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 2)
    moveBot(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 moveBot(bot) {
    // Bot, topa yöneliyor
    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);

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

    // Botun saha sınırlarını kontrol et
    if (bot.y - bot.radius < 0) {
        bot.y = bot.radius;
    }
    if (bot.y + bot.radius > canvas.height) {
        bot.y = canvas.height - bot.radius;
    }
    if (bot.x - bot.radius < canvas.width / 2) {
        bot.x = canvas.width / 2 + bot.radius;
    }
    if (bot.x + bot.radius > canvas.width) {
        bot.x = canvas.width - bot.radius;
    }
}

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++;
    }

    // Topun pozisyonunu ve hızını sıfırla
    resetBall();

    // Şut aralığını sıfırla
    ball.kickCooldown = false;
}

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

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();
 
Hocam olmadı top sıkısıyor ve kalede top sekiyor geriye bot topu saklıyor olmadı.
 

Benzer konular

J
  • Soru
JavaScript  HTML CSS ve JavaScript ile zar oyunu yapılıyor fakat çalışmıyor
Mesaj
4
Görüntüleme
558
Merlin Ambrosius
Merlin Ambrosius
bayzeppeli
HTML, CSS ve JavaScript nasıl öğrenilebilir?
Mesaj
6
Görüntüleme
514
Aspectw1
Aspectw1
Fueren
HTML, CSS ve JavaScript nasıl geliştirilebilir?
Mesaj
4
Görüntüleme
293
938945
9
Yeniçocuk
HTML, CSS ve Javascript eğitim seti önerisi
Mesaj
6
Görüntüleme
6.268
Msi_lover
M
AzogTheDefiler
HTML, CSS ve JavaScript öğrenme sırası
Mesaj
5
Görüntüleme
1.233
rofl
rofl

Technopat Haberler

Yeni konular

Yeni mesajlar

Geri
Yukarı