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

No:6538

100

←

Prev Next

→

PET bottle rocket
Developer User3840｜Date and time 23/7/2 18:38:35
Build time 18.388 sec｜Game capacity 1.718KB｜

Script

以下は、スマホでプレイできる簡単なペットボトルロケットのゲームです。必ず1枚の HTML ファイルとして実装し、JavaScript を含むようにします。

ペットボトルロケットゲーム

0メートル

このゲームでは、ペットボトルロケットをクリックすることで加速し、発射ボタンをクリックするとロケットが2秒間アニメーションで上昇します。ロケットの距離も表示され、加速度に応じて進みます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

以下は、スマホでプレイできる簡単なペットボトルロケットのゲームです。必ず1枚の HTML ファイルとして実装し、JavaScript を含むようにします。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ペットボトルロケットゲーム</title>
  <style>
    body {
      text-align: center;
    }
    #rocket {
      width: 100px;
    }
    #button {
      font-size: 24px;
      padding: 10px;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>ペットボトルロケットゲーム</h1>
  <img id="rocket" src="rocket.png" alt="ロケット">
  <p id="distance">0メートル</p>
  <button id="button" onclick="launchRocket()">発射する</button>

const rocket = document.getElementById('rocket');
    const distanceElement = document.getElementById('distance');
    const button = document.getElementById('button');

rocket.addEventListener('click', () => {
      speed += 10;
    });

function launchRocket() {
      rocket.style.animation = 'move 2s linear';
      button.disabled = true;

setTimeout(() => {
        rocket.style.animation = '';
        button.disabled = false;
        speed = 0;
      }, 2000);
    }

setInterval(() => {
      distance += speed;
      distanceElement.textContent = `${distance}メートル`;
    }, 1000);
  </script>
</body>
</html>
```