AI game creator

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

No:36050

124

←

Prev Next

→

Drawing game
Developer User16442｜Date and time 24/1/16 10:33:34
Build time 10.679 sec｜Game capacity 3.131KB｜

Script

Sure, here's a simple drawing game implemented in a single HTML file using JavaScript. It allows users to draw on a canvas using a smartphone touch interface and includes pictogram icons for different tools. The game starts automatically when the page loads.

In this game, you can use the icons of a pencil, brush, and eraser to draw on the canvas using your smartphone's touch interface. The drawn lines will appear in black for the pencil, blue for the brush, and will erase with the eraser.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Drawing Game</title>
    <style>
        #canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <div id="tools">
        <img src="pencil.png" width="30" height="30" id="pencil" alt="Pencil">
        <img src="brush.png" width="30" height="30" id="brush" alt="Brush">
        <img src="eraser.png" width="30" height="30" id="eraser" alt="Eraser">
    </div>

// Set initial drawing settings
        var drawingTool = "pencil";
        var isDrawing = false;
        var prevX = 0;
        var prevY = 0;

// Handle touch events for drawing
        canvas.addEventListener("touchstart", startDrawing);
        canvas.addEventListener("touchmove", draw);
        canvas.addEventListener("touchend", stopDrawing);

// Change the selected drawing tool when clicked
        document.getElementById("pencil").addEventListener("click", function () {
            drawingTool = "pencil";
        });

document.getElementById("brush").addEventListener("click", function () {
            drawingTool = "brush";
        });

document.getElementById("eraser").addEventListener("click", function () {
            drawingTool = "eraser";
        });

function startDrawing(event) {
            isDrawing = true;
            prevX = event.touches[0].clientX - canvas.offsetLeft;
            prevY = event.touches[0].clientY - canvas.offsetTop;
        }

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

var x = event.touches[0].clientX - canvas.offsetLeft;
            var y = event.touches[0].clientY - canvas.offsetTop;

context.beginPath();
            context.moveTo(prevX, prevY);
            context.lineTo(x, y);

if (drawingTool === "pencil") {
                context.lineWidth = 1;
                context.strokeStyle = "black";
            } else if (drawingTool === "brush") {
                context.lineWidth = 5;
                context.strokeStyle = "blue";
            } else if (drawingTool === "eraser") {
                context.lineWidth = 10;
                context.strokeStyle = "white";
            }

context.stroke();
            context.closePath();

prevX = x;
            prevY = y;
        }

function stopDrawing() {
            isDrawing = false;
        }
    </script>
</body>
</html>
```
In this game, you can use the icons of a pencil, brush, and eraser to draw on the canvas using your smartphone's touch interface. The drawn lines will appear in black for the pencil, blue for the brush, and will erase with the eraser.