Jeu d'obstacles 3D pour navigateur avec Three.js

422 freemana

Ouvrir dans l'éditeur Publiez votre code

Jeu d'obstacles 3D pour navigateur avec Three.js

Recommandé

16 January 2026

Lecteur de jeux Flash avec émulateur Ruffle

12 December 2025

Jeu de ping-pong JavaScript avec manches spéciales

12 December 2025

Visualiseur de formes 3D : cube, sphère, triangle dans le navigateur

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