フラッピーバード's game

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

No:23943

110

←

Prev Next

→

フラッピーバード
Developer User3566｜Date and time 23/11/4 15:54:41
Build time 55.279 sec｜Game capacity 3.383KB｜

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>
        #game-container {
            width: 100%;
            height: 500px;
            background-color: skyblue;
            position: relative;
            overflow: hidden;
        }
        #bird {
            width: 32px;
            height: 32px;
            background-color: yellow;
            position: absolute;
            top: 50%;
            left: 100px;
            transform: translateY(-50%);
        }
        .pipe {
            width: 100px;
            height: 150px;
            background-color: green;
            position: absolute;
        }
        .pipe-top {
            bottom: 100%;
        }
        .pipe-bottom {
            top: 100%;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="bird"></div>
    </div>

let birdPosition = 50;
        let gravity = 2;
        let gameLoop;

function jump() {
            birdPosition -= 50;
        }

function gameUpdate() {
            birdPosition += gravity;
            bird.style.top = birdPosition + 'px';

const pipes = Array.from(document.getElementsByClassName('pipe'));
            pipes.forEach(pipe => {
                const pipePosition = pipe.offsetLeft;

if (pipePosition === 0) {
                    // Add new pipe
                    const newPipeTop = Math.floor(Math.random() * (gameContainer.offsetHeight / 2 - 100) + 50);
                    const newPipeBottom = newPipeTop + 150;

const newPipe = document.createElement('div');
                    newPipe.className = 'pipe pipe-top';
                    newPipe.style.right = '0';
                    newPipe.style.top = '0';
                    newPipe.style.height = newPipeTop + 'px';
                    gameContainer.appendChild(newPipe);

const newPipe2 = document.createElement('div');
                    newPipe2.className = 'pipe pipe-bottom';
                    newPipe2.style.right = '0';
                    newPipe2.style.bottom = '0';
                    newPipe2.style.height = gameContainer.offsetHeight - newPipeBottom + 'px';
                    gameContainer.appendChild(newPipe2);
                }

if (pipePosition < 100 && pipePosition > 0 && birdPosition < pipe.offsetHeight) {
                    // Game Over
                    clearInterval(gameLoop);
                    alert('Game Over');
                    location.reload();
                }

if (pipePosition < -100) {
                    // Remove passed pipe
                    gameContainer.removeChild(pipe);
                }

pipe.style.left = pipePosition - 1 + 'px';
            });
        }

function startGame() {
            gameLoop = setInterval(gameUpdate, 10);
        }

gameContainer.addEventListener('click', jump);
        startGame();
    </script>
</body>
</html>
```
このHTMLファイルでは、スマホで操作できるフラッピーバードのゲームが実装されています。