AI game creator

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

No:20874

←

Prev Next

→

particle
Developer User9203｜Date and time 23/10/11 17:36:15
Build time 108.035 sec｜Game capacity 3.666KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>粒子游戏</title>
    <style>
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>

// 粒子实体类
        class Particle extends Entity {
            constructor(x, y, color) {
                super(x, y, color);
                this.radius = 10;
            }

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

// 游戏管理类
        class ParticleGame {
            constructor(canvasId) {
                this.canvas = document.getElementById(canvasId);
                this.ctx = canvas.getContext("2d");
                this.particles = [];
                this.isGameRunning = true;
            }

generateParticles() {
                // 在画布上随机生成10个粒子
                for (let i = 0; i < 10; i++) {
                    let x = Math.random() * this.canvas.width;
                    let y = Math.random() * this.canvas.height;
                    let color = getRandomColor();
                    let particle = new Particle(x, y, color);
                    this.particles.push(particle);
                }
            }

start() {
                // 开始游戏循环
                this.generateParticles();
                this.gameLoop();
            }

gameLoop() {
                // 游戏循环
                this.update();
                this.draw();

if (this.isGameRunning) {
                    // 使用requestAnimationFrame实现动画效果
                    requestAnimationFrame(this.gameLoop.bind(this));
                }
            }

update() {
                // 更新粒子的位置或状态

// 示例：让粒子随机移动
                this.particles.forEach(particle => {
                    particle.x += Math.random() * 6 - 3;
                    particle.y += Math.random() * 6 - 3;

if (particle.x < 0 || particle.x > this.canvas.width ||
                        particle.y < 0 || particle.y > this.canvas.height) {
                        // 如果粒子移动到画布区域外，则重新定位粒子的位置
                        particle.x = Math.random() * this.canvas.width;
                        particle.y = Math.random() * this.canvas.height;
                    }
                });
            }

draw() {
                // 绘制场景

// 清空画布
                this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);

// 绘制粒子
                this.particles.forEach(particle => {
                    particle.draw(this.ctx);
                });
            }
        }

function getRandomColor() {
            const letters = '0123456789ABCDEF';
            let color = '#';
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }

// 创建粒子游戏实例，并启动游戏
        const particleGame = new ParticleGame("canvas");
        particleGame.start();
    </script>
</body>
</html>