Escape from the Beast Mansion game's game

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

No:9809

130

←

Prev Next

→

Escape from the Beast Mansion game
Developer User4433｜Date and time 23/7/28 0:34:38
Build time 28.508 sec｜Game capacity 3.116KB｜

Script

了解しました。以下に野獣邸から脱出するためのゲームの実装例を示します。(※この実装例は一例であり、様々な実装方法があります。)

🚶

🦁

このゲームでは、プレイヤーを表す絵文字のキャラクターを操作して、左右に移動させることができます。ゲーム画面には野獣を表す赤い絵文字のキャラクターが表示されており、プレイヤーが野獣に接触するとゲームオーバーとなります。ゲーム自体はHTMLの`keydown`イベントを監視し、左右の矢印キーでプレイヤーを移動させています。プレイヤーと野獣の衝突判定には、組み込み関数`getBoundingClientRect`を使用しています。このように実装することで、スマートフォンで操作可能な脱出ゲームをHTMLファイルとして実現することができます。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

了解しました。以下に野獣邸から脱出するためのゲームの実装例を示します。(※この実装例は一例であり、様々な実装方法があります。)

```html
<!DOCTYPE html>
<html>
<head>
    <title>野獣邸から脱出するゲーム</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            font-size: 16px;
        }

#game-container {
            position: relative;
            width: 100%;
            height: 100vh;
        }

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

.obstacle {
            position: absolute;
            bottom: 0;
            font-size: 40px;
        }

.beast {
            color: #FF0000;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="player">🚶</div>
        <div class="obstacle beast">🦁</div>
    </div>

function isCollided(element1, element2) {
                var rect1 = element1.getBoundingClientRect();
                var rect2 = element2.getBoundingClientRect();
                return !(rect1.right < rect2.left || rect1.left > rect2.right || rect1.bottom < rect2.top || rect1.top > rect2.bottom);
            }
        });
    </script>
</body>
</html>
```

このゲームでは、プレイヤーを表す絵文字のキャラクターを操作して、左右に移動させることができます。ゲーム画面には野獣を表す赤い絵文字のキャラクターが表示されており、プレイヤーが野獣に接触するとゲームオーバーとなります。

ゲーム自体はHTMLの`keydown`イベントを監視し、左右の矢印キーでプレイヤーを移動させています。プレイヤーと野獣の衝突判定には、組み込み関数`getBoundingClientRect`を使用しています。

このように実装することで、スマートフォンで操作可能な脱出ゲームをHTMLファイルとして実現することができます。