Additive composite glitter particle on black background's game

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

No:5406

7059

←

Prev Next

→

Additive composite glitter particle on black backg..ALL
Developer User3812｜Date and time 23/6/30 1:22:42
Build time 27.881 sec｜Game capacity 2.612KB｜

Script

了解しました。以下に、スマートフォンで遊べる加算合成キラキラパーティクルのゲームの実装例を示します。このゲームでは、画面タッチ時にキラキラパーティクルが表示されます。

このコードは、スマートフォンの画面上でタッチ操作をすると、キラキラパーティクルが表示されます。パーティクルは画面内をランダムに移動し、サイズが徐々に小さくなります。また、表示されているパーティクルが一定のサイズ以下になると消えます。このゲームは、HTMLファイルに直接記述することで、ブラウザ上で実行できます。JavaScriptコードは`
`タグで囲まれており、画面のロード時に自動的に実行されます。なお、実行環境によってパフォーマンスが異なる場合がありますので、ご了承ください。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
<style>
  * {
    margin: 0;
    padding: 0;
  }
  
  canvas {
    display: block;
    background: black;
    width: 100%;
    height: 100%;
  }
</style>
</head>
<body>
<canvas id="canvas"></canvas>

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

class Particle {
    constructor(x, y) {
      this.x = x;
      this.y = y;
      this.size = Math.random() * 15 + 1;
      this.speedX = Math.random() * 3 - 1.5;
      this.speedY = Math.random() * 3 - 1.5;
    }

update() {
      this.x += this.speedX;
      this.y += this.speedY;
      if (this.size > 0.2) this.size -= 0.1;
    }

draw() {
      context.fillStyle = "rgba(255, 255, 255, 0.7)";
      context.beginPath();
      context.arc(this.x, this.y, this.size, 0, Math.PI * 2);
      context.closePath();
      context.fill();
    }
  }

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));
    }
  }

function animateParticles() {
    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].size <= 0.2) {
        particles.splice(i, 1);
        i--;
      }
    }

requestAnimationFrame(animateParticles);
  }

canvas.addEventListener("touchstart", createParticles);
  animateParticles();
</script>
</body>
</html>
```

このコードは、スマートフォンの画面上でタッチ操作をすると、キラキラパーティクルが表示されます。パーティクルは画面内をランダムに移動し、サイズが徐々に小さくなります。また、表示されているパーティクルが一定のサイズ以下になると消えます。

このゲームは、HTMLファイルに直接記述することで、ブラウザ上で実行できます。JavaScriptコードは`<script>`タグで囲まれており、画面のロード時に自動的に実行されます。

なお、実行環境によってパフォーマンスが異なる場合がありますので、ご了承ください。