AI game creator

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

No:27736

←

Prev Next

→

Cleaning game
Developer User13812｜Date and time 23/12/8 18:53:11
Build time 30.989 sec｜Game capacity 3.116KB｜

Script

Sure! Here's an example of a simple cleaning game implemented as a single HTML file using JavaScript and enclosed in script tags:

When you open this HTML file in a web browser on your smartphone, you will see a canvas element representing the game area. The player's objective is to click on the moving cleaning task (represented by a blue square) to accumulate points. The score is displayed on the top left corner of the canvas. You can click anywhere on the canvas to start the game and then proceed to collect points by clicking on the moving cleaning task. The task's position will change randomly within the canvas area to increase difficulty.

←

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 cleaning game implemented as a single HTML file using JavaScript and enclosed in script tags:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Cleaning Game</title>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

// Set up game variables
        let score = 0;
        let gameStarted = false;

// Create a cleaning task object
        const task = {
            x: 200,
            y: 200,
            width: 50,
            height: 50,
            color: 'blue'
        };

// Function to draw the cleaning task
        function drawTask() {
            ctx.fillStyle = task.color;
            ctx.fillRect(task.x, task.y, task.width, task.height);
        }

// Function to update game logic
        function update() {
            if (gameStarted) {
                // Move the cleaning task randomly
                task.x = Math.random() * (canvas.width - task.width);
                task.y = Math.random() * (canvas.height - task.height);
            }
        }

// Function to handle mouse click event
        function handleClick(event) {
            if (gameStarted) {
                const rect = canvas.getBoundingClientRect();
                const mouseX = event.clientX - rect.left;
                const mouseY = event.clientY - rect.top;

// Check if the click is within the cleaning task boundaries
                if (mouseX >= task.x && mouseX <= task.x + task.width && mouseY >= task.y && mouseY <= task.y + task.height) {
                    score++;
                }
            } else {
                gameStarted = true;
            }
        }

// Function to draw the game
        function draw() {
            // Clear the canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw the task
            drawTask();

// Display the score
            ctx.fillStyle = 'black';
            ctx.font = '24px Arial';
            ctx.fillText(`Score: ${score}`, 10, 30);
        }

// Game loop
        function gameLoop() {
            update();
            draw();
            requestAnimationFrame(gameLoop);
        }

// Start the game loop
        requestAnimationFrame(gameLoop);

// Add event listener for mouse clicks
        canvas.addEventListener('click', handleClick);
    </script>
</body>
</html>
```

You can click anywhere on the canvas to start the game and then proceed to collect points by clicking on the moving cleaning task. The task's position will change randomly within the canvas area to increase difficulty.