When you tap it draws a square's game

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

No:27806

←

Prev Next

→

When you tap it draws a square
Developer User13833｜Date and time 23/12/9 5:19:28
Build time 10.235 sec｜Game capacity 1.614KB｜

Script

Sure, here's a simple game implemented as a single HTML file using JavaScript:

This HTML file sets up a canvas element where users can tap to draw a square. When the canvas is clicked, it triggers the `drawSquare` function, which calculates the click coordinates and draws a square centered at those coordinates. The canvas is cleared before drawing each new square to prevent multiple squares from stacking up. The square is drawn with an orange color.

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

Sure, here's a simple game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tap to Draw Square Game</title>
    <style>
        body {
            margin: 0;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

canvas {
            border: 1px solid black;
        }
    </style>
</head>

// Add click event listener to canvas
        canvas.addEventListener("click", drawSquare);

function drawSquare(event) {
            // Get the click coordinates
            var rect = canvas.getBoundingClientRect();
            var x = event.clientX - rect.left;
            var y = event.clientY - rect.top;

// Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);

// Draw a square
            ctx.fillStyle = "orange";
            ctx.fillRect(x - 50, y - 50, 100, 100);
        }
    </script>

</body>
</html>
```