Drawing game where you can draw on a blank canvas, 1st choose size of canvas, and then color, and then draw freely.'s game

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

No:43329

←

Prev Next

→

Drawing game where you can draw on a blank canvas,..ALL
Developer User19162｜Date and time 24/2/15 6:43:43
Build time 8.391 sec｜Game capacity 2.995KB｜

Script

Sure! Here's a simple implementation of a drawing game using HTML and JavaScript, where you can draw on a blank canvas:

Canvas Size
Color:

To play the game, open the HTML file in a web browser on your smartphone. You can choose the size of the canvas using the dropdown menu, select the drawing color from the color picker, and then freely draw on the canvas by touching and dragging your finger across it. Note: This is a basic implementation and does not include advanced features like saving drawings or undo/redo functionality. It can serve as a starting point, and you can enhance it according to your requirements.

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a simple implementation of a drawing game using HTML and JavaScript, where you can draw on a blank canvas:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Drawing Game</title>
    <style>
        canvas {
            border: 1px solid #000;
            touch-action: none; /* Enable touch scrolling on canvas */
        }
    </style>
</head>
<body>
    <label for="canvasSize">Canvas Size
    <select id="canvasSize">
        <option value="400">Small</option>
        <option value="600" selected>Medium</option>
        <option value="800">Large</option>
    </select>
    <br>
    <label for="colorPicker">Color:</label>
    <input type="color" id="colorPicker">
    <br>
    <canvas id="canvas"></canvas>

let isDrawing = false;
        let lastX = 0;
        let lastY = 0;

function startDrawing(e) {
            isDrawing = true;
            [lastX, lastY] = [e.offsetX, e.offsetY];
        }

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

context.strokeStyle = document.getElementById('colorPicker').value;
            context.lineJoin = 'round';
            context.lineCap = 'round';
            context.lineWidth = 5;

context.beginPath();
            context.moveTo(lastX, lastY);
            context.lineTo(e.offsetX, e.offsetY);
            context.stroke();

[lastX, lastY] = [e.offsetX, e.offsetY];
        }

function stopDrawing() {
            isDrawing = false;
        }

function resizeCanvas() {
            const canvasSize = parseInt(document.getElementById('canvasSize').value);
            canvas.width = canvasSize;
            canvas.height = canvasSize;
        }

resizeCanvas();

canvas.addEventListener('mousedown', startDrawing);
        canvas.addEventListener('mousemove', draw);
        canvas.addEventListener('mouseup', stopDrawing);
        canvas.addEventListener('mouseout', stopDrawing);

canvas.addEventListener('touchstart', startDrawing);
        canvas.addEventListener('touchmove', draw);
        canvas.addEventListener('touchend', stopDrawing);
        canvas.addEventListener('touchcancel', stopDrawing);

document.getElementById('canvasSize').addEventListener('change', resizeCanvas);
    </script>
</body>
</html>
```

Note: This is a basic implementation and does not include advanced features like saving drawings or undo/redo functionality. It can serve as a starting point, and you can enhance it according to your requirements.