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

No:7689

1892

←

Prev Next

→

Water Circulation Falls
Developer o2pi4｜Date and time 23/7/9 13:08:51
Build time 10.348 sec｜Game capacity 2.3KB｜

Script

了解です。以下に、JavaScriptを含むHTMLファイルで水循環の滝を題材にしたゲームを実装します。

水循環の滝ゲーム

Score: 0

このゲームでは、スマートフォンの傾きを利用してプレイヤーを操作します。水循環の滝をイメージしたブルーの領域内に、オレンジ色のプレイヤーが表示されます。スマートフォンを傾けるとプレイヤーの位置が左右に移動し、スコアが加算されます。プレイヤーが画面外に出ないように注意しながら、できるだけ長くプレイしましょう。なお、このゲームはスマホ操作を前提としているため、PC上では傾きイベントが発生しないためプレイできません。スマートフォン上でお試しください。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下に、JavaScriptを含むHTMLファイルで水循環の滝を題材にしたゲームを実装します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>水循環の滝ゲーム</title>
  <style>
    #waterfall {
      width: 200px;
      height: 300px;
      background: skyblue;
      position: relative;
    }
    #player {
      width: 20px;
      height: 20px;
      background: orange;
      position: absolute;
      bottom: 0;
      left: 0;
    }
    #score {
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h1>水循環の滝ゲーム</h1>
  <div id="waterfall">
    <div id="player"></div>
  </div>
  <p id="score">Score: 0</p>

// スマホの傾きイベントを監視し、プレイヤーの位置を更新する
    window.addEventListener('deviceorientation', function(event) {
      var x = event.beta;
      var y = event.gamma;

// スマホの傾きに応じてプレイヤーの位置を更新する
      currentPosition += y;
      if (currentPosition < 0) {
        currentPosition = 0;
      } else if (currentPosition > (waterfall.offsetWidth - player.offsetWidth)) {
        currentPosition = waterfall.offsetWidth - player.offsetWidth;
      }
      player.style.left = currentPosition + "px";
      currentScore++;
      score.innerHTML = "Score: " + currentScore;
    });

</script>
</body>
</html>
```

なお、このゲームはスマホ操作を前提としているため、PC上では傾きイベントが発生しないためプレイできません。スマートフォン上でお試しください。