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

No:44648

←

Prev Next

→

particle
Developer User19444｜Date and time 24/2/18 22:26:20
Build time 5.152 sec｜Game capacity 1.418KB｜

Script

Particle Game

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

<hmtl>
<head>
    <title>Particle Game</title>
</head>
<body style="text-align: center;">
    <h1>Particle Game</h1>
    <canvas id="canvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('canvas');
        const ctx = canvas.getContext('2d');
        
        const particle = {
            x: canvas.width / 2,
            y: canvas.height / 2,
            dx: 2,
            dy: 2,
            color: 'red',
            radius: 10
        };
        
        function drawParticle() {
            ctx.beginPath();
            ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
            ctx.fillStyle = particle.color;
            ctx.fill();
            ctx.closePath();
        }
        
        function update() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawParticle();
            
            particle.x += particle.dx;
            particle.y += particle.dy;
            
            if (particle.x + particle.radius > canvas.width || particle.x - particle.radius < 0) {
                particle.dx = -particle.dx;
            }
            if (particle.y + particle.radius > canvas.height || particle.y - particle.radius < 0) {
                particle.dy = -particle.dy;
            }
            
            requestAnimationFrame(update);
        }
        
        update();
    </script>
</body>
</html>