I want to see fireworks.'s game

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

No:7703

6136

←

Prev Next

→

I want to see fireworks.
Developer o2pi4｜Date and time 23/7/9 13:31:36
Build time 10.918 sec｜Game capacity 2.85KB｜

Script

了解しました。以下に花火を見るための簡単なゲームを作成しました：

このプログラムは、マウスクリック時に花火が打ち上がり、画面に花火のエフェクトが表示されます。花火のエフェクトは数秒間表示された後、自動的に消えます。

←

Prev　Next

→ 　

Back　

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

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

了解しました。以下に花火を見るための簡単なゲームを作成しました：

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>花火を見るゲーム</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    canvas {
      background-color: black;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    // キャンバスの設定
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

// 花火のパーティクルクラス
    class Particle {
      constructor(x, y, size, color) {
        this.x = x;
        this.y = y;
        this.size = size;
        this.color = color;
        this.velocityX = Math.random() * 10 - 5;
        this.velocityY = Math.random() * 3 - 9;
        this.gravity = 0.1;
        this.opacity = 1;
      }

update() {
        this.x += this.velocityX;
        this.y += this.velocityY;
        this.velocityY += this.gravity;
        this.opacity -= 0.01;
      }

draw() {
        ctx.save();
        ctx.globalAlpha = this.opacity;
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();
        ctx.restore();
      }
    }

// 花火の生成
    function createFirework(x, y) {
      const firework = new Particle(x, y, 3, 'white');
      const particles = [];

for (let i = 0; i < 50; i++) {
        particles.push(new Particle(x, y, 2, 'orange'));
      }

fireworks.push({ firework, particles });
    }

// クリックイベント
    canvas.addEventListener('click', (e) => {
      const mousePos = {
        x: e.clientX,
        y: e.clientY
      };

createFirework(mousePos.x, mousePos.y);
    });

// 更新処理
    function update() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

fireworks.forEach((firework, index) => {
        firework.firework.update();
        firework.firework.draw();

if (firework.firework.opacity <= 0) {
          fireworks.splice(index, 1);
        }

firework.particles.forEach((particle, particleIndex) => {
          particle.update();
          particle.draw();

if (particle.opacity <= 0) {
            firework.particles.splice(particleIndex, 1);
          }
        });
      });

requestAnimationFrame(update);
    }

// 初期化
    const fireworks = [];
    update();
  </script>
</body>
</html>
```