AI game creator

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

No:7770

1194

←

Prev Next

→

particle
Developer User4079｜Date and time 23/7/9 20:23:48
Build time 11.381 sec｜Game capacity 3.927KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Particle Game</title>
    <style>
        canvas {
            border: 1px solid gray;
        }
    </style>
</head>

<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        "use strict";

const ParticleGame = {
            canvas: null,
            ctx: null,
            particles: [],
            particleColors: ["blue", "red", "green", "orange", "purple"],
            particleRadius: 20,
            score: 0,

init: function () {
                this.canvas = document.getElementById("gameCanvas");
                this.ctx = this.canvas.getContext("2d");

this.canvas.width = window.innerWidth;
                this.canvas.height = window.innerHeight;

this.canvas.addEventListener("mousedown", this.onClick.bind(this));

this.createParticles();
            },

createParticles: function () {
                for (let i = 0; i < 5; i++) {
                    const x = Math.random() * (this.canvas.width - this.particleRadius * 2) + this.particleRadius;
                    const y = Math.random() * (this.canvas.height - this.particleRadius * 2) + this.particleRadius;
                    const color = this.particleColors[Math.floor(Math.random() * this.particleColors.length)];

this.particles.push({ x: x, y: y, color: color });
                }
            },

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

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

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

particle.y += 1;

if (particle.y > this.canvas.height + this.particleRadius) {
                        particle.y = -this.particleRadius;
                        particle.x = Math.random() * (this.canvas.width - this.particleRadius * 2) + this.particleRadius;
                        particle.color = this.particleColors[Math.floor(Math.random() * this.particleColors.length)];
                    }

if (particle.y + this.particleRadius > this.canvas.height - this.particleRadius * 2) {
                        if (particle.color === "red") {
                            this.endGame();
                        } else {
                            this.score++;
                        }
                    }
                }

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

onClick: function (event) {
                const clickX = event.clientX;
                const clickY = event.clientY;

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

const distX = clickX - particle.x;
                    const distY = clickY - particle.y;
                    const distance = Math.sqrt(distX * distX + distY * distY);

if (distance < this.particleRadius) {
                        this.particles.splice(i, 1);
                        break;
                    }
                }
            },

startGame: function () {
                this.score = 0;
                this.update();
            },

endGame: function () {
                alert("Game Over!\nFinal Score: " + this.score);
                this.particles = [];
                this.createParticles();
                this.startGame();
            }
        };

ParticleGame.init();
        ParticleGame.startGame();
    </script>
</body>

</html>