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

No:5614

2517

←

Prev Next

→

Surprise the ghost! The first one to be surprised ..ALL
Developer User3589｜Date and time 23/6/30 14:07:26
Build time 25.066 sec｜Game capacity 2.148KB｜

Script

了解、ゴーストを驚かすゲームを作ります。以下がプログラムです。

ゴーストを驚かそう！

ゴーストにタッチしてください！

このプログラムでは、「ゴーストを驚かせる」ゲームを作りました。プレイヤーはゴーストの上をクリックすることでゴーストを驚かせます。ゴーストが驚いた後、新しい位置に再配置されます。先にゴーストに驚かれた方が負けです。プログラムはHTMLファイルとして保存し、画像ファイル「ghost.png」を同じディレクトリに配置してください。

←

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>
</head>
<body>
    <h1>ゴーストを驚かそう！</h1>
    <p id="status">ゴーストにタッチしてください！</p>
    
    <script>
        // ゴーストをランダムな位置に表示する関数
        function placeGhost() {
            var ghost = document.getElementById("ghost");
            var randomX = Math.floor(Math.random() * (window.innerWidth - ghost.offsetWidth));
            var randomY = Math.floor(Math.random() * (window.innerHeight - ghost.offsetHeight));

ghost.style.left = randomX + "px";
            ghost.style.top = randomY + "px";
        }

// ゴーストがクリックされた時に呼び出される関数
        function scareGhost() {
            var status = document.getElementById("status");
            status.textContent = "ゴーストを驚かせました！あなたの勝ちです！";
            document.removeEventListener("click", scareGhost);
            placeGhost();
        }

// ゴースト画像を作成してbodyに追加する
        var ghost = document.createElement("img");
        ghost.src = "ghost.png";
        ghost.id = "ghost";
        ghost.style.position = "absolute";
        ghost.style.cursor = "pointer";
        placeGhost();
        document.body.appendChild(ghost);

// ゴーストがクリックされた時にscareGhost関数を呼び出す
        document.addEventListener("click", scareGhost);
    </script>
</body>
</html>
```