AI game creator

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

No:13279

112

←

Prev Next

→

particle
Developer User5846｜Date and time 23/8/27 19:49:26
Build time 19.419 sec｜Game capacity 3.289KB｜

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>
    body {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

canvas {
        background-color: #000;
    }
</style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        // 创建画布和上下文
        const canvas = document.getElementById("gameCanvas");
        const ctx = canvas.getContext("2d");

// 调整画布大小为手机屏幕的宽高
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// 定义粒子类
        class Particle {
            constructor(x, y, radius, color, speedX, speedY) {
                this.x = x;
                this.y = y;
                this.radius = radius;
                this.color = color;
                this.speedX = speedX;
                this.speedY = speedY;
            }

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

update() {
                this.x += this.speedX;
                this.y += this.speedY;

// 边界检测，当粒子触碰屏幕边缘时反弹
                if (this.x + this.radius > canvas.width || this.x - this.radius < 0) {
                    this.speedX = -this.speedX;
                }

if (this.y + this.radius > canvas.height || this.y - this.radius < 0) {
                    this.speedY = -this.speedY;
                }

this.draw();
            }
        }

// 创建粒子数组
        const particles = [];

// 生成随机粒子
        function createParticles() {
            for (let i = 0; i < 50; i++) {
                const x = Math.random() * canvas.width;
                const y = Math.random() * canvas.height;
                const radius = Math.random() * 5 + 1; // 粒子半径范围为1到6之间的随机数
                const color = getRandomColor();
                const speedX = (Math.random() - 0.5) * 2; // x轴速度范围为-2到2之间的随机数
                const speedY = (Math.random() - 0.5) * 2; // y轴速度范围为-2到2之间的随机数

particles.push(new Particle(x, y, radius, color, speedX, speedY));
            }
        }

// 生成随机颜色
        function getRandomColor() {
            const letters = "0123456789ABCDEF";
            let color = "#";
            for (let i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * letters.length)];
            }
            return color;
        }

// 动画循环
        function animate() {
            requestAnimationFrame(animate);
            ctx.clearRect(0, 0, canvas.width, canvas.height);

particles.forEach(particle => {
                particle.update();
            });
        }

// 开始游戏
        function startGame() {
            createParticles();
            animate();
        }

// 手机触摸事件监听，点击屏幕开始游戏
        document.addEventListener("touchstart", startGame);

</script>
</body>
</html>