鬼から制限時間逃げるゲーム's game

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

No:22339

←

Prev Next

→

鬼から制限時間逃げるゲーム
Developer バファリンヌ｜Date and time 23/10/22 8:50:01
Build time 65.31 sec｜Game capacity 4.327KB｜

Script

了解しました。以下に、鬼から制限時間内に逃げるゲームの実装例を示します。

🏃

👻

Time: 30s

この実装では、制限時間内にプレイヤー（🏃）が鬼（👻）から逃げるゲームとなっています。プレイヤーは上下左右の矢印キーを押して操作し、鬼から逃げながら制限時間内にピンチを乗り切りましょう。また、画面上部には残り時間が表示されます。制限時間経過後や鬼に追いつかれた場合にはアラートが表示されます。

←

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 {
            background-color: lightgray;
        }

#player {
            font-size: 30px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

#ghost {
            font-size: 30px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

#timer {
            font-size: 24px;
            position: fixed;
            top: 10px;
            right: 10px;
        }
    </style>
</head>
<body>
    <div id="player">🏃</div>
    <div id="ghost">👻</div>
    <div id="timer">Time: 30s</div>

// タイマーの更新
        function updateTimer() {
            var currentTime = new Date().getTime();
            var elapsedTime = Math.floor((currentTime - startTime) / 1000);
            var remainingTime = limitTime - elapsedTime;
            document.getElementById("timer").textContent = "Time: " + remainingTime + "s";

if (remainingTime <= 0) {
                clearInterval(timerId);
                alert("Game Over!");
            }
        }

// 鬼の移動
        function moveGhost() {
            var newTop = Math.floor(Math.random() * (window.innerHeight - 100)) + 50;
            var newLeft = Math.floor(Math.random() * (window.innerWidth - 100)) + 50;
            document.getElementById("ghost").style.top = newTop + "px";
            document.getElementById("ghost").style.left = newLeft + "px";
        }

// 鬼から逃げる
        function runFromGhost(event) {
            var player = document.getElementById("player");
            var playerPosition = {
                top: player.offsetTop,
                left: player.offsetLeft
            };

var ghost = document.getElementById("ghost");
            var ghostPosition = {
                top: ghost.offsetTop,
                left: ghost.offsetLeft
            };

if (event.key === "ArrowUp" && playerPosition.top > 50) {
                player.style.top = (playerPosition.top - 10) + "px";
            } else if (event.key === "ArrowDown" && playerPosition.top < (window.innerHeight - 100)) {
                player.style.top = (playerPosition.top + 10) + "px";
            } else if (event.key === "ArrowLeft" && playerPosition.left > 50) {
                player.style.left = (playerPosition.left - 10) + "px";
            } else if (event.key === "ArrowRight" && playerPosition.left < (window.innerWidth - 100)) {
                player.style.left = (playerPosition.left + 10) + "px";
            }

if (Math.abs(playerPosition.top - ghostPosition.top) < 50 && Math.abs(playerPosition.left - ghostPosition.left) < 50) {
                clearInterval(timerId);
                alert("You are caught by the ghost!");
            } else {
                moveGhost();
            }
        }

// ゲーム開始
        function startGame() {
            startTime = new Date().getTime();
            timerId = setInterval(updateTimer, 1000);
            document.addEventListener("keydown", runFromGhost);
            moveGhost();
        }

// ゲーム開始ボタンをクリックしたらゲーム開始
        document.addEventListener("DOMContentLoaded", function() {
            document.getElementById("startButton").addEventListener("click", startGame);
        });
    </script>
    <button id="startButton">Start</button>
</body>
</html>
```