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

247 freemana

Abrir en el editor Publica tu código

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

Recomendado

11 March 2026

Código para insertar en el juego 10 Minutes Till Dawn

12 March 2026

Juegos desbloqueados: Cargador de zonas HTML5 y bloqueador de pestañas

23 August 2025

Página de inicio de sesión en turco HTML: Formulario de inicio de sesión

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