AI game creator

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

No:40132

130

←

Prev Next

→

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

Script

了解しました。以下に、スマホで遊べるパーティクルゲームのサンプルコードを実装します。

このコードでは、canvas要素を使用してパーティクルゲームを描画しています。スマホ上でcanvasをタップすると、その位置に一連のパーティクルが表示されます。パーティクルはランダムな速度で移動し、徐々に大きさが小さくなっていきます。

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

了解しました。以下に、スマホで遊べるパーティクルゲームのサンプルコードを実装します。

```html
<!DOCTYPE html>
<html>
<head>
    <title>パーティクルゲーム</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        var canvas = document.getElementById('gameCanvas');
        var context = canvas.getContext('2d');
        var particles = [];

function Particle(x, y, radius, color) {
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.color = color;
            this.vx = Math.random() * 10 - 5;
            this.vy = Math.random() * 10 - 5;

this.draw = function() {
                context.beginPath();
                context.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
                context.fillStyle = this.color;
                context.fill();
                context.closePath();
            }

this.update = function() {
                this.x += this.vx;
                this.y += this.vy;
                this.radius -= 0.01;

if (this.radius > 0) {
                    this.draw();
                }
            }
        }

function createParticles(x, y) {
            for (var i = 0; i < 20; i++) {
                var particle = new Particle(x, y, Math.random() * 10, 'red');
                particles.push(particle);
            }
        }

function animateParticles() {
            context.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < particles.length; i++) {
                particles[i].update();

if (particles[i].radius <= 0) {
                    particles.splice(i, 1);
                    i--;
                }
            }

requestAnimationFrame(animateParticles);
        }

canvas.addEventListener('click', function(event) {
            var rect = canvas.getBoundingClientRect();
            var mouseX = event.clientX - rect.left;
            var mouseY = event.clientY - rect.top;

createParticles(mouseX, mouseY);
        });

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