Escape Road 2 : Jeu HTML de poursuite à grande vitesse

38 DaBoss5292

Ouvrir dans l'éditeur Publiez votre code

Escape Road 2 : Jeu HTML de poursuite à grande vitesse

Recommandé

8 April 2026

Minecraft masqué débloqué

20 September 2025

Animation du spinner de chargement CSS

1 May 2026

jeu de pile

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