AI game creator

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

No:13680

103

←

Prev Next

→

パーティクル
Developer おまめちゃん｜Date and time 23/8/29 11:08:40
Build time 24.907 sec｜Game capacity 4.175KB｜

Script

了解です。以下にパーティクルゲームの例を実装します。

このゲームでは、画面上にランダムにパーティクルが生成され、指定した速度で移動します。パーティクルの数や速度、大きさ、色、生成間隔などは設定オブジェクトで調整可能です。ゲームは自動的に実行され、スマホ上でも遊ぶことができます。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

了解です。以下にパーティクルゲームの例を実装します。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>パーティクルゲーム</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

const particleConfig = {
            numParticles: 100,  // パーティクルの数
            speed: 3,          // パーティクルの速度
            size: 20,          // パーティクルの大きさ
            color: '🌈',        // パーティクルの色
            spawnInterval: 100  // パーティクルの生成間隔 (ミリ秒)
        };

// ゲームオブジェクト
        const game = {
            particles: [],
            lastSpawnTime: 0,
            ctx: null,

// ゲームの初期化
            init: function() {
                const canvas = document.getElementById('gameCanvas');
                canvas.width = canvasSize.width;
                canvas.height = canvasSize.height;
                this.ctx = canvas.getContext('2d');

this.update();
            },

// パーティクルの生成
            spawnParticle: function() {
                const x = Math.random() * canvasSize.width;
                const y = Math.random() * canvasSize.height;
                const dx = (Math.random() - 0.5) * particleConfig.speed;
                const dy = (Math.random() - 0.5) * particleConfig.speed;
                const size = particleConfig.size;
                const color = particleConfig.color;

this.particles.push({ x, y, dx, dy, size, color });
            },

// パーティクルの更新
            updateParticles: function() {
                for (let i = 0; i < this.particles.length; i++) {
                    let particle = this.particles[i];

// パーティクルの座標を更新
                    particle.x += particle.dx;
                    particle.y += particle.dy;

// 画面外に出たパーティクルは削除
                    if (
                        particle.x < 0 ||
                        particle.x > canvasSize.width ||
                        particle.y < 0 ||
                        particle.y > canvasSize.height
                    ) {
                        this.particles.splice(i, 1);
                        i--;
                    }
                }
            },

// ゲームの更新
            update: function() {
                const now = Date.now();

// 一定間隔でパーティクルを生成
                if (now - this.lastSpawnTime > particleConfig.spawnInterval) {
                    this.spawnParticle();
                    this.lastSpawnTime = now;
                }

// パーティクルの更新
                this.updateParticles();

// 画面をクリア
                this.ctx.clearRect(0, 0, canvasSize.width, canvasSize.height);

// パーティクルを描画
                for (let particle of this.particles) {
                    this.ctx.fillStyle = particle.color;
                    this.ctx.fillRect(particle.x, particle.y, particle.size, particle.size);
                }

// 次のフレームの更新を予約
                requestAnimationFrame(this.update.bind(this));
            }
        };

// ゲームの初期化
        game.init();
    </script>
</body>
</html>
```