AI game creator

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

No:21589

←

Prev Next

→

Drawing game
Developer User9911｜Date and time 23/10/16 17:47:11
Build time 67.092 sec｜Game capacity 2.563KB｜

Script

Sure, I can create a simple drawing game for you. However, please note that I can only provide the code here, and you will need to run it on your own local server to play the game. Here's an example implementation using HTML, CSS, and JavaScript:

To play the game, save the above code in a file with a `.html` extension (e.g., `drawing_game.html`). Then, open the file in a web browser on your smartphone or any device. You'll see a canvas where you can draw by touching or dragging your finger on the screen.

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drawing Game</title>
    <style>
        /* Style the canvas */
        canvas {
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="300" height="300"></canvas>

// Variables to store the current position
        let currentX = 0;
        let currentY = 0;
        let isDrawing = false;

// Event listeners for touch events
        canvas.addEventListener('touchstart', startDrawing);
        canvas.addEventListener('touchmove', draw);
        canvas.addEventListener('touchend', stopDrawing);

// Event listeners for mouse events (for testing on desktop)
        canvas.addEventListener('mousedown', startDrawing);
        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('mouseup', stopDrawing);

function startDrawing(event) {
            // Set the drawing flag to true
            isDrawing = true;

// Get the current position of touch/mouse pointer
            currentX = event.pageX - canvas.offsetLeft;
            currentY = event.pageY - canvas.offsetTop;
        }

function draw(event) {
            if (!isDrawing) {
                return;
            }

// If drawing, get the new position and draw a line
            const newX = event.pageX - canvas.offsetLeft;
            const newY = event.pageY - canvas.offsetTop;
            ctx.beginPath();
            ctx.moveTo(currentX, currentY);
            ctx.lineTo(newX, newY);
            ctx.stroke();
            currentX = newX;
            currentY = newY;
        }

function stopDrawing() {
            // Set the drawing flag to false
            isDrawing = false;
        }
    </script>
</body>
</html>
```