フラッピーバードみたいなゲーム's game

Click here for free DL of the app version that can save data.

No:14465

←

Prev Next

→

フラッピーバードみたいなゲーム
Developer User6222｜Date and time 23/9/2 7:00:23
Build time 33.005 sec｜Game capacity 6.032KB｜

Script

了解です。以下にフラッピーバード風のゲームを実装したHTMLファイルを示します。

このHTMLファイルをブラウザで開くと、フラッピーバード風のゲームがプレイできます。上記のコードでは、フラッピーバードのようなゲーム画面を作成し、バードを操作してパイプの隙間を通り抜けることでスコアを獲得することが目的です。ゲームオーバーになる条件は、バードが画面外に出た場合やパイプに衝突した場合です。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

Click here for free DL of the app version that can save data.

了解です。以下にフラッピーバード風のゲームを実装したHTMLファイルを示します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Flappy Bird</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
        
        #game {
            position: relative;
            width: 100%;
            height: 100vh;
            background: skyblue;
            overflow: hidden;
        }
        
        #bird {
            position: absolute;
            left: 50px;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            background: yellow;
        }
        
        .pipe {
            position: absolute;
            width: 100px;
            height: 300px;
            background: green;
        }
        
        #score {
            position: absolute;
            top: 20px;
            right: 20px;
            font-size: 24px;
            font-weight: bold;
            color: white;
        }
    </style>
</head>
<body>
    <div id="game">
        <div id="bird"></div>
        <div id="score">0</div>
    </div>
    <script>
        // ゲームの設定
        const gameWidth = 500;
        const gameHeight = window.innerHeight;
        const birdSize = 50;
        const pipeWidth = 100;
        const pipeGap = 200;
        const gravity = 0.5;
        const jumpForce = 10;
        
        // ゲームオブジェクト
        const game = document.getElementById('game');
        const bird = document.getElementById('bird');
        const scoreElement = document.getElementById('score');
        let score = 0;
        let isGameStarted = false;
        let birdY = gameHeight / 2;
        let birdVelocity = 0;
        let pipes = [];
        
        // スタート時の処理
        function startGame() {
            isGameStarted = true;
            birdY = gameHeight / 2;
            birdVelocity = 0;
            score = 0;
            scoreElement.innerText = '0';
            pipes = [];
            game.innerHTML = '<div id="bird"></div><div id="score">0</div>';
            bird = document.getElementById('bird');
            bird.style.top = birdY + 'px';
            
            window.addEventListener('keydown', jump);
            window.addEventListener('touchstart', jump);
            
            setInterval(updateGame, 20);
            setInterval(spawnPipes, 2000);
        }
        
        // ゲームオーバー時の処理
        function gameOver() {
            isGameStarted = false;
            window.removeEventListener('keydown', jump);
            window.removeEventListener('touchstart', jump);
            
            alert('Game Over! Your score: ' + score);
            startGame();
        }
        
        // フレームごとの更新処理
        function updateGame() {
            // バードの位置と速度の更新
            birdY += birdVelocity;
            birdVelocity += gravity;
            if (birdY + birdSize > gameHeight || birdY < 0) {
                gameOver();
                return;
            }
            bird.style.top = birdY + 'px';
            
            // パイプの移動と衝突判定
            pipes.forEach(pipe => {
                pipe.style.left = parseInt(pipe.style.left, 10) - 5 + 'px';
                if (isColliding(pipe, bird)) {
                    gameOver();
                    return;
                }
                if (parseInt(pipe.style.left, 10) + pipeWidth < 0) {
                    pipe.parentElement.removeChild(pipe);
                }
            });
            
            // スコアの更新
            if (isGameStarted) {
                pipes.forEach(pipe => {
                    if (parseInt(pipe.style.left, 10) + pipeWidth === gameWidth / 2) {
                        score++;
                        scoreElement.innerText = score;
                    }
                });
            }
        }
        
        // パイプ生成
        function spawnPipes() {
            const pipeHeight = Math.random() * (gameHeight - pipeGap);
            
            const pipeTop = document.createElement('div');
            pipeTop.classList.add('pipe');
            pipeTop.style.left = gameWidth + 'px';
            pipeTop.style.height = pipeHeight + 'px';
            pipeTop.style.bottom = 'calc(100% - ' + (pipeHeight + pipeGap) + 'px)';
            
            const pipeBottom = document.createElement('div');
            pipeBottom.classList.add('pipe');
            pipeBottom.style.left = gameWidth + 'px';
            pipeBottom.style.top = pipeHeight + pipeGap + 'px';
            
            game.append(pipeTop);
            game.append(pipeBottom);
            pipes.push(pipeTop);
            pipes.push(pipeBottom);
        }
        
        // 衝突判定
        function isColliding(pipe, bird) {
            const pipeRect = pipe.getBoundingClientRect();
            const birdRect = bird.getBoundingClientRect();
            
            return !(
                pipeRect.top > birdRect.bottom ||
                pipeRect.bottom < birdRect.top ||
                pipeRect.right < birdRect.left ||
                pipeRect.left > birdRect.right
            );
        }
        
        // ジャンプ処理
        function jump() {
            if (isGameStarted) {
                birdVelocity = -jumpForce;
            } else {
                startGame();
            }
        }
    </script>
</body>
</html>
```