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

یکی از بازی های ساده و جذاب تحت وب، بازی "پرنده خشمگین" (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` ذخیره کنید و سپس بازی را در مرورگر خود باز کنید. با استفاده از کلید فاصله، پرنده را بالا و پایین حرکت دهید تا از لوله ها عبور کند و امتیاز کسب کنید. در صورت برخورد پرنده با لوله ها یا مرز صفحه، بازی به پایان می رسد و در صورت کسب امتیاز، امتیاز شما نمایش داده می شود.

سورس اول

سورس دوم

دسته :

لینک دانلود

لیست نظرات

نظر خود را وارد نمایید

ورود

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

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

نظر خود را وارد نمایید

محصولات مرتبط