Un juego donde podamos dibujar como si fuera paint y haya formas pre hechas y se pueda mover lo dibujado y las formas pre hechas y poner colores y poder cambiar las formas pre hechas's game

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

No:22698

←

Prev Next

→

Un juego donde podamos dibujar como si fuera paint..ALL
Developer User3408｜Date and time 23/10/24 7:38:38
Build time 74.528 sec｜Game capacity 5.428KB｜

Script

Aquí tienes un ejemplo de juego donde puedes dibujar usando formas predefinidas, mover los elementos dibujados y cambiar los colores. Solo necesitas copiar y pegar el código en un archivo HTML y abrirlo en un navegador para jugar:

Este juego te permite dibujar utilizando formas predefinidas como un círculo, un cuadrado y un triángulo. Puedes mover las formas dibujadas y las formas predefinidas seleccionándolas y arrastrándolas con el dedo o el mouse. Además, podrás cambiar los colores de las formas predefinidas según tus preferencias. Espero que disfrutes jugando con este ejemplo de juego. ¡Diviértete!

←

Prev　Next

→ 　

Back　

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

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

```html
<!DOCTYPE html>
<html>
<head>
    <style>
        canvas {
            border: 1px solid black;
            touch-action: none;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>

// Variables para almacenar los elementos dibujados
        const shapes = [];

// Variable para almacenar las formas predefinidas
        const predefinedShapes = [
            { shape: 'circle', x: 100, y: 100, color: 'red' },
            { shape: 'square', x: 200, y: 200, color: 'blue' },
            { shape: 'triangle', x: 300, y: 300, color: 'green' }
        ];

// Variable para almacenar el elemento seleccionado
        let selectedShape = null;

// Función para dibujar una forma
        function drawShape(shape, x, y, color) {
            ctx.fillStyle = color;
            if (shape === 'circle') {
                ctx.beginPath();
                ctx.arc(x, y, 50, 0, 2 * Math.PI);
                ctx.fill();
            } else if (shape === 'square') {
                ctx.fillRect(x - 50, y - 50, 100, 100);
            } else if (shape === 'triangle') {
                ctx.beginPath();
                ctx.moveTo(x, y - 50);
                ctx.lineTo(x + 50, y + 50);
                ctx.lineTo(x - 50, y + 50);
                ctx.closePath();
                ctx.fill();
            }
        }

// Función para dibujar todos los elementos
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Dibujar las formas predefinidas
            for (const shape of predefinedShapes) {
                drawShape(shape.shape, shape.x, shape.y, shape.color);
            }

// Dibujar los elementos dibujados
            for (const shape of shapes) {
                drawShape(shape.shape, shape.x, shape.y, shape.color);
            }
        }

// Función para buscar el elemento seleccionado
        function findSelectedShape(x, y) {
            for (const shape of shapes.concat(predefinedShapes)) {
                if (shape.shape === 'circle') {
                    if (Math.sqrt((shape.x - x) ** 2 + (shape.y - y) ** 2) <= 50) {
                        return shape;
                    }
                } else if (shape.shape === 'square') {
                    if (x >= shape.x - 50 && x <= shape.x + 50 && y >= shape.y - 50 && y <= shape.y + 50) {
                        return shape;
                    }
                } else if (shape.shape === 'triangle') {
                    const path = new Path2D();
                    path.moveTo(shape.x, shape.y - 50);
                    path.lineTo(shape.x + 50, shape.y + 50);
                    path.lineTo(shape.x - 50, shape.y + 50);
                    path.closePath();
                    if (ctx.isPointInPath(path, x, y)) {
                        return shape;
                    }
                }
            }
            return null;
        }

// Eventos de interacción táctil
        canvas.addEventListener('touchstart', function(event) {
            const touch = event.touches[0];
            const x = touch.clientX - canvas.offsetLeft;
            const y = touch.clientY - canvas.offsetTop;
            selectedShape = findSelectedShape(x, y);
        });

canvas.addEventListener('touchmove', function(event) {
            const touch = event.touches[0];
            const x = touch.clientX - canvas.offsetLeft;
            const y = touch.clientY - canvas.offsetTop;
            if (selectedShape) {
                selectedShape.x = x;
                selectedShape.y = y;
                draw();
            }
        });

canvas.addEventListener('touchend', function() {
            selectedShape = null;
        });

// Evento de click del mouse (para navegadores en computadoras)
        canvas.addEventListener('mousedown', function(event) {
            const x = event.clientX - canvas.offsetLeft;
            const y = event.clientY - canvas.offsetTop;
            selectedShape = findSelectedShape(x, y);
        });

canvas.addEventListener('mousemove', function(event) {
            const x = event.clientX - canvas.offsetLeft;
            const y = event.clientY - canvas.offsetTop;
            if (selectedShape) {
                selectedShape.x = x;
                selectedShape.y = y;
                draw();
            }
        });

canvas.addEventListener('mouseup', function() {
            selectedShape = null;
        });

// Dibujar elementos iniciales
        draw();
    </script>
</body>
</html>
```

Espero que disfrutes jugando con este ejemplo de juego. ¡Diviértete!