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

333 freemana

Ouvrir dans l'éditeur Publiez votre code

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

Recommandé

27 October 2024

Site de jeu cracké Public Tout le monde peut poster

20 March 2026

Exemple de formulaire de connexion HTML avec connexion via les réseaux sociaux

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