AI game creator

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

No:43222

←

Prev Next

→

particle
Developer User19145｜Date and time 24/2/15 1:26:04
Build time 8.825 sec｜Game capacity 3.524KB｜

Script

Sure, here's an example of a simple game implementation in a single HTML file that includes JavaScript code enclosed in script tags:

This game is called the "Particle Game" where you control a circle in the center of the canvas and try to capture red particles by colliding with them. The goal is to collect as many particles as possible without hitting the canvas edges. The score is displayed at the top left corner of the canvas, and if you collide with the canvas edges, the game will end and display a "Game Over" message. Please note that this is just a simple example for demonstration purposes and can be further expanded and customized based on your specific requirements.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's an example of a simple game implementation in a single HTML file that includes JavaScript code enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Particle Game</title>
    <style>
        #canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>

// Particle class
        class Particle {
            constructor(x, y) {
                this.x = x;
                this.y = y;
                this.size = 10;
                this.speedX = Math.random() * 4 - 2;
                this.speedY = Math.random() * 4 - 2;
            }

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

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

// Main game loop
        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

if (!gameOver) {
                // Create new particles every second
                if (Math.random() < 0.02) {
                    particles.push(new Particle(canvas.width / 2, canvas.height / 2));
                }

// Update and draw particles
                particles.forEach(particle => {
                    particle.update();
                    particle.draw();
                });

// Check for collision with particles
                particles.forEach((particle, index) => {
                    if (particle.x - particle.size < 0 || particle.x + particle.size > canvas.width ||
                        particle.y - particle.size < 0 || particle.y + particle.size > canvas.height) {
                        gameOver = true;
                    }

if (Math.hypot(particle.x - canvas.width / 2, particle.y - canvas.height / 2) < particle.size) {
                        particles.splice(index, 1);
                        score++;
                    }
                });

// Display score
                ctx.fillStyle = 'black';
                ctx.font = '20px Arial';
                ctx.fillText('Score: ' + score, 10, 30);

requestAnimationFrame(gameLoop);

} else {
                // Display game over message
                ctx.fillStyle = 'black';
                ctx.font = '30px Arial';
                ctx.fillText('Game Over', canvas.width / 2 - 80, canvas.height / 2);
            }
        }

// Start the game
        gameLoop();
    </script>
</body>
</html>
```

Please note that this is just a simple example for demonstration purposes and can be further expanded and customized based on your specific requirements.