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

No:7294

1032

←

Prev Next

→

Whale Watching Whales
Developer User1006｜Date and time 23/7/6 20:13:08
Build time 15.633 sec｜Game capacity 2.393KB｜

Script

以下は、JavaScriptを使用してゲーム化されたホエールウオッチングクジラの例です。このゲームでは、プレイヤーはスマホの操作を前提として、クジラを見つけるためにスワイプ操作をします。

ホエールウオッチングクジラ

🐳

上記のコードは、HTMLファイルとして実装されており、JavaScriptが含まれています。ゲームコンテンツはホエールウオッチングクジラであり、制限時間内にクジラをクリックすることでスコアを獲得します。クジラはランダムな位置に表示され、クリックすると新しい位置に移動します。スコアは画面上に表示されます。

←

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>
    #game-container {
      width: 300px;
      height: 300px;
      border: 1px solid black;
      position: relative;
      overflow: hidden;
    }
    #whale {
      width: 100px;
      height: 100px;
      position: absolute;
      top: 0;
      left: 0;
      transition: top 0.5s ease-out, left 0.5s ease-out;
      font-size: 50px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>ホエールウオッチングクジラ</h1>
  <div id="game-container">
    <div id="whale">🐳</div>
  </div>

gameContainer.addEventListener('click', function() {
        score++;
        updateScore();
        moveWhale();
      });

function updateScore() {
        document.getElementById('score').textContent = `Score: ${score}`;
      }

function moveWhale() {
        const containerWidth = gameContainer.offsetWidth;
        const containerHeight = gameContainer.offsetHeight;
        const whaleWidth = whale.offsetWidth;
        const whaleHeight = whale.offsetHeight;

const maxX = containerWidth - whaleWidth;
        const maxY = containerHeight - whaleHeight;

const randomX = Math.floor(Math.random() * maxX);
        const randomY = Math.floor(Math.random() * maxY);

whale.style.left = randomX + 'px';
        whale.style.top = randomY + 'px';
      }

moveWhale();
    });
  </script>
</body>
</html>
```