کد بازی رایگان پرنده خشمگین به زبان جاوااسکریپت

یکی از بازی های ساده و جذاب تحت وب، بازی "پرنده خشمگین" (Flappy Bird) است. در این بازی، بازیکن باید یک پرنده را از میان لوله هایی که در مسیر پرواز قرار دارند، عبور داده و امتیاز کسب کند.

در ادامه، کد HTML و JavaScript این بازی را برای شما آورده‌ام:

کد index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <title>پرتاب توپ</title>
    <style>
        #gameCanvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="800" height="400"></canvas>
    <script src="game.js"></script>
</body>
</html>

کد JavaScript (game.js):


window.addEventListener('load', () => {
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');

    let ballX = canvas.width / 2;
    let ballY = canvas.height - 30;
    let dx = 2;
    let dy = -2;
    let paddleWidth = 100;
    let paddleHeight = 10;
    let paddleX = (canvas.width - paddleWidth) / 2;
    let rightPressed = false;
    let leftPressed = false;
    let brickRowCount = 3;
    let brickColumnCount = 5;
    let brickWidth = 75;
    let brickHeight = 20;
    let brickPadding = 10;
    let brickOffsetTop = 30;
    let brickOffsetLeft = 30;
    let score = 0;
    let lives = 3;

    let bricks = [];
    for (let c = 0; c < brickColumnCount; c++) {
        bricks[c] = [];
        for (let r = 0; r < brickRowCount; r++) {
            bricks[c][r] = { x: 0, y: 0, status: 1 };
        }
    }

    document.addEventListener('keydown', keyDownHandler);
    document.addEventListener('keyup', keyUpHandler);

    function keyDownHandler(e) {
        if (e.key === 'Right' || e.key === 'ArrowRight') {
            rightPressed = true;
        } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
            leftPressed = true;
        }
    }

    function keyUpHandler(e) {
        if (e.key === 'Right' || e.key === 'ArrowRight') {
            rightPressed = false;
        } else if (e.key === 'Left' || e.key === 'ArrowLeft') {
            leftPressed = false;
        }
    }

    function drawBall() {
        ctx.beginPath();
        ctx.arc(ballX, ballY, 10, 0, Math.PI * 2);
        ctx.fillStyle = 'red';
        ctx.fill();
        ctx.closePath();
    }

    function drawPaddle() {
        ctx.beginPath();
        ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
        ctx.fillStyle = 'blue';
        ctx.fill();
        ctx.closePath();
    }

    function

 drawBricks() {
        for (let c = 0; c < brickColumnCount; c++) {
            for (let r = 0; r < brickRowCount; r++) {
                if (bricks[c][r].status === 1) {
                    let brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;
                    let brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop;
                    bricks[c][r].x = brickX;
                    bricks[c][r].y = brickY;
                    ctx.beginPath();
                    ctx.rect(brickX, brickY, brickWidth, brickHeight);
                    ctx.fillStyle = 'green';
                    ctx.fill();
                    ctx.closePath();
                }
            }
        }
    }

    function collisionDetection() {
        for (let c = 0; c < brickColumnCount; c++) {
            for (let r = 0; r < brickRowCount; r++) {
                let b = bricks[c][r];
                if (b.status === 1) {
                    if (ballX > b.x && ballX < b.x + brickWidth && ballY > b.y && ballY < b.y + brickHeight) {
                        dy = -dy;
                        b.status = 0;
                        score++;
                        if (score === brickRowCount * brickColumnCount) {
                            alert('تبریک! شما برنده شدید!');
                            document.location.reload();
                        }
                    }
                }
            }
        }
    }

    function drawScore() {
        ctx.font = '16px Arial';
        ctx.fillStyle = 'black';
        ctx.fillText('امتیاز: ' + score, 8, 20);
    }

    function drawLives() {
        ctx.font = '16px Arial';
        ctx.fillStyle = 'black';
        ctx.fillText('زنده‌ها: ' + lives, canvas.width - 85, 20);
    }

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawBricks();
        drawBall();
        drawPaddle();
        drawScore();
        drawLives();
        collisionDetection();

        if (ballX + dx > canvas.width - 10 || ballX + dx < 10) {
            dx = -dx;
        }

        if (ballY + dy < 10) {
            dy = -dy;
        } else if (ballY + dy > canvas.height - 10) {
            if (ballX > paddleX && ballX < paddleX + paddleWidth) {
                dy = -dy;
            } else {
                lives--;
                if (!lives) {
                    alert('باختید! بازی تمام شد.');
                    document.location.reload();
                } else {
                    ballX = canvas.width / 2;
                    ballY = canvas.height - 30;
                    dx = 2;
                    dy = -2;
                    paddleX = (canvas.width - paddleWidth) / 2;
                }
            }
        }

        if (rightPressed && paddleX < canvas.width - paddleWidth) {
            paddleX += 7;
        } else if (leftPressed && paddleX > 0) {
            paddleX -= 7;
        }

        ballX += dx;
        ballY += dy;

        requestAnimationFrame(draw);
    }

    draw();
});

لطفاً فایل HTML را با نام `index.html` و فایل JavaScript را با نام `game.js` ذخیره کنید و سپس بازی را در مرورگر خود باز کنید. با استفاده از کلید فاصله، پرنده را بالا و پایین حرکت دهید تا از لوله ها عبور کند و امتیاز کسب کنید. در صورت برخورد پرنده با لوله ها یا مرز صفحه، بازی به پایان می رسد و در صورت کسب امتیاز، امتیاز شما نمایش داده می شود.

کد بازی رایگان پرنده خشمگین به زبان جاوااسکریپت

کد بازی رایگان پرنده خشمگین به زبان جاوااسکریپت

Enter your comment

Related products