Webleb - UI Elements

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>Retro F1 Racer</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #222;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden;
        }
        #ui {
            position: absolute;
            top: 20px;
            left: 20px;
            background: rgba(0, 0, 0, 0.7);
            padding: 15px;
            border-radius: 8px;
            border: 2px solid #e10600;
            pointer-events: none;
        }
        canvas {
            background-color: #333;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
            border: 5px solid #444;
            cursor: crosshair;
        }
        .controls {
            margin-top: 10px;
            font-size: 0.8em;
            color: #aaa;
        }
        #lap-msg {
            position: absolute;
            font-size: 3em;
            font-weight: bold;
            color: #e10600;
            display: none;
            text-shadow: 2px 2px #000;
        }
    </style>
</head>
<body>

<div id="ui">
        <div>Speed: <span id="speed">0</span> km/h</div>
        <div>Lap: <span id="lap">1</span>/3</div>
        <div>Time: <span id="timer">0.0</span>s</div>
        <div class="controls">ARROWS or WASD to Drive</div>
    </div>

<div id="lap-msg">LAP COMPLETE!</div>
    <canvas id="gameCanvas"></canvas>

canvas.width = 800;
    canvas.height = 600;

// Game Constants
    const FRICTION = 0.98;
    const ACCEL = 0.2;
    const STEER = 0.04;
    const OFF_ROAD_FRICTION = 0.92;

// Car State
    let car = {
        x: 400,
        y: 520,
        angle: 0,
        speed: 0,
        width: 20,
        height: 10,
        laps: 1,
        lastCheckpoint: false
    };

let startTime = Date.now();
    let keys = {};

// Track definition (Points for a curvy F1-style loop)
    const trackPath = [
        {x: 100, y: 500}, {x: 700, y: 500}, {x: 750, y: 400},
        {x: 600, y: 200}, {x: 700, y: 100}, {x: 400, y: 50},
        {x: 200, y: 150}, {x: 50, y: 300}, {x: 100, y: 500}
    ];

window.addEventListener('keydown', e => keys[e.key.toLowerCase()] = true);
    window.addEventListener('keyup', e => keys[e.key.toLowerCase()] = false);

function drawTrack() {
        // Grass
        ctx.fillStyle = '#2d5a27';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

// Track Asphalt
        ctx.strokeStyle = '#444';
        ctx.lineWidth = 60;
        ctx.lineJoin = 'round';
        ctx.lineCap = 'round';
        ctx.beginPath();
        ctx.moveTo(trackPath[0].x, trackPath[0].y);
        for(let i = 1; i < trackPath.length; i++) {
            ctx.lineTo(trackPath[i].x, trackPath[i].y);
        }
        ctx.closePath();
        ctx.stroke();

// Kerbs (Red/White Rumble Strips)
        ctx.setLineDash([15, 15]);
        ctx.strokeStyle = '#fff';
        ctx.lineWidth = 65;
        ctx.stroke();
        ctx.strokeStyle = '#e10600';
        ctx.lineDashOffset = 15;
        ctx.stroke();
        ctx.setLineDash([]);

// Center Line (Dashed)
        ctx.strokeStyle = '#666';
        ctx.lineWidth = 2;
        ctx.setLineDash([10, 20]);
        ctx.stroke();
        ctx.setLineDash([]);

// Start/Finish Line
        ctx.fillStyle = '#fff';
        ctx.fillRect(395, 470, 10, 60);
        ctx.fillStyle = '#000';
        for(let i=0; i<6; i++) ctx.fillRect(395, 470 + (i*10), 5, 5);
        for(let i=0; i<6; i++) ctx.fillRect(400, 475 + (i*10), 5, 5);
    }

function update() {
        // Steering
        if (keys['arrowleft'] || keys['a']) car.angle -= STEER * (Math.abs(car.speed) / 5 + 0.5);
        if (keys['arrowright'] || keys['d']) car.angle += STEER * (Math.abs(car.speed) / 5 + 0.5);

// Acceleration
        if (keys['arrowup'] || keys['w']) car.speed += ACCEL;
        if (keys['arrowdown'] || keys['s']) car.speed -= ACCEL;

// Apply Physics
        car.speed *= FRICTION;
        car.x += Math.cos(car.angle) * car.speed;
        car.y += Math.sin(car.angle) * car.speed;

// Off-road detection (check pixel color)
        const p = ctx.getImageData(car.x, car.y, 1, 1).data;
        // If not grey-ish (asphalt)
        if (p[0] === 45 && p[1] === 90 && p[2] === 39) { 
            car.speed *= OFF_ROAD_FRICTION;
        }

// Lap logic (Simple x-coordinate trigger)
        if (car.x > 390 && car.x < 410 && car.y > 470 && car.y < 530) {
            if (car.lastCheckpoint) {
                car.laps++;
                car.lastCheckpoint = false;
                lapEl.innerText = car.laps;
                showLapMsg();
            }
        } else if (car.x > 400 && car.y < 300) {
            car.lastCheckpoint = true; // Halfway mark
        }

// UI Updates
        speedEl.innerText = Math.abs(Math.round(car.speed * 20));
        timerEl.innerText = ((Date.now() - startTime) / 1000).toFixed(1);
    }

function showLapMsg() {
        lapMsg.style.display = 'block';
        setTimeout(() => lapMsg.style.display = 'none', 1000);
    }

function drawCar() {
        ctx.save();
        ctx.translate(car.x, car.y);
        ctx.rotate(car.angle);
        
        // Car Body (F1 shape)
        ctx.fillStyle = '#e10600'; // Ferrari Red
        ctx.fillRect(-12, -6, 24, 12);
        
        // Front Wing
        ctx.fillStyle = '#111';
        ctx.fillRect(8, -10, 4, 20);
        
        // Rear Wing
        ctx.fillRect(-14, -8, 3, 16);

// Wheels
        ctx.fillStyle = '#000';
        ctx.fillRect(-10, -9, 6, 4); // TL
        ctx.fillRect(-10, 5, 6, 4);  // BL
        ctx.fillRect(6, -9, 5, 3);   // TR
        ctx.fillRect(6, 6, 5, 3);    // BR

// Cockpit
        ctx.fillStyle = '#000';
        ctx.fillRect(-2, -3, 6, 6);

ctx.restore();
    }

function gameLoop() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        drawTrack();
        update();
        drawCar();
        requestAnimationFrame(gameLoop);
    }

gameLoop();
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D F1 Racing Pro</title>
    <style>
        body { margin: 0; overflow: hidden; background: #000; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
        #ui {
            position: absolute;
            top: 20px;
            left: 20px;
            color: white;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
            pointer-events: none;
        }
        .stat { font-size: 24px; font-weight: bold; margin-bottom: 5px; }
        #speed { font-size: 48px; color: #f1c40f; }
        #controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255,255,255,0.7);
            font-size: 14px;
            text-align: center;
        }
        canvas { display: block; }
    </style>
</head>
<body>

<div id="controls">WASD / ARROWS to Drive | SPACE to Drift</div>

// --- Game Configuration ---
    let scene, camera, renderer, clock;
    let player, bots = [];
    const trackRadius = 150;
    const trackWidth = 20;
    const botCount = 4;
    
    const keys = { w: false, s: false, a: false, d: false };

init();
    animate();

function init() {
        scene = new THREE.Scene();
        scene.background = new THREE.Color(0x87ceeb); // Sky blue
        scene.fog = new THREE.Fog(0x87ceeb, 50, 400);

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        
        renderer = new THREE.WebGLRenderer({ antialias: true });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.shadowMap.enabled = true;
        document.body.appendChild(renderer.domElement);

clock = new THREE.Clock();

// Lighting
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
        scene.add(ambientLight);

const sun = new THREE.DirectionalLight(0xffffff, 1);
        sun.position.set(100, 100, 50);
        sun.castShadow = true;
        sun.shadow.camera.left = -200;
        sun.shadow.camera.right = 200;
        sun.shadow.camera.top = 200;
        sun.shadow.camera.bottom = -200;
        scene.add(sun);

// Ground & Track
        createEnvironment();

// Player Car
        player = createCar(0xff0000); // Red Ferrari style
        player.mesh.position.set(trackRadius, 0.5, 0);
        player.angle = 0;
        player.speed = 0;
        player.targetRotation = 0;
        scene.add(player.mesh);

// Bots
        const colors = [0x0000ff, 0x00ff00, 0xffff00, 0xff00ff];
        for(let i = 0; i < botCount; i++) {
            const bot = createCar(colors[i]);
            const offset = (i + 1) * 3;
            bot.angle = -0.1 * (i + 1);
            bot.speed = 0.5 + Math.random() * 0.2;
            bot.laneOffset = (Math.random() - 0.5) * 10;
            bot.mesh.position.set(trackRadius + bot.laneOffset, 0.5, 0);
            bots.push(bot);
            scene.add(bot.mesh);
        }

// Input Listeners
        window.addEventListener('keydown', (e) => handleKey(e.key, true));
        window.addEventListener('keyup', (e) => handleKey(e.key, false));
        window.addEventListener('resize', onWindowResize);
    }

function createCar(color) {
        const group = new THREE.Group();

// High-poly F1 Body Style
        const bodyMat = new THREE.MeshPhongMaterial({ color: color, shininess: 100 });
        const blackMat = new THREE.MeshPhongMaterial({ color: 0x111111 });

// Main Chassis
        const chassis = new THREE.Mesh(new THREE.BoxGeometry(1, 0.4, 3), bodyMat);
        chassis.castShadow = true;
        group.add(chassis);

// Nose
        const nose = new THREE.Mesh(new THREE.BoxGeometry(0.6, 0.2, 1.5), bodyMat);
        nose.position.set(0, -0.05, 1.8);
        group.add(nose);

// Front Wing
        const fWing = new THREE.Mesh(new THREE.BoxGeometry(2.2, 0.1, 0.5), bodyMat);
        fWing.position.set(0, -0.1, 2.4);
        group.add(fWing);

// Rear Wing
        const rWing = new THREE.Mesh(new THREE.BoxGeometry(1.8, 0.1, 0.6), bodyMat);
        rWing.position.set(0, 0.6, -1.4);
        group.add(rWing);
        
        const rWingPillarL = new THREE.Mesh(new THREE.BoxGeometry(0.1, 0.6, 0.1), bodyMat);
        rWingPillarL.position.set(0.5, 0.3, -1.4);
        group.add(rWingPillarL);
        
        const rWingPillarR = rWingPillarL.clone();
        rWingPillarR.position.x = -0.5;
        group.add(rWingPillarR);

// Wheels
        const wheelGeo = new THREE.CylinderGeometry(0.4, 0.4, 0.4, 16);
        wheelGeo.rotateZ(Math.PI / 2);
        
        const wheelPos = [
            [0.8, -0.1, 1.2], [-0.8, -0.1, 1.2],
            [0.9, -0.1, -1.1], [-0.9, -0.1, -1.1]
        ];

wheelPos.forEach(pos => {
            const wheel = new THREE.Mesh(wheelGeo, blackMat);
            wheel.position.set(...pos);
            wheel.castShadow = true;
            group.add(wheel);
        });

return { mesh: group, angle: 0, speed: 0, lap: 1 };
    }

function createEnvironment() {
        // Grass
        const grass = new THREE.Mesh(
            new THREE.PlaneGeometry(1000, 1000),
            new THREE.MeshPhongMaterial({ color: 0x2d5e1e })
        );
        grass.rotation.x = -Math.PI / 2;
        grass.receiveShadow = true;
        scene.add(grass);

// Asphalt Track
        const trackGeo = new THREE.TorusGeometry(trackRadius, trackWidth/2, 16, 100);
        const trackMat = new THREE.MeshPhongMaterial({ color: 0x333333 });
        const track = new THREE.Mesh(trackGeo, trackMat);
        track.rotation.x = Math.PI / 2;
        track.position.y = 0.01;
        track.receiveShadow = true;
        scene.add(track);

// White Lines
        const lineGeo = new THREE.TorusGeometry(trackRadius, 0.2, 16, 100);
        const lineMat = new THREE.MeshBasicMaterial({ color: 0xffffff });
        const lineInner = new THREE.Mesh(lineGeo, lineMat);
        lineInner.rotation.x = Math.PI / 2;
        lineInner.position.y = 0.02;
        lineInner.scale.set(0.9, 0.9, 1);
        scene.add(lineInner);
        
        const lineOuter = lineInner.clone();
        lineOuter.scale.set(1.1, 1.1, 1);
        scene.add(lineOuter);

// Finish Line
        const finishGeo = new THREE.PlaneGeometry(trackWidth, 2);
        const finishMat = new THREE.MeshBasicMaterial({ color: 0xffffff, side: THREE.DoubleSide });
        const finish = new THREE.Mesh(finishGeo, finishMat);
        finish.position.set(trackRadius, 0.03, 0);
        finish.rotation.x = Math.PI / 2;
        scene.add(finish);
    }

function handleKey(key, isDown) {
        if (key === 'ArrowUp' || key === 'w') keys.w = isDown;
        if (key === 'ArrowDown' || key === 's') keys.s = isDown;
        if (key === 'ArrowLeft' || key === 'a') keys.a = isDown;
        if (key === 'ArrowRight' || key === 'd') keys.d = isDown;
    }

function updatePlayer(delta) {
        // Physics
        if (keys.w) player.speed += 0.01;
        if (keys.s) player.speed -= 0.01;
        
        player.speed *= 0.98; // Friction
        
        if (keys.a) player.angle += player.speed * 0.5;
        if (keys.d) player.angle -= player.speed * 0.5;

// Position on circle track
        const x = Math.cos(player.angle) * trackRadius;
        const z = Math.sin(player.angle) * trackRadius;
        
        player.mesh.position.x = x;
        player.mesh.position.z = z;
        player.mesh.rotation.y = -player.angle + Math.PI/2;

// HUD
        document.getElementById('speed').innerText = Math.abs(Math.round(player.speed * 1000)) + " KM/H";
        
        // Camera Follow
        const camOffset = new THREE.Vector3(0, 3, -8);
        camOffset.applyQuaternion(player.mesh.quaternion);
        camera.position.lerp(player.mesh.position.clone().add(camOffset), 0.1);
        camera.lookAt(player.mesh.position);
    }

function updateBots(delta) {
        bots.forEach((bot, index) => {
            bot.angle += bot.speed * 0.02;
            
            const radius = trackRadius + bot.laneOffset;
            bot.mesh.position.x = Math.cos(bot.angle) * radius;
            bot.mesh.position.z = Math.sin(bot.angle) * radius;
            bot.mesh.rotation.y = -bot.angle + Math.PI/2;

// Simple AI logic to vary speed
            bot.speed += (Math.random() - 0.5) * 0.01;
            bot.speed = Math.max(0.4, Math.min(0.8, bot.speed));
        });

// Calculate Position (very basic)
        let rank = 1;
        bots.forEach(bot => {
            if (bot.angle % (Math.PI * 2) > player.angle % (Math.PI * 2)) rank++;
        });
        document.getElementById('pos').innerText = rank;
    }

function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
    }

function animate() {
        requestAnimationFrame(animate);
        const delta = clock.getDelta();

updatePlayer(delta);
        updateBots(delta);

renderer.render(scene, camera);
    }
</script>
</body>
</html>

Preview

Open Advanced Editor Full Screen