AI game creator

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

No:7676

5624

←

Prev Next

→

Glitter Particles
Developer もちきなこ｜Date and time 23/7/9 11:59:35
Build time 10.698 sec｜Game capacity 2.746KB｜

Script

了解です。キラキラパーティクルのゲームを作成します。以下が実装例です。

このプログラムは、クリックした場所にキラキラと輝くパーティクルが表示されるゲームです。ウィンドウ内の空いたスペースをクリックすると、パーティクルが生成されます。パーティクルは徐々に大きさが小さくなりながら移動し、最終的に消えます。モバイルデバイスやタブレットでも操作可能ですので、スマホからでもお楽しみいただけます。

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

了解です。キラキラパーティクルのゲームを作成します。以下が実装例です。

```
<!DOCTYPE html>
<html>
<head>
    <title>KiraKira Particle Game</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
      
        #canvas {
            background-color: black;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

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

let particles = [];
        const particleCount = 100;

class Particle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.size = Math.random() * 10 + 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() {
                ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fill();
            }
        }

function createParticles(x, y) {
            for (let i = 0; i < particleCount; i++) {
                particles.push(new Particle(x, y));
            }
        }

function animateParticles() {
            ctx.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);
        }

document.addEventListener('click', (event) => {
            const x = event.clientX;
            const y = event.clientY;

createParticles(x, y);
        });

animateParticles();
    </script>
</body>
</html>
```

このプログラムは、クリックした場所にキラキラと輝くパーティクルが表示されるゲームです。ウィンドウ内の空いたスペースをクリックすると、パーティクルが生成されます。パーティクルは徐々に大きさが小さくなりながら移動し、最終的に消えます。

モバイルデバイスやタブレットでも操作可能ですので、スマホからでもお楽しみいただけます。