Preventing a crowd avalanche game's game

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

No:10249

146

←

Prev Next

→

Preventing a crowd avalanche game
Developer User4369｜Date and time 23/7/29 15:18:29
Build time 18.904 sec｜Game capacity 3.478KB｜

Script

了解です。以下に群衆雪崩を防ぐゲームの実装例を示します。このゲームでは、「🧑」を操作して落ちてくる「🏃」を避けます。スマートフォンでのプレイを想定しています。

🧑

上記のコードをHTMLファイルに保存し、ブラウザで開くとゲームがプレイできます。画面下部の「🧑」をスワイプすることで移動し、落ちてくる「🏃」を避けるゲームです。敵に接触するとゲームオーバーになります。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>群衆雪崩ゲーム</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

#player {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 48px;
        }

.enemy {
            position: absolute;
            font-size: 48px;
        }
    </style>
</head>
<body>
    <script>
        const player = document.getElementById('player');
        const gameArea = document.body;
        const areaWidth = window.innerWidth;
        const areaHeight = window.innerHeight;
        const playerWidth = player.offsetWidth;
        const playerHeight = player.offsetHeight;
        let gameLoop;

function updatePlayerPosition(x) {
            player.style.left = `${x}px`;
        }

function collisionDetection(player, enemy) {
            const rect1 = player.getBoundingClientRect();
            const rect2 = enemy.getBoundingClientRect();
            return !(
                rect1.top > rect2.bottom ||
                rect1.right < rect2.left ||
                rect1.bottom < rect2.top ||
                rect1.left > rect2.right
            );
        }

function endGame() {
            clearInterval(gameLoop);
            alert('ゲームオーバー');
        }

function startGame() {
            gameLoop = setInterval(() => {
                createEnemy();
                moveEnemies();
            }, 1000);
        }
        
        document.addEventListener('DOMContentLoaded', () => {
            updatePlayerPosition((areaWidth - playerWidth) / 2);
            startGame();

document.addEventListener('touchmove', (event) => {
                event.preventDefault();
                const x = event.changedTouches[0].pageX;
                updatePlayerPosition(x);
            });
        });
    </script>
    <div id="player">🧑</div>
</body>
</html>
```