HTML Editor

Edita código
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Puzzle de 4 Piezas</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }
        #puzzle-container {
            position: relative;
            width: 90vmin;
            height: 90vmin; /* La altura también será proporcional a la anchura */
            max-width: 1000px;
            max-height: 1000px;
            border: 2px solid #000;
            box-sizing: border-box;
        }
        .puzzle-piece {
            position: absolute;
            background-image: url('images2/imagen1.jpg');
            background-size: calc(100% * 2) calc(100% * 2); /* Ajustar para que cada pieza sea una parte de la imagen */
            border: 1px solid #ccc;
            cursor: pointer;
            transform-origin: center center;
        }
        #message, #success-message {
            position: absolute;
            top: 40%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 4vmin;
            text-align: center;
            display: none;
            z-index: 10;
            animation: fadeIn 2s ease-in-out;
        }
        #message {
            color: #32CD32;
        }
        #success-message {
            top: 70%;
            color: orange;
            font-size: 4vmin;
            animation: fadeInOut 4s ease-in-out;
        }
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        @keyframes fadeInOut {
            0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
            50% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        }
    </style>
</head>
<body style="overflow: hidden">
    <div id="puzzle-container">
        <div id="message" style="color: white; text-shadow: 2px 1px black">¡Felicitaciones! <br>Has completado el puzzle.</div>
        <div id="success-message" style="text-shadow: 2px 1px black">¡Lo lograste!</div>
    </div>
    <script>
        const PUZZLE_ROWS = 2; // Número de filas
        const PUZZLE_COLS = 2; // Número de columnas

        const container = document.getElementById('puzzle-container');
        const message = document.getElementById('message');
        const successMessage = document.getElementById('success-message');

        function getRandomRotation() {
            const rotations = [0, 90, 180, 270];
            return rotations[Math.floor(Math.random() * rotations.length)];
        }

        function createPuzzle() {
            const containerWidth = container.clientWidth;
            const pieceSize = containerWidth / PUZZLE_COLS;

            for (let row = 0; row < PUZZLE_ROWS; row++) {
                for (let col = 0; col < PUZZLE_COLS; col++) {
                    const piece = document.createElement('div');
                    piece.className = 'puzzle-piece';
                    piece.style.width = `${pieceSize}px`;
                    piece.style.height = `${pieceSize}px`;
                    piece.style.left = `${col * pieceSize}px`;
                    piece.style.top = `${row * pieceSize}px`;
                    piece.style.backgroundPosition = `-${col * pieceSize}px -${row * pieceSize}px`;
                    piece.setAttribute('data-row', row);
                    piece.setAttribute('data-col', col);
                    piece.setAttribute('data-rotation', getRandomRotation());
                    piece.style.transform = `rotate(${piece.getAttribute('data-rotation')}deg)`;
                    piece.addEventListener('click', rotatePiece);
                    container.appendChild(piece);
                }
            }
        }

        function rotatePiece(e) {
            const piece = e.target;
            let currentRotation = parseInt(piece.getAttribute('data-rotation'));
            currentRotation = (currentRotation + 90) % 360;
            piece.setAttribute('data-rotation', currentRotation);
            piece.style.transform = `rotate(${currentRotation}deg)`;
            checkPuzzle();
        }

        function checkPuzzle() {
            const pieces = document.querySelectorAll('.puzzle-piece');
            let correct = true;
            pieces.forEach(piece => {
                const rotation = parseInt(piece.getAttribute('data-rotation'));
                if (rotation !== 0) {
                    correct = false;
                }
            });

            if (correct) {
                message.style.display = 'block';
                successMessage.style.display = 'block';
            }
        }

        createPuzzle();

        window.addEventListener('resize', () => {
            const pieces = document.querySelectorAll('.puzzle-piece');
            const containerWidth = container.clientWidth;
            const pieceSize = containerWidth / PUZZLE_COLS;

            pieces.forEach(piece => {
                const col = piece.getAttribute('data-col');
                const row = piece.getAttribute('data-row');
                piece.style.width = `${pieceSize}px`;
                piece.style.height = `${pieceSize}px`;
                piece.style.left = `${col * pieceSize}px`;
                piece.style.top = `${row * pieceSize}px`;
                piece.style.backgroundPosition = `-${col * pieceSize}px -${row * pieceSize}px`;
            });
        });
    </script>
</body>
</html>