打ち上げ花火花火はJavaScriptによって線画されます。細かいパーティクルです。's game

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

No:5121

4315

←

Prev Next

→

打ち上げ花火花火はJavaScriptによって線画されます。細かいパーティクルです。
Developer もちきなこ｜Date and time 23/6/29 18:45:23
Build time 41.34 sec｜Game capacity 3.594KB｜

Script

了解です。以下に、打ち上げ花火をゲーム化したJavaScriptのコードを示します。

このコードでは、クリックされるたびに打ち上げ花火が表示されます。花火は細かいパーティクルで描画され、ランダムな色と速度で打ち上がります。花火は重力の影響を受けて落下し、明るさが減衰します。また、キャンバスはクリックするたびにクリアされ、新たな花火が打ち上げられます。このプログラムでは、ユーザーがスマートフォンで画面をタップすることでゲームを操作します。対応するボタンや操作方法を追加することも可能ですが、このコードはクリック操作のみを対象としています。なお、絵文字はこのテキスト形式のコード上では使用できず、画像などの外部リソースを利用する必要があります。

←

Prev　Next

→ 　

Back　

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

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

了解です。以下に、打ち上げ花火をゲーム化したJavaScriptのコードを示します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>打ち上げ花火</title>
  <style>
    canvas {
      background-color: black;
      display: block;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <canvas id="fireworksCanvas"></canvas>

// 打ち上げ花火を管理するクラス
      class Firework {
        constructor(x, y) {
          this.x = x;
          this.y = y;
          this.speed = Math.random() * 5 + 1; // 打ち上げる速さ
          this.angle = Math.random() * Math.PI * 2; // 打ち上げる方向
          this.gravity = 0.05; // 花火が下に落ちる速さ
          this.brightness = Math.random() * 75 + 50; // 花火の明るさ（色の強さ）
          this.targetRadius = 1; // ターゲットの半径
        }

update() {
          this.x += Math.cos(this.angle) * this.speed; // x方向への移動量
          this.y += Math.sin(this.angle) * this.speed; // y方向への移動量
          this.speed += this.gravity; // 重力による速度の変化
          this.alpha = 1 - this.speed / 100; // 花火の明るさの減衰

// 花火の描画
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.targetRadius, 0, Math.PI * 2);
          ctx.fillStyle = `hsl(${Math.random() * 360}, 100%, ${this.brightness}%)`;
          ctx.globalAlpha = this.alpha;
          ctx.fill();
        }
      }

// 花火を管理する配列
      const fireworks = [];

// クリック時に花火を打ち上げる
      document.addEventListener("click", function(event) {
        fireworks.push(new Firework(event.clientX, event.clientY));
      });

// アニメーションループ
      function loop() {
        // キャンバスをクリアする
        ctx.fillStyle = "rgba(0, 0, 0, 0.2)";
        ctx.fillRect(0, 0, width, height);

// 打ち上げ花火を更新・描画する
        for (let i = fireworks.length - 1; i >= 0; i--) {
          fireworks[i].update();
          if (fireworks[i].alpha <= 0) {
            fireworks.splice(i, 1);
          }
        }

// アニメーションループの再帰呼び出し
        requestAnimationFrame(loop);
      }

// アニメーションループを開始する
      loop();
    });
  </script>
</body>
</html>
```

このコードでは、クリックされるたびに打ち上げ花火が表示されます。花火は細かいパーティクルで描画され、ランダムな色と速度で打ち上がります。花火は重力の影響を受けて落下し、明るさが減衰します。また、キャンバスはクリックするたびにクリアされ、新たな花火が打ち上げられます。

このプログラムでは、ユーザーがスマートフォンで画面をタップすることでゲームを操作します。対応するボタンや操作方法を追加することも可能ですが、このコードはクリック操作のみを対象としています。

なお、絵文字はこのテキスト形式のコード上では使用できず、画像などの外部リソースを利用する必要があります。