The Sunshine Cloud: ✈️☁️'s game

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

No:6173

7051

←

Prev Next

→

The Sunshine Cloud: ✈️☁️
Developer User3857｜Date and time 23/7/1 18:25:02
Build time 26.24 sec｜Game capacity 2.13KB｜

Script

了解です。以下に、スマホで遊べるシンプルなゲーム「ひこうき雲」を実装したコードを示します。

☁️

このプログラムでは、ひこうきが画面内を左右に移動し、画面上部から下方向に雲が表示されるというゲームです。ひこうきの初期位置や移動速度、画面サイズなどは変数で調整することができます。また、ひこうきと雲は絵文字を使用して表示されます。ユーザーはスマホの画面をタップして、ひこうきの移動方向を逆転させることができます。以上が、ひこうき雲ゲームの実装例になります。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下に、スマホで遊べるシンプルなゲーム「ひこうき雲」を実装したコードを示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    #cloud {
      font-size: 40px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div id="cloud">☁️</div>
  
  <script>
    // ひこうきの初期位置
    let planeX = 100;
    let planeY = 100;
    
    // ひこうきの移動量
    let planeSpeed = 5;
    
    // 空の移動量
    let skySpeed = 1;
    
    // 画面サイズ
    let screenWidth = window.innerWidth;
    let screenHeight = window.innerHeight;
    
    // ひこうきの要素を取得
    let plane = document.getElementById("cloud");
    
    // ひこうきの初期位置を設定
    plane.style.top = planeY + "px";
    plane.style.left = planeX + "px";
    
    // ゲームループ
    setInterval(function() {
      // ひこうきの移動
      if (planeX + planeSpeed + 100 >= screenWidth || planeX + planeSpeed <= 0) {
        planeSpeed *= -1;
      }
      planeX += planeSpeed;
      plane.style.left = planeX + "px";
      
      // 空の移動
      planeY -= skySpeed;
      
      // 画面外に出たらリセット
      if (planeY <= -100) {
        planeY = screenHeight + 100;
        planeX = Math.floor(Math.random() * (screenWidth - 100));
      }
      
      // ひこうきの位置を更新
      plane.style.top = planeY + "px";
    }, 10);
  
  </script>
</body>
</html>
```

以上が、ひこうき雲ゲームの実装例になります。