Drift Racer HTML: Car Select, Levels, Game Over

Open In Editor Video Publish Your Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drift Racer - Second Person</title>
    <link rel="stylesheet" href="drift_style.css">
</head>
<body>
    <div id="game-container">
        <canvas id="gameCanvas"></canvas>
        
        
        <div id="main-menu">
            <h1>DRIFT RACER</h1>
            <div class="menu-buttons">
                <button id="free-mode-btn">FREE MODE</button>
                <button id="level-mode-btn">LEVEL MODE (1-99)</button>
                <button id="select-car-btn">SELECT CAR</button>
            </div>
            <div class="instructions">
                <p><strong>Controls:</strong></p>
                <p>WASD or Arrows - Drive</p>
                <p>SPACE - Drift</p>
                <p>Goal: Drift and dodge obstacles!</p>
            </div>
        </div>
        
        
        <div id="car-selection" class="hidden">
            <h2>SELECT YOUR CAR</h2>
            <div class="cars-grid">
                <div class="car-card" data-car="0">
                    <div class="car-preview" style="background: #cc0000"></div>
                    <h3>RED SPORT</h3>
                    <p>Speed: 400 | Handling: 1.0x</p>
                </div>
                <div class="car-card" data-car="1">
                    <div class="car-preview" style="background: #0066ff"></div>
                    <h3>BLUE RACER</h3>
                    <p>Speed: 420 | Handling: 1.1x</p>
                </div>
                <div class="car-card" data-car="2">
                    <div class="car-preview" style="background: #3d5c3d"></div>
                    <h3>WAR CAR</h3>
                    <p>Speed: 300 | Handling: 0.8x</p>
                </div>
                <div class="car-card" data-car="3">
                    <div class="car-preview" style="background: #8b7355"></div>
                    <h3>CAMPER VAN</h3>
                    <p>Speed: 250 | Handling: 0.6x</p>
                </div>
                <div class="car-card" data-car="4">
                    <div class="car-preview" style="background: #1a1a1a"></div>
                    <h3>BLACK BEAST</h3>
                    <p>Speed: 450 | Handling: 1.2x</p>
                </div>
                <div class="car-card" data-car="5">
                    <div class="car-preview" style="background: #ffcc00"></div>
                    <h3>YELLOW LIGHT</h3>
                    <p>Speed: 380 | Handling: 1.0x</p>
                </div>
                <div class="car-card" data-car="6">
                    <div class="car-preview" style="background: #228b22"></div>
                    <h3>GREEN MACHINE</h3>
                    <p>Speed: 350 | Handling: 0.9x</p>
                </div>
                <div class="car-card" data-car="7">
                    <div class="car-preview" style="background: #ff69b4"></div>
                    <h3>PINK DREAM</h3>
                    <p>Speed: 370 | Handling: 1.0x</p>
                </div>
                <div class="car-card" data-car="8">
                    <div class="car-preview" style="background: #c0c0c0"></div>
                    <h3>SILVER GHOST</h3>
                    <p>Speed: 430 | Handling: 1.1x</p>
                </div>
                <div class="car-card" data-car="9">
                    <div class="car-preview" style="background: #ff6600"></div>
                    <h3>ORANGE FURY</h3>
                    <p>Speed: 400 | Handling: 1.0x</p>
                </div>
            </div>
            <button id="back-to-menu">BACK</button>
        </div>
        
        
        <div id="level-select" class="hidden">
            <h2>SELECT LEVEL</h2>
            <div class="levels-grid">
                <button class="level-btn" data-level="1">1</button>
                <button class="level-btn" data-level="2">2</button>
                <button class="level-btn" data-level="3">3</button>
                <button class="level-btn" data-level="4">4</button>
                <button class="level-btn" data-level="5">5</button>
                <button class="level-btn" data-level="6">6</button>
                <button class="level-btn" data-level="7">7</button>
                <button class="level-btn" data-level="8">8</button>
                <button class="level-btn" data-level="9">9</button>
                <button class="level-btn" data-level="10">10</button>
                <button class="level-btn" data-level="11">11</button>
                <button class="level-btn" data-level="12">12</button>
            </div>
            <button id="back-btn">BACK</button>
        </div>
        
        
        <div id="hud" class="hidden">
            <div id="level-display">Level: <span id="current-level">1</span></div>
            <div id="score-display">Score: <span id="score">0</span></div>
            <div id="drift-display">Drift: <span id="drift-points">0</span></div>
            <div id="speed-display">Speed: <span id="speed">0</span> km/h</div>
        </div>
        
        
        <div id="game-over" class="hidden">
            <h1>CRASH!</h1>
            <p>You hit an obstacle!</p>
            <p>Score: <span id="final-score">0</span></p>
            <button onclick="location.reload()">TRY AGAIN</button>
        </div>
        
        
        <div id="level-complete" class="hidden">
            <h1>LEVEL COMPLETE!</h1>
            <p>Score: <span id="level-score">0</span></p>
            <button id="next-level-btn">NEXT LEVEL</button>
        </div>
    </div>
    <script src="drift_game.js"></script>
</body>
</html>

CSS

/* Replace with your CSS Code (Leave empty if not needed) */* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #1a3a1a 0%, #0d1f0d 100%);
    font-family: 'Arial', sans-serif;
    overflow: hidden;
}

#game-container {
    position: relative;
    width: 1200px;
    height: 700px;
    border: 4px solid #333;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}

#gameCanvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Main Menu */
#main-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    z-index: 100;
}

#main-menu h1 {
    font-size: 64px;
    color: #fff;
    text-shadow: 0 0 30px #ff4444, 0 0 60px #ff4444;
    margin-bottom: 50px;
    letter-spacing: 10px;
}

.menu-buttons {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}

.menu-buttons button {
    padding: 20px 50px;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(135deg, #e94560 0%, #c23a51 100%);
    border: 3px solid #fff;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.menu-buttons button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(233, 69, 96, 0.8);
}

#select-car-btn {
    background: linear-gradient(135deg, #4da8da 0%, #2d7a9e 100%) !important;
}

#select-car-btn:hover {
    box-shadow: 0 0 30px rgba(77, 168, 218, 0.8) !important;
}

/* Car Selection */
#car-selection {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    z-index: 100;
}

#car-selection h2 {
    color: #fff;
    font-size: 40px;
    margin-bottom: 30px;
    text-shadow: 0 0 20px #4da8da;
}

.cars-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-bottom: 30px;
    padding: 20px;
}

.car-card {
    width: 150px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.1);
    border: 3px solid #333;
    border-radius: 15px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.car-card:hover {
    transform: scale(1.1);
    border-color: #fff;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 25px rgba(255, 255, 255, 0.3);
}

.car-preview {
    width: 100%;
    height: 80px;
    border-radius: 10px;
    margin-bottom: 10px;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.car-card h3 {
    color: #fff;
    font-size: 14px;
    margin-bottom: 5px;
}

.car-card p {
    color: #aaa;
    font-size: 11px;
}

#back-to-menu {
    padding: 15px 40px;
    font-size: 18px;
    color: #fff;
    background: #333;
    border: 2px solid #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

#back-to-menu:hover {
    background: #555;
}

.instructions {
    background: rgba(0, 0, 0, 0.5);
    padding: 20px 40px;
    border-radius: 10px;
    color: #aaa;
    text-align: center;
}

.instructions p {
    margin: 5px 0;
}

/* Level Selection */
#level-select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    z-index: 100;
}

#level-select h2 {
    color: #fff;
    font-size: 40px;
    margin-bottom: 30px;
    text-shadow: 0 0 20px #4da8da;
}

.levels-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
    margin-bottom: 30px;
}

.level-btn {
    width: 80px;
    height: 80px;
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(135deg, #4da8da 0%, #2d7a9e 100%);
    border: 3px solid #fff;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

.level-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(77, 168, 218, 0.8);
    background: linear-gradient(135deg, #6fc5ea 0%, #4da8da 100%);
}

#back-btn {
    padding: 15px 40px;
    font-size: 18px;
    color: #fff;
    background: #333;
    border: 2px solid #fff;
    border-radius: 8px;
    cursor: pointer;
}

#back-btn:hover {
    background: #555;
}

/* HUD */
#hud {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 50;
}

#level-display, #score-display, #drift-display, #speed-display {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

#drift-display {
    color: #ffcc00;
    text-shadow: 0 0 10px #ffcc00;
}

#speed-display {
    color: #00ff00;
}

/* Game Screens */
#game-over, #level-complete {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    z-index: 200;
}

#game-over h1 {
    font-size: 60px;
    color: #ff4444;
    text-shadow: 0 0 30px #ff0000;
    margin-bottom: 20px;
}

#level-complete h1 {
    font-size: 50px;
    color: #00ff00;
    text-shadow: 0 0 30px #00ff00;
    margin-bottom: 20px;
}

#game-over p, #level-complete p {
    font-size: 24px;
    margin-bottom: 10px;
}

#game-over button, #level-complete button, #next-level-btn {
    margin-top: 30px;
    padding: 15px 50px;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(135deg, #e94560 0%, #c23a51 100%);
    border: 3px solid #fff;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
}

#game-over button:hover, #level-complete button:hover {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(233, 69, 96, 0.8);
}

.hidden {
    display: none !important;
}

JS

// Drift Racer - Third Person View with Proper Car Physics

Drift Racer HTML: Car Select, Levels, Game Over

Recommended

Deepest Sword Game - Play Online (HTML5)

HTML Button Hover Effects Example

HTML Login Registration Form with 3D Card Effect

HTML

CSS

JS

Recommended

Deepest Sword Game - Play Online (HTML5)

HTML Button Hover Effects Example

HTML Login Registration Form with 3D Card Effect

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS