Drawing game for kids's game

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

No:36780

←

Prev Next

→

Drawing game for kids
Developer User16822｜Date and time 24/1/18 10:41:07
Build time 10.462 sec｜Game capacity 3.048KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
        }
        
        canvas {
            border: 1px solid black;
            margin: 20px auto;
        }
        
        #buttons {
            margin: 20px auto;
        }
        
        #penButton {
            background-color: #ff9999;
            padding: 8px 16px;
            border: none;
            color: white;
            font-weight: bold;
            cursor: pointer;
            margin-right: 10px;
        }
        
        #eraserButton {
            background-color: #666;
            padding: 8px 16px;
            border: none;
            color: white;
            font-weight: bold;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="500" height="500"></canvas>
    
    <div id="buttons">
        <button id="penButton">Lápiz</button>
        
        <button id="eraserButton">Borrador</button>
    </div>
    
    <script>
        // Variables
        var canvas, context, isDrawing, selectedTool;
        
        // Initialization function
        function init() {
            canvas = document.getElementById('gameCanvas');
            context = canvas.getContext('2d');
            
            isDrawing = false;
            selectedTool = 'pen';
            
            // Add event listeners
            canvas.addEventListener('mousedown', startDrawing);
            canvas.addEventListener('mousemove', draw);
            canvas.addEventListener('mouseup', stopDrawing);
            
            document.getElementById('penButton').addEventListener('click', selectPen);
            document.getElementById('eraserButton').addEventListener('click', selectEraser);
        }
        
        // Start drawing function
        function startDrawing(event) {
            isDrawing = true;
            context.beginPath();
            context.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
        }
        
        // Draw function
        function draw(event) {
            if (isDrawing) {
                if (selectedTool === 'pen') {
                    context.lineWidth = 4;
                    context.strokeStyle = '#000';
                } else {
                    context.lineWidth = 20;
                    context.strokeStyle = '#fff';
                }
                
                context.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
                context.stroke();
            }
        }
        
        // Stop drawing function
        function stopDrawing() {
            isDrawing = false;
        }
        
        // Select pen function
        function selectPen() {
            selectedTool = 'pen';
        }
        
        // Select eraser function
        function selectEraser() {
            selectedTool = 'eraser';
        }
        
        // Initialize the game
        init();
    </script>
</body>
</html>