Escape Road 2: Juego HTML de persecución a alta velocidad

252 DaBoss5292

Abrir en el editor Publica tu código

Escape Road 2: Juego HTML de persecución a alta velocidad

Recomendado

4 December 2024

Página de destino - Aviso

6 December 2024

Página de inicio - Casa de lujo

22 June 2025

Ejemplo de formulario de inicio de sesión HTML

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Escape Road 2 - High Speed Pursuit</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #0a0a0a;
            color: #ffffff;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

header {
            width: 100%;
            padding: 20px 0;
            text-align: center;
            background: linear-gradient(180deg, #ff0000 0%, #0a0a0a 100%);
            box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
        }

h1 {
            margin: 0;
            font-size: 3rem;
            text-transform: uppercase;
            letter-spacing: 5px;
            text-shadow: 2px 2px 10px #000;
        }

#game-viewport {
            width: 90%;
            max-width: 960px;
            aspect-ratio: 16 / 9;
            background-color: #1a1a1a;
            margin: 30px 0;
            border: 3px solid #444;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            cursor: pointer;
            overflow: hidden;
            border-radius: 8px;
            box-shadow: 0 0 30px rgba(255, 0, 0, 0.1);
        }

#game-viewport:hover {
            border-color: #ff0000;
        }

.play-overlay {
            text-align: center;
            z-index: 10;
        }

.btn-play {
            background-color: #ff0000;
            color: white;
            border: none;
            padding: 15px 40px;
            font-size: 1.5rem;
            font-weight: bold;
            border-radius: 50px;
            cursor: pointer;
            transition: transform 0.2s, background-color 0.2s;
        }

.btn-play:hover {
            transform: scale(1.1);
            background-color: #cc0000;
        }

.info-section {
            width: 90%;
            max-width: 960px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 50px;
        }

.card {
            background: #1a1a1a;
            padding: 20px;
            border-radius: 10px;
            border-left: 5px solid #ff0000;
        }

h3 {
            color: #ff0000;
            margin-top: 0;
        }

.controls-list {
            list-style: none;
            padding: 0;
        }

.controls-list li {
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid #333;
            padding-bottom: 5px;
        }

.key {
            background: #333;
            padding: 2px 8px;
            border-radius: 4px;
            font-family: monospace;
        }
    </style>
</head>
<body>

<header>
        <h1>ESCAPE ROAD 2</h1>
    </header>

<div id="game-viewport">
        <div class="play-overlay">
            <button class="btn-play">START ENGINE</button>
            <p>Evade the police. Survive the pursuit.</p>
        </div>
    </div>

<div class="info-section">
        <div class="card">
            <h3>How to Play</h3>
            <p>In Escape Road 2, you are the most wanted driver in the city. Navigate through heavy traffic, avoid police roadblocks, and use your driving skills to lose the heat. Collect cash to upgrade your vehicle and unlock faster cars.</p>
        </div>

<div class="card">
            <h3>Controls</h3>
            <ul class="controls-list">
                <li><span>Accelerate</span> <span class="key">W / UP</span></li>
                <li><span>Steer Left</span> <span class="key">A / LEFT</span></li>
                <li><span>Steer Right</span> <span class="key">D / RIGHT</span></li>
                <li><span>Brake/Reverse</span> <span class="key">S / DOWN</span></li>
                <li><span>Handbrake</span> <span class="key">SPACE</span></li>
            </ul>
        </div>
    </div>

</body>
</html>

CSS