Webleb - Extraits de Code - Escape Road 2 : Jeu HTML de poursuite à grande vitesse

HTML CSS JS

<!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>

Preview

Open Advanced Editor Full Screen