Juego de obstáculos 3D para navegador con Three.js

485 freemana

Abrir en el editor Publica tu código

Juego de obstáculos 3D para navegador con Three.js

Recomendado

19 January 2026

Henry Stickmin: Dirigible - Juega al juego flash con Ruffle

12 July 2025

Contador de clics de la barra espaciadora - JavaScript HTML

13 May 2025

Página de inicio de sesión de Roblox HTML CSS

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Browser Obby</title>
    <style>
        body { margin: 0; overflow: hidden; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #000; }
        #ui { position: absolute; top: 20px; left: 20px; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.5); pointer-events: none; }
        #timer { font-size: 24px; font-weight: bold; }
        #instructions { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: white; background: rgba(0,0,0,0.5); padding: 10px 20px; border-radius: 20px; }
        #win-screen { display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 40px; border-radius: 15px; text-align: center; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
        button { padding: 10px 20px; font-size: 18px; cursor: pointer; background: #2ecc71; border: none; color: white; border-radius: 5px; margin-top: 10px; }
    </style>
</head>
<body>

<div id="ui">
        <div id="timer">Time: 0.0s</div>
        <div>Level: The Neon Void</div>
    </div>

<div id="instructions">WASD to Move | SPACE to Jump | R to Reset</div>

<div id="win-screen">
        <h1>YOU MADE IT!</h1>
        <p id="final-time"></p>
        <button onclick="location.reload()">Play Again</button>
    </div>

init();
        animate();

function init() {
            // Scene & Camera
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x0a0a12);
            scene.fog = new THREE.FogExp2(0x0a0a12, 0.02);

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

// Lighting
            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
            scene.add(ambientLight);
            const sunLight = new THREE.DirectionalLight(0xffffff, 0.8);
            sunLight.position.set(10, 20, 10);
            scene.add(sunLight);

// Player (The "Character")
            const playerGeo = new THREE.BoxGeometry(1, 2, 1);
            const playerMat = new THREE.MeshPhongMaterial({ color: 0x3498db });
            player = new THREE.Mesh(playerGeo, playerMat);
            player.position.y = 5;
            scene.add(player);

// Level Design (The Obby)
            createPlatform(0, 0, 0, 10, 1, 10, 0x2c3e50); // Start
            createPlatform(0, 0, -15, 5, 1, 5, 0xe74c3c); 
            createPlatform(8, 2, -25, 5, 1, 5, 0xf1c40f);
            createPlatform(-8, 4, -35, 5, 1, 5, 0x9b59b6);
            createPlatform(0, 6, -50, 3, 1, 3, 0x1abc9c);
            createPlatform(10, 8, -60, 2, 1, 2, 0xe67e22);
            createPlatform(0, 10, -75, 15, 1, 15, 0x2ecc71, true); // End Goal

// Controls
            document.addEventListener('keydown', (e) => onKey(e.code, true));
            document.addEventListener('keyup', (e) => onKey(e.code, false));
            window.addEventListener('resize', onWindowResize);
        }

function createPlatform(x, y, z, w, h, d, color, isGoal = false) {
            const geo = new THREE.BoxGeometry(w, h, d);
            const mat = new THREE.MeshPhongMaterial({ color: color });
            const mesh = new THREE.Mesh(geo, mat);
            mesh.position.set(x, y, z);
            mesh.isGoal = isGoal;
            scene.add(mesh);
            platforms.push(mesh);
        }

function onKey(code, isPressed) {
            if (code === 'KeyW') moveForward = isPressed;
            if (code === 'KeyS') moveBackward = isPressed;
            if (code === 'KeyA') moveLeft = isPressed;
            if (code === 'KeyD') moveRight = isPressed;
            if (code === 'Space' && isPressed && canJump) {
                velocity.y += 0.25;
                canJump = false;
            }
            if (code === 'KeyR') resetPlayer();
        }

function resetPlayer() {
            player.position.set(0, 5, 0);
            velocity.set(0, 0, 0);
        }

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

function animate() {
            requestAnimationFrame(animate);
            if (!gameActive) return;

// Timer
            document.getElementById('timer').innerText = `Time: ${((Date.now() - startTime)/1000).toFixed(1)}s`;

// Movement Logic
            const delta = 0.1;
            velocity.x -= velocity.x * 10.0 * delta;
            velocity.z -= velocity.z * 10.0 * delta;
            velocity.y -= 0.01; // Gravity

direction.z = Number(moveForward) - Number(moveBackward);
            direction.x = Number(moveRight) - Number(moveLeft);
            direction.normalize();

if (moveForward || moveBackward) velocity.z -= direction.z * 0.12;
            if (moveLeft || moveRight) velocity.x -= direction.x * 0.12;

player.position.x += velocity.x;
            player.position.y += velocity.y;
            player.position.z += velocity.z;

// Collision Detection (Simple)
            canJump = false;
            platforms.forEach(p => {
                const pBox = new THREE.Box3().setFromObject(p);
                const playerBox = new THREE.Box3().setFromObject(player);

if (playerBox.intersectsBox(pBox)) {
                    if (player.position.y > p.position.y) {
                        player.position.y = p.position.y + 1.5;
                        velocity.y = 0;
                        canJump = true;
                        
                        if (p.isGoal) {
                            gameActive = false;
                            document.getElementById('win-screen').style.display = 'block';
                            document.getElementById('final-time').innerText = `Finished in ${((Date.now() - startTime)/1000).toFixed(2)} seconds!`;
                        }
                    }
                }
            });

// Fall off map
            if (player.position.y < -10) resetPlayer();

// Camera follow
            camera.position.set(player.position.x, player.position.y + 5, player.position.z + 12);
            camera.lookAt(player.position);

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

CSS