Un juego donde podamos dibujar como si fuera paint y haya formas pre hechas y se pueda mover y girar 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:22700

120

←

Prev Next

→

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

Script

Aquí tienes un ejemplo de cómo podrías implementar un juego de arte con formas predefinidas, la capacidad de mover y girar las formas y la opción de cambiar colores.

Este código crea un lienzo en el que puedes dibujar formas predefinidas y moverlas y girarlas utilizando eventos táctiles. También proporciona una función para cambiar el color de la forma seleccionada actualmente. Puedes modificar y mejorar este ejemplo según tus necesidades individuales, como agregar más formas predefinidas y opciones de personalización.

←

Prev　Next

→ 　

Back　

[PR]現在の人気グッズランキング

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

Aquí tienes un ejemplo de cómo podrías implementar un juego de arte con formas predefinidas, la capacidad de mover y girar las formas y la opción de cambiar colores.

```html
<!DOCTYPE html>
<html>
<head>
    <title>Game</title>
    <style>
        canvas {
            border: 1px solid black;
            touch-action: none; /* Desactiva los eventos táctiles predeterminados */
        }
        .shape {
            position: absolute;
            pointer-events: none; /* Evita que las formas bloqueen los eventos de clic/táctil en el lienzo */
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas"></canvas>
    <script>
        // Obtén una referencia al lienzo y su contexto
        var canvas = document.getElementById("gameCanvas");
        var context = canvas.getContext("2d");

// Define la posición y tamaño inicial de las formas
        var shapes = [
            { x: 50, y: 50, width: 100, height: 100, rotation: 0, color: "red" },
            { x: 200, y: 200, width: 150, height: 75, rotation: 0, color: "blue" }
        ];

// Dibuja todas las formas en el lienzo
        function drawShapes() {
            context.clearRect(0, 0, canvas.width, canvas.height);
            for (var i = 0; i < shapes.length; i++) {
                var shape = shapes[i];
                context.save();
                context.translate(shape.x + shape.width/2, shape.y + shape.height/2);
                context.rotate(shape.rotation);
                context.fillStyle = shape.color;
                context.fillRect(-shape.width/2, -shape.height/2, shape.width, shape.height);
                context.restore();
            }
        }

// Verifica si el evento de clic/táctil ocurrió dentro de alguna forma
        function getShapeAtPosition(x, y) {
            for (var i = shapes.length - 1; i >= 0; i--) {
                var shape = shapes[i];
                var minX = shape.x;
                var minY = shape.y;
                var maxX = shape.x + shape.width;
                var maxY = shape.y + shape.height;
                if (x >= minX && x <= maxX && y >= minY && y <= maxY) {
                    return shape;
                }
            }
            return null;
        }

// Maneja el movimiento y giro de las formas
        function handleTouchMove(event) {
            event.preventDefault();
            var touch = event.changedTouches[0];
            var shape = getShapeAtPosition(touch.clientX, touch.clientY);
            if (shape) {
                shape.x = touch.clientX - shape.width/2;
                shape.y = touch.clientY - shape.height/2;
                shape.rotation += Math.PI / 180; // gira 1 grado
                drawShapes();
            }
        }

// Cambia el color de la forma seleccionada
        function changeColor(color) {
            var selectedShape = getSelectedShape();
            if (selectedShape) {
                selectedShape.color = color;
                drawShapes();
            }
        }

// Obtiene la forma seleccionada actualmente
        function getSelectedShape() {
            // Supongamos que solo se permite seleccionar una forma a la vez
            return shapes.find(function(shape) {
                return shape.color === "yellow";
            });
        }

// Agrega el manejo de eventos táctiles al lienzo
        canvas.addEventListener("touchmove", handleTouchMove, { passive: false });

// Dibuja las formas iniciales
        drawShapes();
    </script>
</body>
</html>
```

Puedes modificar y mejorar este ejemplo según tus necesidades individuales, como agregar más formas predefinidas y opciones de personalización.