Lets drink up the ocean water. First, the Pacific Ocean's game

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

No:5151

1882

←

Prev Next

→

Lets drink up the ocean water. First, the Pacific ..ALL
Developer User3589｜Date and time 23/6/29 19:39:51
Build time 22.079 sec｜Game capacity 1.915KB｜

Script

海の水を飲み干すゲームを作りましょう。 HTMLファイルの中に以下のようなコードを記述します。

このゲームでは、画面上の太平洋を表す青い領域があります。プレイヤーは黄色い正方形で、それをタップすることによって海の水を飲みます。水を飲むとプレイヤーの位置が上に移動し、水が飲み尽くされるとゲーム終了です。飲み尽くすことができる水のレベルは`100`ですが、`drinkWater()`関数内の`drunkWater += 10`の部分で水を飲む量を調整できます。このプログラムは1枚のHTMLファイルとして実装されており、JavaScriptのコードは`script`タグで囲まれています。また、スマホの操作に対応しており、プレイヤーをタップして操作します。

←

Prev　Next

→ 　

Back　

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

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

海の水を飲み干すゲームを作りましょう。

HTMLファイルの中に以下のようなコードを記述します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>海の水を飲み干すゲーム</title>
  <style>
    #ocean {
      width: 300px;
      height: 300px;
      background-color: blue;
      position: relative;
    }
    #player {
      width: 30px;
      height: 30px;
      background-color: yellow;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  </style>
</head>
<body>
  <div id="ocean">
    <div id="player" onclick="drinkWater()"></div>
  </div>
  <script>
    let waterLevel = 100;
    let drunkWater = 0;
    
    function drinkWater() {
      drunkWater += 10;
      if (drunkWater >= waterLevel) {
        alert("おめでとう！海の水を飲み干しました！");
        resetGame();
      } else {
        document.getElementById("player").style.bottom = (drunkWater / waterLevel * 100) + "%";
      }
    }
    
    function resetGame() {
      drunkWater = 0;
      document.getElementById("player").style.bottom = "0";
    }
  </script>
</body>
</html>
```

このプログラムは1枚のHTMLファイルとして実装されており、JavaScriptのコードは`script`タグで囲まれています。また、スマホの操作に対応しており、プレイヤーをタップして操作します。