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

37 DaBoss5292

Abrir en el editor Publica tu código

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

Recomendado

5 March 2023

Carrusel Bootstrap responsivo

1 June 2025

AQUÍ ESTÁ LISA

11 December 2024

Un código de staticcloud996

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