💩パニック

🏃
Score: 0
Replay
このアプリを作ったプロンプト
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>💩パニック</title>
    <style>
        body {
            text-align: center;
            margin-top: 100px;
        }

        #stage {
            width: 350px;
            height: 350px;
            border: 2px solid black;
            margin: 0 auto;
            position: relative;
        }

        #player {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
        }

        .poop {
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: brown;
            border-radius: 50%;
        }

        #score {
            font-size: 20px;
            margin-bottom: 20px;
        }

        #replay {
            display: none;
            font-size: 18px;
            background-color: #fdd835;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h1>💩パニック</h1>
<div id="stage">
    <div id="player">🏃</div>
</div>
<div id="score">Score: 0</div>
<div id="replay">Replay</div>

<script>
    // ゲームパラメータ
    const poopSpeed = 5;
    const poopFrequency = 1200;
    let score = 0;
    let poopCount = 0;
    let gameover = false;

    // ステージの要素を取得
    const stage = document.getElementById("stage");
    const player = document.getElementById("player");
    const scoreElement = document.getElementById("score");
    const replayButton = document.getElementById("replay");

    // ゲームスタート
    function startGame() {
        player.style.left = "50%"; // プレイヤーをステージの中央に配置
        gameover = false;
        score = 0;
        poopCount = 0;
        scoreElement.textContent = `Score: ${score}`;
        replayButton.style.display = "none";
        stage.addEventListener("mousemove", movePlayer);
        setInterval(createPoop, poopFrequency);
        gameLoop();
    }

    // ゲームループ
    function gameLoop() {
        if (gameover) return;

        // 💩との当たり判定
        const poops = document.querySelectorAll(".poop");
        poops.forEach(function (poop) {
            const poopRect = poop.getBoundingClientRect();
            const playerRect = player.getBoundingClientRect();
            if (isCollision(poopRect, playerRect)) {
                gameOver();
            } else if (poopRect.top >= window.innerHeight) {
                poopCount++;
                score++;
                scoreElement.textContent = `Score: ${score}`;
                poop.remove();
            }
        });

        // スコアに応じて💩の速度を上げる
        if (score % 5 === 0) {
            const currentSpeed = poopFrequency - 0.2 * score;
            clearInterval(createPoop);
            setInterval(createPoop, currentSpeed);
        }

        requestAnimationFrame(gameLoop);
    }

    // プレイヤーの移動
    function movePlayer(e) {
        const x = e.clientX;
        const stageRect = stage.getBoundingClientRect();
        player.style.left = `${x - stageRect.left}px`;
    }

    // 💩の生成
    function createPoop() {
        if (poopCount > 7) {
            gameOver();
            return;
        }

        const poop = document.createElement("div");
        poop.classList.add("poop");
        const leftOffset = Math.random() * (stage.offsetWidth - 30);
        poop.style.left = `${leftOffset}px`;
        stage.appendChild(poop);

        poopCount++;
        setTimeout(() => {
            poop.remove();
            poopCount--;
        }, 3000);
    }

    // ゲームオーバー
    function gameOver() {
        gameover = true;
        stage.removeEventListener("mousemove", movePlayer);
        replayButton.style.display = "block";
    }

    // 当たり判定
    function isCollision(rect1, rect2) {
        return !(rect1.right < rect2.left ||
            rect1.left > rect2.right ||
            rect1.bottom < rect2.top ||
            rect1.top > rect2.bottom);
    }

    // リプレイボタンのクリックイベント
    replayButton.onclick = () => {
        startGame();
    };

    // ゲームスタート
    startGame();
</script>
</body>
</html>