AI game creator

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

No:42215

159

←

Prev Next

→

A drawing game
Developer User14680｜Date and time 24/2/11 3:00:24
Build time 8.494 sec｜Game capacity 2.774KB｜

Script

Sure! Here's an example of a simple drawing game using JavaScript and HTML. The game allows you to draw on the screen using your smartphone or mouse. It uses basic shapes as pictograms for drawing. Save the code in a single HTML file and open it in a web browser to play the game.

This code creates a canvas element that fills the entire screen. When you touch or drag your finger on the screen (in the case of a smartphone) or use the mouse (in the case of a computer), it draws a line on the canvas using the `context` of the canvas. The line being drawn is based on the position of the touch/mouse events. Feel free to customize and enhance the game further based on your specific requirements!

←

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 {
            width: 100%;
            height: 100%;
            background: #fff;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>

// Set the canvas size
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

// Variables to hold drawing state
        var isDrawing = false;
        var lastX = 0;
        var lastY = 0;

// Event listeners for touch and mouse events
        canvas.addEventListener('touchstart', startDrawing);
        canvas.addEventListener('touchmove', draw);
        canvas.addEventListener('touchend', stopDrawing);
        canvas.addEventListener('mousedown', startDrawing);
        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('mouseup', stopDrawing);
        canvas.addEventListener('mouseout', stopDrawing);

// Start drawing function
        function startDrawing(e) {
            isDrawing = true;
            [lastX, lastY] = [e.clientX || e.touches[0].clientX, e.clientY || e.touches[0].clientY];
        }

// Drawing function
        function draw(e) {
            if (!isDrawing) return;

var currentX = e.clientX || e.touches[0].clientX;
            var currentY = e.clientY || e.touches[0].clientY;

// Draw a line from the last position to the current position
            context.beginPath();
            context.moveTo(lastX, lastY);
            context.lineTo(currentX, currentY);
            context.strokeStyle = 'black';
            context.lineWidth = 4;
            context.stroke();

// Update the last position
            [lastX, lastY] = [currentX, currentY];
        }

// Stop drawing function
        function stopDrawing() {
            isDrawing = false;
        }
    </script>
</body>
</html>
```

Feel free to customize and enhance the game further based on your specific requirements!