AI game creator

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

No:26053

←

Prev Next

→

パーティクル
Developer User12818｜Date and time 23/11/26 11:27:21
Build time 59.196 sec｜Game capacity 2.487KB｜

Script

了解しました。以下にHTMLファイルの実装例を示します。

このプログラムでは、キャンバス上でパーティクルがランダムに動き回るゲームが実装されています。スマホ画面にタッチすると、その位置にパーティクルが生成されます。パーティクルは徐々に小さくなりながら移動し続けます。パーティクルが一定の大きさ以下になると消えます。このようなゲームを実装することで、スマホを操作する人が楽しめるエンターテイメント体験を提供することができます。

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

了解しました。以下にHTMLファイルの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <title>パーティクルゲーム</title>
  <style>
    #canvas {
      width: 100%;
      height: 100%;
      background-color: black;
    }
  </style>
</head>
<body>
  <canvas id="canvas"></canvas>
  <script>
    // ゲームの処理を記述する
    window.onload = function() {
      const canvas = document.getElementById('canvas');
      const ctx = canvas.getContext('2d');
      const particles = [];

canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

class Particle {
        constructor(x, y, radius) {
          this.x = x;
          this.y = y;
          this.radius = radius;
          this.dx = Math.random() * 4 - 2;
          this.dy = Math.random() * 4 - 2;
        }

draw() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
          ctx.fillStyle = 'white';
          ctx.fill();
        }

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

if (this.radius > 0.2) {
            this.radius -= 0.05;
          }

this.draw();
        }
      }

function createParticles(e) {
        const xPos = e.touches[0].clientX;
        const yPos = e.touches[0].clientY;

for (let i = 0; i < 5; i++) {
          particles.push(new Particle(xPos, yPos, Math.random() * 5 + 2));
        }
      }

function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

particles.forEach((particle, index) => {
          if (particle.radius <= 0.2) {
            particles.splice(index, 1);
          } else {
            particle.update();
          }
        });

requestAnimationFrame(animate);
      }

canvas.addEventListener('touchstart', createParticles);
      animate();
    }
  </script>
</body>
</html>
```

このプログラムでは、キャンバス上でパーティクルがランダムに動き回るゲームが実装されています。スマホ画面にタッチすると、その位置にパーティクルが生成されます。パーティクルは徐々に小さくなりながら移動し続けます。パーティクルが一定の大きさ以下になると消えます。

このようなゲームを実装することで、スマホを操作する人が楽しめるエンターテイメント体験を提供することができます。