3D Sports Racer - Version 1

by ChromeMeteor64

169 lines3.3 KB

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D Sports Racer - Version 1</title>

<style>
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        overflow: hidden;
        background: #111;
        font-family: Arial, sans-serif;
    }

    #game {
        width: 100vw;
        height: 100vh;
    }

    #menu {
        position: fixed;
        inset: 0;
        background: linear-gradient(#111827, #020617);
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 10;
    }

    #menu h1 {
        font-size: 42px;
        margin-bottom: 10px;
    }

    #menu p {
        margin-bottom: 25px;
        color: #cbd5e1;
    }

    button {
        border: none;
        border-radius: 12px;
        padding: 15px 30px;
        margin: 8px;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        background: #2563eb;
        color: white;
    }

    button:hover {
        background: #1d4ed8;
    }

    #hud {
        position: fixed;
        top: 15px;
        left: 15px;
        z-index: 5;
        color: white;
        background: rgba(0,0,0,.55);
        padding: 12px 16px;
        border-radius: 12px;
        font-size: 16px;
    }

    #controls {
        position: fixed;
        bottom: 20px;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0 25px;
        z-index: 5;
        pointer-events: none;
    }

    .controlGroup {
        display: flex;
        gap: 12px;
        pointer-events: auto;
    }

    .control {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        background: rgba(0,0,0,.65);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 25px;
        user-select: none;
        touch-action: none;
    }

    #message {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 35px;
        font-weight: bold;
        text-align: center;
        display: none;
        z-index: 20;
        text-shadow: 2px 2px 8px black;
    }
</style>
</head>

<body>

<div id="game"></div>

<div id="menu">
    <h1>🏁 3D SPORTS RACER</h1>
    <p>Version 1 • Race Mode</p>

    <button onclick="startGame('BMW')">BMW</button>
    <button onclick="startGame('Ferrari')">FERRARI</button>
</div>

<div id="hud">
    Speed: <span id="speed">0</span> km/h<br>
    Distance: <span id="distance">0</span> m
</div>

<div id="controls">
    <div class="controlGroup">
        <div class="control" id="left">◀</div>
        <div class="control" id="right">▶</div>
    </div>

    <div class="controlGroup">
        <div class="control" id="brake">▼</div>
        <div class="control" id="gas">▲</div>
    </div>
</div>

<div id="message"></div>

<script src="https://cdn.jsdelivr.net/npm/three@0.160.0/build/three.min.js"></script>

<script>
let scene, camera, renderer;
let player;
let road;
let started = false;

let speed = 0;
let distance = 0;

let acceleration = 0;
let steering = 0;

const maxSpeed = 1.

Game Source: 3D Sports Racer - Version 1

Creator: ChromeMeteor64

Libraries: none

Complexity: moderate (169 lines, 3.3 KB)

The full source code is displayed above on this page.

Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: 3d-sports-racer-version-1-chromemeteor64" to link back to the original. Then publish at arcadelab.ai/publish.