Soap bubble submarine flying high in the sky's game

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

No:5782

444

←

Prev Next

→

Soap bubble submarine flying high in the sky
Developer User3589｜Date and time 23/6/30 19:48:29
Build time 23.016 sec｜Game capacity 1.734KB｜

Script

了解しました。以下に、シャボン玉型潜水艦が空高く飛んでいくことをゲームとして部分的に表現するJavaScriptプログラムを示します。

🛁

このプログラムは、シャボン玉型の潜水艦（🛁）を表示し、タッチすると上昇します。潜水艦は最大で90pxまで上昇するようになっており、10pxずつ上昇します。一度上昇を開始すると、50ミリ秒ごとに再帰的に上昇していきます。ただし、このプログラムは部分的なゲーム化にとどまりますが、スマホ操作に対応し、シャボン玉型潜水艦が上昇していく様子を楽しむことができます。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

了解しました。以下に、シャボン玉型潜水艦が空高く飛んでいくことをゲームとして部分的に表現するJavaScriptプログラムを示します。

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    #submarine {
      font-size: 3em;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
    }
  </style>
</head>
<body>
  <div id="submarine">🛁</div>

// シャボン玉型潜水艦を上昇させる関数
    function ascendSubmarine() {
      let currentPosition = parseInt(submarine.style.bottom);
      if (isNaN(currentPosition)) currentPosition = 0;

if (currentPosition < 90) { // シャボン玉型潜水艦が最大で90pxまで上昇します
        currentPosition += 10; // 10pxずつ上昇する
        submarine.style.bottom = currentPosition + 'px';
        setTimeout(ascendSubmarine, 50); // 50ミリ秒ごとに再帰的に上昇させる
      }
    }

// スマホ操作に対応するためにタッチイベントを利用します
    document.addEventListener('touchstart', ascendSubmarine);
  </script>
</body>
</html>
```

このプログラムは、シャボン玉型の潜水艦（🛁）を表示し、タッチすると上昇します。潜水艦は最大で90pxまで上昇するようになっており、10pxずつ上昇します。一度上昇を開始すると、50ミリ秒ごとに再帰的に上昇していきます。

ただし、このプログラムは部分的なゲーム化にとどまりますが、スマホ操作に対応し、シャボン玉型潜水艦が上昇していく様子を楽しむことができます。