AI game creator

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

No:9215

144

←

Prev Next

→

particle
Developer User4299｜Date and time 23/7/22 16:02:28
Build time 16.21 sec｜Game capacity 2.27KB｜

Script

Sure, here's a simple particle game implemented as a single HTML file using JavaScript, enclosed in script tags:

In this game, a red particle is randomly positioned within a game container. The objective is to click on the particle to catch it. If the click event occurs within the particle's radius, a success message is displayed. You can play the game by opening the HTML file on a smartphone or running it in a web browser.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's a simple particle game implemented as a single HTML file using JavaScript, enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Particle Game</title>
    <style>
        #game-container {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #particle {
            width: 50px;
            height: 50px;
            background-color: red;
            border-radius: 50%;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="particle"></div>
    </div>

var gameWidth = gameContainer.offsetWidth;
        var gameHeight = gameContainer.offsetHeight;

var particleSize = particle.offsetWidth;
        var particleX = Math.floor(Math.random() * (gameWidth - particleSize));
        var particleY = Math.floor(Math.random() * (gameHeight - particleSize));

particle.style.left = particleX + 'px';
        particle.style.top = particleY + 'px';

gameContainer.addEventListener('click', function(event){
            // Calculate the distance between the particle's center and the clicked point
            var particleCenterX = particleX + particleSize / 2;
            var particleCenterY = particleY + particleSize / 2;
            var distanceX = Math.abs(particleCenterX - event.clientX);
            var distanceY = Math.abs(particleCenterY - event.clientY);

// If the click event happens within the particle's radius, show a success message
            if (distanceX <= particleSize / 2 && distanceY <= particleSize / 2) {
                alert('Congratulations! You caught the particle!');
            }
        });
    </script>
</body>
</html>
```