🎮ArcadeLab

Dash Libre

by QuantumCaptain33
348 lines6.6 KB
▶ Play
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Dash Libre</title>

<style>
*{box-sizing:border-box}

body{
    margin:0;
    min-height:100vh;
    background:linear-gradient(#10203b,#07101d);
    color:white;
    font-family:Arial,sans-serif;
}

button{
    border:0;
    border-radius:14px;
    padding:16px;
    color:white;
    font-size:17px;
    font-weight:bold;
    background:#234568;
    border:2px solid #5485b2;
}

button:active{
    transform:scale(.96);
}

#app{
    max-width:900px;
    margin:auto;
    padding:15px;
}

.logo{
    text-align:center;
    font-size:48px;
    font-weight:900;
    margin:15px 0 5px;
    text-shadow:0 4px #07101d;
}

.subtitle{
    text-align:center;
    opacity:.8;
    margin-bottom:25px;
}

.menu{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
}

.play{
    grid-column:1/-1;
    background:#1686ad;
    font-size:25px;
}

.multi.active{
    background:#198557;
    border-color:#70ffc1;
}

.screen{
    display:none;
}

.screen.active{
    display:block;
}

.panel{
    background:#12243b;
    border:2px solid #42698e;
    border-radius:16px;
    padding:15px;
    margin-top:15px;
}

.back{
    margin-bottom:15px;
}

.cards{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
    gap:10px;
}

.card{
    background:#1b3451;
    border:2px solid #3e6385;
    border-radius:12px;
    padding:12px;
    text-align:center;
}

.icon{
    font-size:45px;
}

.status{
    text-align:center;
    margin-top:15px;
    opacity:.8;
}

@media(max-width:600px){
    .logo{font-size:36px}
    .menu{grid-template-columns:1fr}
    .play{grid-column:auto}
}
</style>
</head>

<body>

<div id="app">

<!-- ================= MENÚ ================= -->

<section id="home" class="screen active">

    <div class="logo">🎮 DASH LIBRE</div>

    <div class="subtitle">
        Todos desbloqueados • Web Edition
    </div>

    <div class="menu">

        <button class="play" onclick="showScreen('levels')">
            ▶️ JUGAR
        </button>

        <button onclick="showScreen('levels')">
            🗺️ NIVELES
        </button>

        <button onclick="showScreen('gauntlets')">
            🏆 GAUNTLETS
        </button>

        <button onclick="showScreen('icons')">
            🎨 ICONOS
        </button>

        <button onclick="showScreen('editor')">
            🛠️ CREAR NIVEL
        </button>

        <button
            id="multiButton"
            class="multi"
            onclick="toggleMultiplayer()">
            👥 ACTIVAR MULTIPLAYER
        </button>

        <button onclick="showScreen('tackblak')">
            ⭐ TACK BLAK
        </button>

        <button onclick="showScreen('settings')">
            ⚙️ AJUSTES
        </button>

    </div>

    <div id="status" class="status">
        Multiplayer: desactivado
    </div>

</section>


<!-- ================= NIVELES ================= -->

<section id="levels" class="screen">

    <button class="back" onclick="showScreen('home')">
        ← MENÚ
    </button>

    <div class="panel">

        <h1>🗺️ NIVELES</h1>

        <div class="cards" id="levelList"></div>

    </div>

</section>


<!-- ================= GAUNTLETS ================= -->

<section id="gauntlets" class="screen">

    <button class="back" onclick="showScreen('home')">
        ← MENÚ
    </button>

    <div class="panel">

        <h1>🏆 GAUNTLETS</h1>

        <div class="cards">

            <div class="card">
                <div class="icon">🤖</div>
                <h3>BOT GAUNTLET</h3>
                <p>Niveles creados por bots.</p>
                <button onclick="playGauntlet(1)">
                    ▶️ JUGAR
                </button>
            </div>

            <div class="card">
                <div class="icon">🧠</div>
                <h3>IA GAUNTLET</h3>
                <p>Niveles creados por IAs.</p>
                <button onclick="playGauntlet(2)">
                    ▶️ JUGAR
                </button>
            </div>

            <div class="card">
                <div class="icon">⭐</div>
                <h3>TACK BLAK</h3>
                <p>Bots + IAs.</p>
                <button onclick="playGauntlet(3)">
                    ▶️ JUGAR
                </button>
            </div>

        </div>

    </div>

</section>


<!-- ================= ICONOS ================= -->

<section id="icons" class="screen">

    <button class="back" onclick="showScreen('home')">
        ← MENÚ
    </button>

    <div class="panel">

        <h1>🎨 ICONOS</h1>

        <p>Todos están desbloqueados.</p>

        <div class="cards">

            <div class="card">
                <div class="icon">😀</div>
                <button onclick="selectIcon('😀')">USAR</button>
            </div>

            <div class="card">
                <div class="icon">😎</div>
                <button onclick="selectIcon('😎')">USAR</button>
            </div>

            <div class="card">
                <div class="icon">🤖</div>
                <button onclick="selectIcon('🤖')">USAR</button>
            </div>

            <div class="card">
                <div class="icon">👾</div>
                <button onclick="selectIcon('👾')">USAR</button>
            </div>

            <div class="card">
                <div class="icon">⭐</div>
                <button onclick="selectIcon('⭐')">USAR</button>
            </div>

            <div class="card">
                <div class="icon">🌀</div>
                <button onclick="selectIcon('🌀')">USAR</button>
            </div>

        </div>

    </div>

</section>


<!-- ================= EDITOR ================= -->

<section id="editor" class="screen">

    <button class="back" onclick="showScreen('home')">
        ← MENÚ
    </button>

    <div class="panel">

        <h1>🛠️ CREAR NIVEL</h1>

        <p>
            El creador de niveles estará aquí.
        </p>

        <button onclick="alert('🟦 Bloque colocado')">
            🟦 BLOQUE
        </button>

        <button onclick="alert('🔺 Pincho colocado')">
            🔺 PINCHO
        </button>

        <button onclick="alert('🪙 Moneda colocada')">
            🪙 MONEDA
        </button>

        <button onclick="alert('🌀 Portal colocado')">
            🌀 PORTAL
        </button>

    </div>

</section>


<!-- ================= TACK BLAK ================= -->

<section id="tackblak" class="screen">

    <button class="back" onclick="showScreen('home')">
        ← MENÚ
    </button>

    <div class="panel

Game Source: Dash Libre

Creator: QuantumCaptain33

Libraries: none

Complexity: complex (348 lines, 6.6 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: dash-libre-quantumcaptain33" to link back to the original. Then publish at arcadelab.ai/publish.