Escape Road 2 : Jeu HTML de poursuite à grande vitesse

410 DaBoss5292

Ouvrir dans l'éditeur Publiez votre code

Escape Road 2 : Jeu HTML de poursuite à grande vitesse

Recommandé

5 May 2026

Jouez à DOOM dans votre navigateur - Émulation DOS

16 October 2025

Exemples d'animation CSS : chargement, cubes, sphères

13 October 2025

Animation de chargement CSS : Pulse & Sparks

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