AI game creator

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

No:9236

1082

←

Prev Next

→

firework(s) display
Developer User4246｜Date and time 23/7/22 20:30:37
Build time 37.502 sec｜Game capacity 4.921KB｜

Script

了解しました。以下にスマホで遊べる花火大会のゲームの例を実装します。

このプログラムは、スマホで操作しやすいようにキャンバスを使った花火大会のゲームです。クリックすると、その位置から花火が打ち上げられ、画面上で花火が爆発します。花火はランダムな色で表示され、パーティクルとして広がります。花火が終わると、次の花火を打ち上げることもできます。このプログラムではJavaScriptを使用して、花火と花火のパーティクルを作成・表示し、クリックイベントを処理しています。スマホで操作する場合は、タッチイベントに変更する必要があります。スマホで実行する場合は、上記のコードをHTMLファイルに保存し、スマホのブラウザで開いてください。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

了解しました。以下にスマホで遊べる花火大会のゲームの例を実装します。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>花火大会</title>
    <style>
      #canvas {
        background-color: black;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="400" height="600"></canvas>
    <script>
      // 花火作成用のクラス
      class Firework {
        constructor(x, y, color, size, speed) {
          this.x = x;
          this.y = y;
          this.color = color;
          this.size = size;
          this.speed = speed;
          this.dy = -speed;
          this.gravity = 0.2;
          this.time = 0;
          this.exploded = false;
          this.particles = [];
        }
        
        update() {
          if (!this.exploded) {
            this.time += 1;
            this.y += this.dy;
            this.dy += this.gravity;
            
            if (this.dy >= 0) {
              this.exploded = true;
              this.createParticles();
            }
          }
          
          for (let i = this.particles.length - 1; i >= 0; i--) {
            const particle = this.particles[i];
            
            particle.update();
            
            if (particle.size <= 0) {
              this.particles.splice(i, 1);
            }
          }
        }
        
        createParticles() {
          for (let i = 0; i < 100; i++) {
            const angle = Math.random() * Math.PI * 2;
            const speed = Math.random() * 4 + 1;
            const vx = Math.cos(angle) * speed;
            const vy = Math.sin(angle) * speed;
            const size = Math.random() * 3 + 1;
            const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
            
            this.particles.push(new Particle(this.x, this.y, vx, vy, size, color));
          }
        }
        
        draw(ctx) {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.fillStyle = this.color;
          ctx.fill();
          ctx.closePath();
          
          for (const particle of this.particles) {
            particle.draw(ctx);
          }
        }
      }
      
      // 花火のパーティクル作成用のクラス
      class Particle {
        constructor(x, y, vx, vy, size, color) {
          this.x = x;
          this.y = y;
          this.vx = vx;
          this.vy = vy;
          this.size = size;
          this.color = color;
        }
        
        update() {
          this.x += this.vx;
          this.y += this.vy;
          this.vx *= 0.98;
          this.vy *= 0.98;
          this.size *= 0.99;
        }
        
        draw(ctx) {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.fillStyle = this.color;
          ctx.fill();
          ctx.closePath();
        }
      }
      
      // ゲームの設定
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      const fireworks = [];
      
      canvas.addEventListener('click', (event) => {
        const x = event.clientX - canvas.getBoundingClientRect().left;
        const y = event.clientY - canvas.getBoundingClientRect().top;
        const color = `hsl(${Math.random() * 360}, 100%, 50%)`;
        const size = Math.random() * 4 + 1;
        const speed = Math.random() * 3 + 2;
        
        fireworks.push(new Firework(x, y, color, size, speed));
      });
      
      function update() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        for (let i = fireworks.length - 1; i >= 0; i--) {
          const firework = fireworks[i];
          
          firework.update();
          firework.draw(ctx);
          
          if (firework.exploded && firework.particles.length === 0) {
            fireworks.splice(i, 1);
          }
        }
        
        requestAnimationFrame(update);
      }
      
      update();
    </script>
  </body>
</html>
```

このプログラムは、スマホで操作しやすいようにキャンバスを使った花火大会のゲームです。クリックすると、その位置から花火が打ち上げられ、画面上で花火が爆発します。花火はランダムな色で表示され、パーティクルとして広がります。花火が終わると、次の花火を打ち上げることもできます。

このプログラムではJavaScriptを使用して、花火と花火のパーティクルを作成・表示し、クリックイベントを処理しています。スマホで操作する場合は、タッチイベントに変更する必要があります。

スマホで実行する場合は、上記のコードをHTMLファイルに保存し、スマホのブラウザで開いてください。