piloto de F1

75 plak

Abrir en el editor Publica tu código

Recomendado

15 October 2025

Barra lateral de Glassmorphism HTML CSS Estilo Apple

17 July 2025

Sinfonía del estado estacionario

24 December 2025

Cargando página HTML con barra de progreso

HTML

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

CSS