Fireworks Display from Space's game

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

No:8652

7698

←

Prev Next

→

Fireworks Display from Space
Developer anonymous｜Date and time 70/1/1 9:51:14
Build time unknown sec｜Game capacity 3.074KB｜

Script

このプログラムは、HTMLのcanvas要素を使用して花火を描画し、ボタンを押すことで花火を打ち上げることができます。花火は指定された時間（ここでは10秒）で自動的に終了します。

←

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>
      #canvas {
        background-color: black;
      }
      #button {
        display: block;
        margin-top: 20px;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="360" height="400"></canvas>
    <div id="button">
      <button onclick="launchFirework()">花火を打ち上げる</button>
    </div>

// 花火の描画
        function drawFirework(x, y) {
          const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
          const numParticles = 100;
          
          for (let i = 0; i < numParticles; i++) {
            const particle = {
              x,
              y,
              size: Math.random() * 3 + 1,
              speedX: Math.random() * 3 - 1.5,
              speedY: Math.random() * 3 - 1.5,
              color: colors[Math.floor(Math.random() * colors.length)]
            };
            particles.push(particle);
          }
        }

// 花火のパーティクルの描画
        function drawParticles() {
          particles.forEach((particle, index) => {
            const alpha = particle.size / 3;

ctx.beginPath();
            ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
            ctx.fillStyle = particle.color;
            ctx.globalAlpha = alpha;
            ctx.fill();
            ctx.closePath();

particle.x += particle.speedX;
            particle.y += particle.speedY;
            particle.size -= 0.01;

if (particle.size <= 0) {
              particles.splice(index, 1);
            }
          });
        }

// メインの描画関数
        function draw() {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          drawParticles();

requestAnimationFrame(draw);
        }

// 花火を打ち上げる
        function launch() {
          const x = Math.random() * canvas.width;
          const y = canvas.height-100;

drawFirework(x, y);
        }

// ゲームの開始
        function startGame() {

launch();

interval = setInterval(launch, 1000);
        }

// ゲームの終了
        function stopGame() {
          clearInterval(interval);
        }

const particles = [];
        let interval;

startGame();
        draw();
        setTimeout(stopGame, 10000); // 10秒後にゲーム終了
      }
    </script>
  </body>
</html>
```