AI game creator

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

No:11078

←

Prev Next

→

particle
Developer User4809｜Date and time 23/8/7 19:15:21
Build time 27.863 sec｜Game capacity 3.495KB｜

Script

下記は、スマホで遊べるパーティクルゲームのサンプルコードです。

このコードでは、マウスを動かすことで赤いパーティクルが出現し、画面上を移動します。パーティクルは徐々に小さくなり、最終的に消えます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

下記は、スマホで遊べるパーティクルゲームのサンプルコードです。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>

// パーティクルを更新するメソッド
            update() {
                this.x += this.speedX;
                this.y += this.speedY;

if (this.size > 0.2) {
                    this.size -= 0.1;
                }
            }

// パーティクルを描画するメソッド
            draw(context) {
                context.beginPath();
                context.arc(this.x, this.y, this.size, 0, Math.PI*2);
                context.fillStyle = this.color;
                context.fill();
            }
        }

// ゲームクラス
        class Game {
            constructor(canvas) {
                this.canvas = canvas;
                this.context = canvas.getContext("2d");
                this.particles = [];

// イベントリスナーを追加
                this.canvas.addEventListener("mousemove", this.onMouseMove.bind(this));

// レンダリングを開始
                this.startRendering();
            }

// マウス移動時に呼ばれるイベントハンドラ
            onMouseMove(event) {
                const { x, y } = event;
                const speedX = (Math.random() - 0.5) * 3;
                const speedY = (Math.random() - 0.5) * 3;
                const size = Math.random() * 10;

// パーティクルを生成して追加
                this.particles.push(new Particle(x, y, "#FF0000", size, speedX, speedY));
            }

// レンダリングを開始するメソッド
            startRendering() {
                requestAnimationFrame(this.render.bind(this));
            }

// パーティクルを更新して描画するメソッド
            render() {
                const { width, height } = this.canvas;
                this.context.clearRect(0, 0, width, height);

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

// パーティクルが小さくなったら配列から削除
                    if (particle.size <= 0.1) {
                        this.particles.splice(i, 1);
                        i--;
                    }
                }

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

// ゲームを初期化して開始
        const gameCanvas = document.getElementById("gameCanvas");
        const game = new Game(gameCanvas);
    </script>
</body>
</html>
```

このコードでは、マウスを動かすことで赤いパーティクルが出現し、画面上を移動します。パーティクルは徐々に小さくなり、最終的に消えます。