AI game creator

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

No:50595

104

←

Prev Next

→

particle
Developer User21364｜Date and time 24/3/9 7:07:54
Build time 12.577 sec｜Game capacity 1.803KB｜

Script

Particle

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

Particle

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Particle Game</title>
<style>
    body { 
        font-family: Arial, sans-serif;
        text-align: center;
    }
    canvas {
        border: 2px solid black;
        margin: 20px auto;
    }
    #score {
        font-size: 20px;
    }
</style>
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<div id="score">Score: 0</div>

let score = 0;

const particle = {
        x: canvas.width / 2,
        y: canvas.height / 2,
        size: 10,
        dx: 5 * (Math.random() > 0.5 ? 1 : -1),
        dy: 5 * (Math.random() > 0.5 ? 1 : -1)
    };

function drawParticle() {
        ctx.beginPath();
        ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
        ctx.fillStyle = "blue";
        ctx.fill();
    }

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

particle.x += particle.dx;
        particle.y += particle.dy;

if (particle.x + particle.size > canvas.width || particle.x - particle.size < 0) {
            particle.dx *= -1;
        }

if (particle.y + particle.size > canvas.height || particle.y - particle.size < 0) {
            particle.dy *= -1;
        }

drawParticle();
    }

function increaseScore() {
        score++;
        document.getElementById("score").textContent = "Score: " + score;
    }

canvas.addEventListener("click", increaseScore);

function gameLoop() {
        update();
        requestAnimationFrame(gameLoop);
    }

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