AI game creator

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

No:9225

207

←

Prev Next

→

particle
Developer User4315｜Date and time 23/7/22 18:21:28
Build time 30.718 sec｜Game capacity 3.224KB｜

Script

以下は、JavaScriptを使用して実装された簡単なパーティクルゲームの例です。このゲームでは、マウスを操作して絵文字のパーティクルを移動させ、画面内の特定の場所に集めることが目的です。

このゲームでは、マウスの移動に応じてランダムな色やサイズのパーティクルが表示されます。特定の位置にパーティクルが集まると、スコアが加算されます。

←

Prev　Next

→ 　

Back　

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

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

以下は、JavaScriptを使用して実装された簡単なパーティクルゲームの例です。このゲームでは、マウスを操作して絵文字のパーティクルを移動させ、画面内の特定の場所に集めることが目的です。

```html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
      height: 100vh;
      background-color: #222;
      display: flex;
      justify-content: center;
      align-items: center;
    }

canvas {
      background-color: #eee;
      cursor: crosshair;
    }
  </style>

update() {
        this.x += this.speedX;
        this.y += this.speedY;

if (this.x + this.size < 0 || this.x > canvas.width ||
            this.y + this.size < 0 || this.y > canvas.height) {
          particles.splice(particles.indexOf(this), 1);
        }
      }

draw() {
        context.fillStyle = this.color;
        context.fillRect(this.x, this.y, this.size, this.size);
      }
    }

const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    const particles = [];
    let score = 0;

// キャンバスのサイズをウィンドウサイズに合わせる
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    document.body.appendChild(canvas);

canvas.addEventListener('mousemove', moveParticles);

// パーティクルを動かす関数
    function moveParticles(event) {
      const x = event.clientX;
      const y = event.clientY;

const speedX = (Math.random() - 0.5) * 5;
      const speedY = (Math.random() - 0.5) * 5;
      const size = Math.random() * 20 + 10;
      const color = getRandomColor();

particles.push(new Particle(x, y, speedX, speedY, size, color));
    }

// パーティクルをランダムな色で描画する関数
    function getRandomColor() {
      const colors = ["🔴", "🔵", "🟢", "🟡", "🟣", "🟠"];
      return colors[Math.floor(Math.random() * colors.length)];
    }

// パーティクルの更新と描画
    function animate() {
      context.clearRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < particles.length; i++) {
        particles[i].update();
        particles[i].draw();

// 特定の位置にパーティクルが集まった場合にスコアを加算
        if (particles[i].x > canvas.width / 2 - 50 &&
            particles[i].x < canvas.width / 2 + 50 &&
            particles[i].y > canvas.height / 2 - 50 &&
            particles[i].y < canvas.height / 2 + 50) {
          score++;
        }
      }

requestAnimationFrame(animate);
    }

animate();
  </script>
</head>
<body>
</body>
</html>
```

このゲームでは、マウスの移動に応じてランダムな色やサイズのパーティクルが表示されます。特定の位置にパーティクルが集まると、スコアが加算されます。