406x406 HTML ad preview

Live Preview

Tag didn’t load? Click here and let us know!
406x406
2.22 KB
Share this result

Previews are deleted daily. Get a permanent share link sent to your inbox:
Script

Open in browser
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Laberinto Retro 2000</title>
    <style>
        * {
            box-sizing: border-box;
            user-select: none;
            -webkit-user-select: none;
            touch-action: manipulation;
        }
        body {
            margin: 0;
            padding: 0;
            background-color: #000;
            color: #fff;
            font-family: 'Courier New', Courier, monospace;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            height: 100vh;
            overflow: hidden;
        }
        #header {
            width: 100%;
            text-align: center;
            padding: 8px;
            font-size: 18px;
            font-weight: bold;
            background: #111;
            border-bottom: 2px solid #444;
        }
        #info {
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 6px 12px;
            font-size: 14px;
            background: #111;
        }
        #game-container {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            background: #000;
        }
        canvas {
            background: #000;
            border: 3px solid #0f0;
            max-width: 95vw;
            max-height: 60vh;
            image-rendering: pixelated;
        }
        #controls {
            display: grid;
            grid-template-columns: 60px 60px 60px;
            grid-template-rows: 60px 60px 60px;
            gap: 4px;
            padding: 10px;
        }
        .btn {
            background: #222;
            border: 2px solid #0f0;
            color: #0f0;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            cursor: pointer;
        }
        .btn:active { background: #0f0; color: #000; }
        #mensaje {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #111;
            border: 3px solid #0f0;
            padding: 20px;
            text-align: center;
            display: none;
            z-index: 10;
        }
        #mensaje button {
            background: #0f0;
            border: none;
            padding: 10px 20px;
            font-family: inherit;
            font-weight: bold;
            margin-top: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="header">LABERINTO RETRO 2000</div>
    <div id="info">
        <span>⏱ TIEMPO: <span id="tiempo">0</span>s</span>
        <span>NIVEL: <span id="nivel">1</span></span>
        <span>⭐ PUNTOS: <span id="puntos">0</span></span>
    </div>

    <div id="game-container">
        <canvas id="game" width="400" height="400"></canvas>
    </div>

    <div id="controls">
        <div></div>
        <div class="btn" id="up">↑</div>
        <div></div>
        <div class="btn" id="left">←</div>
        <div class="btn" id="down">↓</div>
        <div class="btn" id="right">→</div>
    </div>

    <div id="mensaje">
        <h2 id="mensaje-texto">¡GANASTE!</h2>
        <p id="mensaje-sub"></p>
        <button onclick="siguienteNivel()">SIGUIENTE NIVEL →</button>
    </div>

    <script>
        const canvas = document.getElementById('game');
        const ctx = canvas.getContext('2d');
        const CELL = 40;
        const COLS = 10;
        const ROWS = 10;

        let nivel = 1;
        let puntos = 0;
        let tiempo = 0;
        let timer;
        let jugador = {x: 1, y: 1};
        let meta = {x: 8, y: 8};

        // 0 = camino, 1 = pared
        let mapaBase = [
            [1,1,1,1,1,1,1,1,1,1],
            [1,0,0,0,1,0,0,0,0,1],
            [1,0,1,0,1,0,1,1,0,1],
            [1,0,1,0,0,0,0,1,0,1],
            [1,0,1,1,1,1,0,1,0,1],
            [1,0,0,0,0,1,0,0,0,1],
            [1,1,1,1,0,1,1,1,0,1],
            [1,0,0,1,0,0,0,1,0,1],
            [1,0,1,1,1,1,0,0,0,1],
            [1,1,1,1,1,1,1,1,1,1],
        ];
        let mapa = JSON.parse(JSON.stringify(mapaBase));

        function dibujar() {
            ctx.clearRect(0,0,canvas.width, canvas.height);
            for(let y=0; y<ROWS; y++){
                for(let x=0; x<COLS; x++){
                    if(mapa[y][x] === 1){
                        ctx.fillStyle = '#0f0';
                        ctx.fillRect(x*CELL, y*CELL, CELL, CELL);
                        ctx.fillStyle = '#003300';
                        ctx.fillRect(x*CELL+4, y*CELL+4, CELL-8, CELL-8);
                    }
                }
            }
            // Meta
            ctx.fillStyle = '#ff0';
            ctx.fillRect(meta.x*CELL+5, meta.y*CELL+5, CELL-10, CELL-10);
            ctx.fillStyle = '#000';
            ctx.font = 'bold 20px Courier';
            ctx.fillText('★', meta.x*CELL+12, meta.y*CELL+28);

            // Jugador
            ctx.fillStyle = '#f00';
            ctx.fillRect(jugador.x*CELL+8, jugador.y*CELL+8, CELL-16, CELL-16);
            ctx.fillStyle = '#fff';
            ctx.fillRect(jugador.x*CELL+13, jugador.y*CELL+13, 5, 5);
            ctx.fillRect(jugador.x*CELL+22, jugador.y*CELL+13, 5, 5);
        }

        function mover(dx, dy){
            let nx = jugador.x + dx;
            let ny = jugador.y + dy;
            if(mapa[ny][nx] === 0){
                jugador.x = nx;
                jugador.y = ny;
                dibujar();
                if(jugador.x === meta.x && jugador.y === meta.y){
                    ganar();
                }
            }
        }

        function ganar(){
            clearInterval(timer);
            puntos += 100 + (100 - tiempo);
            document.getElementById('puntos').textContent = puntos;
            document.getElementById('mensaje-texto').textContent = '¡GANASTE NIVEL ' + nivel + '!';
            document.getElementById('mensaje-sub').textContent = 'Tiempo: ' + tiempo + 's - Puntos: ' + puntos;
            document.getElementById('mensaje').style.display = 'block';
        }

        function siguienteNivel(){
            nivel++;
            document.getElementById('nivel').textContent = nivel;
            document.getElementById('mensaje').style.display = 'none';
            jugador = {x:1, y:1};
            // Cambia la meta de lugar para que no sea siempre igual
            meta = {x: 8, y: nivel % 2 === 0 ? 1 : 8};
            tiempo = 0;
            iniciarTiempo();
            dibujar();
        }

        function iniciarTiempo(){
            clearInterval(timer);
            timer = setInterval(()=>{
                tiempo++;
                document.getElementById('tiempo').textContent = tiempo;
            }, 1000);
        }

        document.getElementById('up').onclick = ()=> mover(0,-1);
        document.getElementById('down').onclick = ()=> mover(0,1);
        document.getElementById('left').onclick = ()=> mover(-1,0);
        document.getElementById('right').onclick = ()=> mover(1,0);

        document.addEventListener('keydown', (e)=>{
            if(e.key === 'ArrowUp') mover(0,-1);
            if(e.key === 'ArrowDown') mover(0,1);
            if(e.key === 'ArrowLeft') mover(-1,0);
            if(e.key === 'ArrowRight') mover(1,0);
        });

        dibujar();
        iniciarTiempo();
    </script>
</body>
</html>
Landing Page

This ad does not have a landing page available
Network Timeline

Performance Summary

Requests
Domains
8KB
Transfer Size
8KB
Content Size
133.0ms
Dom Content Loaded
144.0ms
First Paint
133.0ms
Load Time
Domain Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests
Timings (ms)
Total Time
Content Breakdown

Transfer Size (bytes)
Content Size (bytes)
Header Size (bytes)
Requests