Fireworks A game in which you only watch fireworks that are launched automatically. Fireworks are drawn by JavaScript.'s game

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

No:7677

8889

←

Prev Next

→

Fireworks A game in which you only watch fireworks..ALL
Developer もちきなこ｜Date and time 23/7/9 12:00:25
Build time 15.796 sec｜Game capacity 3.475KB｜

Script

了解しました。以下に、打ち上げ花火を自動で表示するゲームのサンプルコードを示します。

このコードでは、指定されたサイズのキャンバス上に花火が自動で打ち上げられる様子を表示しています。花火はランダムな色のパーティクルで構成され、上に向かって飛んでいきます。画面を開くと自動的に花火が打ち上げられ、連続して花火が打ち上げられます。花火の表示は30ミリ秒ごとに更新されます。なお、このサンプルコードではスマートフォンの操作には対応していませんが、スマートフォンで表示して操作することもできます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

了解しました。以下に、打ち上げ花火を自動で表示するゲームのサンプルコードを示します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>打ち上げ花火</title>
  <style>
    body {
      background-color: black;
    }

canvas {
      border: 1px solid white;
    }
  </style>
</head>
<body>
  <canvas id="fireworksCanvas" width="800" height="500"></canvas>

update() {
        this.x += this.dx;
        this.y += this.dy;
        this.dy += 0.05;

this.life--;
      }

draw(context) {
        context.beginPath();
        context.fillStyle = this.color;
        context.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
        context.fill();
      }
    }

// 花火を打ち上げる関数
    function launchFirework() {
      const x = Math.random() * fireworksCanvas.width;  // x座標はランダムに
      const y = fireworksCanvas.height-(500*Math.random()+50);  // y座標は画面の一番下

for (let i = 0; i < 100; i++) {
        // ランダムな色の花火を生成し、パーティクルとして追加する
        const particle = new Particle(x, y, getRandomColor());
        particles.push(particle);
      }
    }

// ランダムな色を生成する関数
    function getRandomColor() {
      const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
      const randomIndex = Math.floor(Math.random() * colors.length);
      return colors[randomIndex];
    }

const fireworksCanvas = document.getElementById('fireworksCanvas');
    const context = fireworksCanvas.getContext('2d');

const particles = [];

setInterval(() => {
      context.fillStyle = 'rgba(0, 0, 0, 0.3)';
      context.fillRect(0, 0, fireworksCanvas.width, fireworksCanvas.height);

particles.forEach(particle => {
        particle.update();
        particle.draw(context);
      });

// パーティクルが生存期間を終えた場合は削除する
      particles.forEach((particle, index) => {
        if (particle.life <= 0) {
          particles.splice(index, 1);
        }
      });

if (Math.random() < 0.02) {
        launchFirework();
      }
    }, 30);
  </script>
</body>
</html>
```

このコードでは、指定されたサイズのキャンバス上に花火が自動で打ち上げられる様子を表示しています。花火はランダムな色のパーティクルで構成され、上に向かって飛んでいきます。

画面を開くと自動的に花火が打ち上げられ、連続して花火が打ち上げられます。花火の表示は30ミリ秒ごとに更新されます。

なお、このサンプルコードではスマートフォンの操作には対応していませんが、スマートフォンで表示して操作することもできます。