Aquarium swims! Mysterious Phenomenon's game

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

No:5445

1431

←

Prev Next

→

Aquarium swims! Mysterious Phenomenon
Developer User3589｜Date and time 23/6/30 2:59:38
Build time 20.686 sec｜Game capacity 1.839KB｜

Script

了解です！以下に「水族館が泳ぐ！怪奇現象」というゲームを作成します。

このゲームでは、水族館内にランダムに魚が表示されます。それぞれの魚をクリックすると消えます。ご自由にお楽しみください！

←

Prev　Next

→ 　

Back　

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

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

了解です！以下に「水族館が泳ぐ！怪奇現象」というゲームを作成します。

```
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>水族館が泳ぐ！怪奇現象</title>
  <style>
    #aquarium {
      width: 100%;
      height: 400px;
      background-color: deepskyblue;
      position: relative;
    }
    .fish {
      position: absolute;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div id="aquarium"></div>

// 水族館を取得
    const aquarium = document.getElementById('aquarium');

// 魚をランダムな位置に表示する関数
    function displayFish() {
      for (let i = 0; i < fishTypes.length; i++) {
        const fish = document.createElement('span');
        fish.innerHTML = fishTypes[i];
        fish.classList.add('fish');
        
        // ランダムな位置に表示
        const randomPosition = initialPositions[Math.floor(Math.random() * initialPositions.length)];
        fish.style.left = randomPosition.x + 'px';
        fish.style.top = randomPosition.y + 'px';
        
        // 魚をクリックすると消えるイベントを追加
        fish.addEventListener('click', () => {
          fish.remove();
        });

aquarium.appendChild(fish);
      }
    }

// ゲームを開始
    displayFish();
  </script>
</body>
</html>
```

このゲームでは、水族館内にランダムに魚が表示されます。それぞれの魚をクリックすると消えます。ご自由にお楽しみください！