AI game creator

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

No:13684

←

Prev Next

→

パーティクル
Developer おまめちゃん｜Date and time 23/8/29 11:14:53
Build time 25.037 sec｜Game capacity 4.632KB｜

Script

了解します。以下にパーティクル（粒子）を表示するゲームの実装例を示します。

以下の手順でゲームをプレイできます。 1. 上記のHTMLファイルとして保存します。 2. ブラウザでファイルを開きます。 3. タッチしてパーティクルを生成します。 4. パーティクルが画面内を動き回ります。このゲームでは、タッチ操作に応じてパーティクルが生成され、画面内をランダムな動きで動き回ることができます。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

了解します。以下にパーティクル（粒子）を表示するゲームの実装例を示します。

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

// パーティクルの設定
            var particles = [];
            var particleCount = 1000;
            var particleSize = 2;

// パーティクルオブジェクトを作成する関数
            function createParticle(x, y) {
                var particle = {
                    x: x,
                    y: y,
                    vx: Math.random() * 4 - 2,
                    vy: Math.random() * 4 - 2,
                    color: "white"
                };
                particles.push(particle);
            }

// パーティクルを初期化する関数
            function initParticles() {
                particles = [];
                for (var i = 0; i < particleCount; i++) {
                    createParticle(Math.random() * canvas.width, Math.random() * canvas.height);
                }
            }

// パーティクルを更新する関数
            function updateParticles() {
                for (var i = 0; i < particles.length; i++) {
                    var particle = particles[i];
                    particle.x += particle.vx;
                    particle.y += particle.vy;

if (particle.x < 0 || particle.x > canvas.width ||
                        particle.y < 0 || particle.y > canvas.height) {
                        // パーティクルが画面外に出た場合は再生成する
                        particle.x = Math.random() * canvas.width;
                        particle.y = Math.random() * canvas.height;
                        particle.vx = Math.random() * 4 - 2;
                        particle.vy = Math.random() * 4 - 2;
                    }
                }
            }

// パーティクルを描画する関数
            function drawParticles() {
                context.clearRect(0, 0, canvas.width, canvas.height);
                for (var i = 0; i < particles.length; i++) {
                    var particle = particles[i];
                    context.fillStyle = particle.color;
                    context.fillRect(particle.x, particle.y, particleSize, particleSize);
                }
            }

// ゲームループ
            function gameLoop() {
                updateParticles();
                drawParticles();
                requestAnimationFrame(gameLoop);
            }

// タッチの処理
            function onTouchStart(event) {
                for (var i = 0; i < event.touches.length; i++) {
                    var touch = event.touches[i];
                    createParticle(touch.pageX, touch.pageY);
                }
            }

function onTouchMove(event) {
                event.preventDefault();
                for (var i = 0; i < event.touches.length; i++) {
                    var touch = event.touches[i];
                    createParticle(touch.pageX, touch.pageY);
                }
            }

function onTouchEnd(event) {
                // 特に何もしない
            }

// 初期化
            initParticles();
            gameLoop();

// イベントリスナーの登録
            canvas.addEventListener("touchstart", onTouchStart, false);
            canvas.addEventListener("touchmove", onTouchMove, false);
            canvas.addEventListener("touchend", onTouchEnd, false);
        };
    </script>
</body>
</html>
```

以下の手順でゲームをプレイできます。

1. 上記のHTMLファイルとして保存します。
2. ブラウザでファイルを開きます。
3. タッチしてパーティクルを生成します。
4. パーティクルが画面内を動き回ります。

このゲームでは、タッチ操作に応じてパーティクルが生成され、画面内をランダムな動きで動き回ることができます。