AI game creator

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

No:40134

←

Prev Next

→

パーティクル
Developer 食べる鶏と熱いタバスコ｜Date and time 24/2/1 7:21:51
Build time 14.442 sec｜Game capacity 4.263KB｜

Script

は、あなたが画面上で自由に動き回るパーティクルを操作することができるゲームです。以下は、HTML ファイルと JavaScript のサンプルコードです。

このゲームは、画面上でクリックするとパーティクルが追加され、ランダムな速度で動き回ります。パーティクルは画面の外に出ると反対側から現れ、画面内を自由に移動します。このサンプルコードを HTML ファイルにコピーし、ブラウザで開くことで遊ぶことができます。

←

Prev　Next

→ 　

Back　

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

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

は、あなたが画面上で自由に動き回るパーティクルを操作することができるゲームです。以下は、HTML ファイルと JavaScript のサンプルコードです。

```html
<!DOCTYPE html>
<html>
<head>
    <title>パーティクル</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

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

// ゲームクラス
        class Game {
            constructor() {
                this.canvas = document.getElementById('canvas');
                this.ctx = this.canvas.getContext('2d');
                this.width = window.innerWidth;
                this.height = window.innerHeight;
                this.canvas.width = this.width;
                this.canvas.height = this.height;
                this.particles = [];

this.init();
            }

init() {
                window.addEventListener('resize', this.resize.bind(this));
                this.canvas.addEventListener('click', this.addParticle.bind(this));

this.generateParticles(50);

requestAnimationFrame(this.update.bind(this));
            }

resize() {
                this.width = window.innerWidth;
                this.height = window.innerHeight;
                this.canvas.width = this.width;
                this.canvas.height = this.height;
            }

generateParticles(count) {
                for (let i = 0; i < count; i++) {
                    const x = Math.random() * this.width;
                    const y = Math.random() * this.height;
                    const size = Math.random() * 20 + 10;
                    const speedX = (Math.random() - 0.5) * 10;
                    const speedY = (Math.random() - 0.5) * 10;
                    const color = 'rgba(' + Math.random() * 255 + ',' + Math.random() * 255 + ',' + Math.random() * 255 + ',1)';

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

addParticle(event) {
                const x = event.clientX;
                const y = event.clientY;
                const size = Math.random() * 20 + 10;
                const speedX = (Math.random() - 0.5) * 10;
                const speedY = (Math.random() - 0.5) * 10;
                const color = 'rgba(' + Math.random() * 255 + ',' + Math.random() * 255 + ',' + Math.random() * 255 + ',1)';

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

update() {
                this.ctx.clearRect(0, 0, this.width, this.height);

for (let i = 0; i < this.particles.length; i++) {
                    const particle = this.particles[i];

particle.move();

this.ctx.beginPath();
                    this.ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
                    this.ctx.closePath();
                    this.ctx.fillStyle = particle.color;
                    this.ctx.fill();
                }

requestAnimationFrame(this.update.bind(this));
            }
        }

// ゲームを開始
        const game = new Game();
    </script>
</body>
</html>
```

このゲームは、画面上でクリックするとパーティクルが追加され、ランダムな速度で動き回ります。パーティクルは画面の外に出ると反対側から現れ、画面内を自由に移動します。

このサンプルコードを HTML ファイルにコピーし、ブラウザで開くことで遊ぶことができます。