AI game creator

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

No:34189

←

Prev Next

→

particle
Developer User16162｜Date and time 24/1/9 2:17:51
Build time 28.214 sec｜Game capacity 3.322KB｜

Script

Okay, here's a simple game implemented as a single HTML file with JavaScript, enclosed in script tags:

In this game, you control a player represented by a red circle, and your goal is to move towards and "capture" a target particle represented by a green circle. You can control the player's movement by touching and dragging on the canvas on a smartphone. The player will automatically move towards the target particle. I hope you enjoy playing this simple game!

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

Okay, here's a simple game implemented as a single HTML file with JavaScript, enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Particle Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    
    <script>
        // Set up the game canvas
        const canvas = document.getElementById("gameCanvas");
        const context = canvas.getContext("2d");
        
        // Set up the player
        const player = {
            x: 200,
            y: 200,
            radius: 20,
            color: "#FF0000"
        };
        
        // Set up the target particle
        const target = {
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            radius: 10,
            color: "#00FF00"
        };
        
        // Function to draw the game objects
        function draw() {
            // Clear the canvas
            context.clearRect(0, 0, canvas.width, canvas.height);
            
            // Draw the player
            context.beginPath();
            context.arc(player.x, player.y, player.radius, 0, Math.PI * 2);
            context.fillStyle = player.color;
            context.fill();
            
            // Draw the target particle
            context.beginPath();
            context.arc(target.x, target.y, target.radius, 0, Math.PI * 2);
            context.fillStyle = target.color;
            context.fill();
        }
        
        // Function to update the game logic
        function update() {
            // Move the player towards the target particle
            if (player.x < target.x) {
                player.x += 1;
            } else if (player.x > target.x) {
                player.x -= 1;
            }
            
            if (player.y < target.y) {
                player.y += 1;
            } else if (player.y > target.y) {
                player.y -= 1;
            }
        }
        
        // Function to handle touch events for mobile operation
        function handleTouch(event) {
            const rect = canvas.getBoundingClientRect();
            const touchX = event.touches[0].clientX - rect.left;
            const touchY = event.touches[0].clientY - rect.top;
            
            // Update the target particle position based on touch input
            target.x = touchX;
            target.y = touchY;
        }
        
        // Add touch event listener to the canvas
        canvas.addEventListener("touchstart", handleTouch, false);
        canvas.addEventListener("touchmove", handleTouch, false);
        
        // Function to game loop
        function gameLoop() {
            draw();
            update();
            
            // Call gameLoop function recursively to continuously update and draw the game
            requestAnimationFrame(gameLoop);
        }
        
        // Start the game loop
        gameLoop();
    </script>
</body>
</html>
```

I hope you enjoy playing this simple game!