AI game creator

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

No:41203

←

Prev Next

→

Drawing simulator
Developer User18485｜Date and time 24/2/6 13:23:37
Build time 7.978 sec｜Game capacity 2.549KB｜

Script

Sure, here's a simple drawing simulator game that you can play on a smartphone:

This HTML file contains a canvas element which acts as the drawing area. The JavaScript code handles the touch events on the canvas and allows you to draw lines by dragging your finger on the screen. The drawn lines are displayed on the canvas using the 2D context. You can open this file in a browser on your smartphone and start drawing by touching and dragging your finger on the canvas area. The lines will appear on the screen as you draw.

←

Prev　Next

→ 　

Back　

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

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

Sure, here's a simple drawing simulator game that you can play on a smartphone:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Drawing Simulator</title>
    <style>
        #canvas {
            border: 1px solid black;
            touch-action: none; /* disable zooming on touch devices */
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="400" height="400"></canvas>

// Variables to store current drawing state
        let isDrawing = false;
        let prevX, prevY;

// Event listeners when user interacts with the canvas
        canvas.addEventListener("touchstart", handleStart);
        canvas.addEventListener("touchmove", handleMove);
        canvas.addEventListener("touchend", handleEnd);

// Function to handle touch start event
        function handleStart(event) {
            event.preventDefault(); // prevent default touch behavior
            const touch = event.touches[0];
            prevX = touch.clientX;
            prevY = touch.clientY;
            isDrawing = true;
        }

// Function to handle touch move event
        function handleMove(event) {
            event.preventDefault(); // prevent default touch behavior
            if (!isDrawing) return;
            const touch = event.touches[0];
            const x = touch.clientX;
            const y = touch.clientY;
            drawLine(prevX, prevY, x, y);
            prevX = x;
            prevY = y;
        }

// Function to handle touch end event
        function handleEnd(event) {
            event.preventDefault(); // prevent default touch behavior
            isDrawing = false;
        }

// Function to draw a line on the canvas
        function drawLine(x1, y1, x2, y2) {
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
            ctx.closePath();
        }
    </script>
</body>
</html>
```

You can open this file in a browser on your smartphone and start drawing by touching and dragging your finger on the canvas area. The lines will appear on the screen as you draw.