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

No:7374

1307

←

Prev Next

→

Find the invisible man!
Developer User4009｜Date and time 23/7/7 2:47:44
Build time 11.934 sec｜Game capacity 1.856KB｜

Script

了解です。では、透明人間を探すゲームを作成してみましょう。以下が実装例です。

透明人間を探せ！

このゲームでは、ウェブページ上で透明人間が隠れています。ページをクリックすると透明人間が表示されたり隠れたりします。見つけると「透明人間を見つけました！」と表示され、逃げると「透明人間が逃げました！」と表示されます。ウェブブラウザでこのHTMLファイルを開き、ゲームとして遊ぶことができます。

←

Prev　Next

→ 　

Back　

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

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: #FFFFFF;
      font-family: Arial, sans-serif;
      text-align: center;
    }

#game-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

.invisible {
      opacity: 0;
    }
  </style>
</head>

<body>
  <h1>透明人間を探せ！</h1>
  <p id="result"></p>
  <div id="game-container">
    <img src="透明人間.png" id="invisible-person" class="invisible">
  </div>

gameContainerEl.addEventListener('click', function() {
        if (invisiblePersonEl.classList.contains('invisible')) {
          resultEl.textContent = '透明人間を見つけました！';
          invisiblePersonEl.classList.remove('invisible');
        } else {
          resultEl.textContent = '透明人間が逃げました！';
          invisiblePersonEl.classList.add('invisible');
        }
      });
    };
  </script>
</body>

</html>
```

このゲームでは、ウェブページ上で透明人間が隠れています。ページをクリックすると透明人間が表示されたり隠れたりします。見つけると「透明人間を見つけました！」と表示され、逃げると「透明人間が逃げました！」と表示されます。

ウェブブラウザでこのHTMLファイルを開き、ゲームとして遊ぶことができます。