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

No:10274

164

←

Prev Next

→

Sumida River Firework Festival (Tokyo)
Developer User4369｜Date and time 23/7/29 20:35:31
Build time 18.794 sec｜Game capacity 2.528KB｜

Script

了解です。以下に、スマートフォンで遊べるシンプルな「隅田川花火大会」のゲームを実装したHTMLファイルの例を示します。

隅田川花火大会

残り時間: 10秒

タッチして花火を打ち上げてください！

このプログラムを1枚のHTMLファイルとして保存し、スマートフォンのWebブラウザで開くと、「隅田川花火大会」というタイトルが表示され、10秒のカウントダウンが始まります。画面をタッチすると、ランダムな位置に花火が打ち上げられます。カウントダウンが終了すると、ゲーム終了と表示されます。なお、花火の画像として絵文字（🎆）を使用しました。スマートフォンのブラウザであれば通常は絵文字が表示されるはずですが、環境によっては表示されない場合がありますのでご了承ください。

←

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>
    body {
      text-align: center;
      font-size: 24px;
      margin-top: 100px;
    }
  </style>
</head>
<body>
  <h1>隅田川花火大会</h1>
  <h3 id="countdown">残り時間: 10秒</h3>
  <p>タッチして花火を打ち上げてください！</p>
  <div id="fireworks"></div>

// 残り時間（秒）
    let seconds = 10;

// 残り時間の表示を更新
    function updateCountdown() {
      document.getElementById("countdown").textContent = "残り時間: " + seconds + "秒";
    }

// 花火をランダムな位置に打ち上げる
    function launchFirework() {
      const fireworksDiv = document.getElementById("fireworks");
      const xPos = Math.floor(Math.random() * (window.innerWidth - 100));
      const yPos = Math.floor(Math.random() * (window.innerHeight - 100));
      fireworksDiv.innerHTML += `<p style="position: absolute; left: ${xPos}px; top: ${yPos}px;">${fireworkImage}</p>`;
    }

// タッチイベントのリスナーを登録
    document.addEventListener("touchstart", function() {
      launchFirework();
    });

// カウントダウンを開始
    const countdownInterval = setInterval(function() {
      seconds--;
      updateCountdown();

if (seconds === 0) {
        clearInterval(countdownInterval);
        document.removeEventListener("touchstart", launchFirework);
        document.getElementById("countdown").textContent = "ゲーム終了";
      }
    }, 1000);
  </script>
</body>
</html>
```

このプログラムを1枚のHTMLファイルとして保存し、スマートフォンのWebブラウザで開くと、「隅田川花火大会」というタイトルが表示され、10秒のカウントダウンが始まります。画面をタッチすると、ランダムな位置に花火が打ち上げられます。カウントダウンが終了すると、ゲーム終了と表示されます。

なお、花火の画像として絵文字（🎆）を使用しました。スマートフォンのブラウザであれば通常は絵文字が表示されるはずですが、環境によっては表示されない場合がありますのでご了承ください。