Roblox 3D - Jouable

/* Global layout */ body { margin: 0; height: 100vh; font-family: Roboto, Arial, sans-serif; background: linear-gradient(#e9f0fb, #f7fbff); } /* Canvas container */ #game-root { width: 100%; height: calc(100vh - 64px); /* leave space for appbar */ display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #cfe9ff, #dff4ff); overflow: hidden; } /* Overlay controls */ .overlay-controls { position: absolute; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 40; } /* Small help box */ .help-box { background: rgba(255,255,255,0.9); padding: 10px 14px; border-radius: 8px; box-shadow: 0 6px 18px rgba(5,20,40,0.12); font-size: 13px; color: #102030; } /* Ensure canvas is full area */ canvas { display: block; width: 100%; height: 100%; } /* Simple 3D runner game using Three.js. Exposes window.GameEngine with methods: - create(container): initialize engine in DOM element container - start(): start game - stop(): stop game - reset(): reset game - onScore(callback): register score callback */ class GameEngine { constructor() { this.scene = null; this.camera = null; this.renderer = null; this.player = null; this.obstacles = []; this.spawnTimer = 0; this.spawnInterval = 1.2; this.speed = 0.12; this.running = false; this.score = 0; this.scoreCallback = null; this.container = null; this._lastTime = 0; this._boundAnimate = this.animate.bind(this); this._move = { left: false, right: false, up: false, down: false }; } create(container) { this.container = container; const width = container.clientWidth; const height = container.clientHeight; // Scene this.scene = new THREE.Scene(); this.scene.fog = new THREE.Fog(0xdff4ff, 10, 60); // Camera this.camera = new THREE.PerspectiveCamera(60, width / height, 0.1, 200); this.camera.position.set(0, 6, 10); // Renderer this.renderer = new THREE.WebGLRenderer({ antialias: true }); this.renderer.setSize(width, height); this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); container.innerHTML = ''; container.appendChild(this.renderer.domElement); // Lights const hemi = new THREE.HemisphereLight(0xffffff, 0xeeeeff, 0.9); this.scene.add(hemi); const dir = new THREE.DirectionalLight(0xffffff, 0.6); dir.position.set(5, 10, 7); this.scene.add(dir); // Ground const groundMat = new THREE.MeshStandardMaterial({ color: 0x9fdfff }); const groundGeo = new THREE.PlaneGeometry(200, 200); const ground = new THREE.Mesh(groundGeo, groundMat); ground.rotateX(-Math.PI / 2); ground.position.y = 0; this.scene.add(ground); // Player (cube) const playerGeo = new THREE.BoxGeometry(1.2, 1.6, 1.2); const playerMat = new THREE.MeshStandardMaterial({ color: 0x0055ff, metalness: 0.2, roughness: 0.4 }); this.player = new THREE.Mesh(playerGeo, playerMat); this.player.position.set(0, 0.8, 0); this.scene.add(this.player); // Lane markers for (let i = 0; i < 6; i++) { const lineGeo = new THREE.BoxGeometry(0.1, 0.05, 6); const lineMat = new THREE.MeshStandardMaterial({ color: 0xffffff, opacity: 0.6, transparent: true }); const line = new THREE.Mesh(lineGeo, lineMat); line.position.set(-2 + (i % 3) * 2, 0.02, -i * 10 - 6); this.scene.add(line); } // Resize window.addEventListener('resize', () => { const w = container.clientWidth; const h = container.clientHeight; this.camera.aspect = w / h; this.camera.updateProjectionMatrix(); this.renderer.setSize(w, h); }); // Input window.addEventListener('keydown', (e) => this.onKey(e, true)); window.addEventListener('keyup', (e) => this.onKey(e, false)); // initial camera follow offset this.cameraOffset = new THREE.Vector3(0, 6, 10); // reset variables this.reset(true); } onKey(e, down) { const k = e.key.toLowerCase(); if (k === 'arrowleft' || k === 'a') this._move.left = down; if (k === 'arrowright' || k === 'd') this._move.right = down; if (k === 'arrowup' || k === 'w') this._move.up = down; if (k === 'arrowdown' || k === 's') this._move.down = down; } start() { if (!this.renderer) return; this.running = true; this._lastTime = performance.now() / 1000; this.spawnTimer = 0; requestAnimationFrame(this._boundAnimate); } stop() { this.running = false; } reset(noStart=false) { // remove obstacles for (const o of this.obstacles) { this.scene.remove(o.mesh); } this.obstacles = []; this.score = 0; this.spawnTimer = 0; this.player.position.set(0, 0.8, 0); this.player.material.color.set(0x0055ff); if (!noStart) this.start(); this._triggerScore(); } onScore(cb) { this.scoreCallback = cb; } _triggerScore() { if (this.scoreCallback) this.scoreCallback(Math.floor(this.score)); } spawnObstacle() { const size = 1 + Math.random() * 2; const geo = new THREE.BoxGeometry(size, size, size); const mat = new THREE.MeshStandardMaterial({ color: 0xff5555 }); const mesh = new THREE.Mesh(geo, mat); // random lane -1,0,1 mapped to x positions -2,0,2 const lane = Math.floor(Math.random() * 3) - 1; mesh.position.set(lane * 2, size / 2, -60); this.scene.add(mesh); this.obstacles.push({ mesh, size }); } animate() { if (!this.running) return; const t = performance.now() / 1000; const dt = Math.min(0.033, t - this._lastTime); this._lastTime = t; // Move obstacles toward player for (let i = this.obstacles.length - 1; i >= 0; i--) { const obj = this.obstacles[i]; obj.mesh.position.z += this.speed * 60 * dt; // move forward // if passed player, remove and increment score if (obj.mesh.position.z > 20) { this.scene.remove(obj.mesh); this.obstacles.splice(i, 1); this.score += 10; this._triggerScore(); } } // spawn this.spawnTimer += dt; if (this.spawnTimer >= this.spawnInterval) { this.spawnTimer = 0; this.spawnObstacle(); // gradually increase difficulty this.spawnInterval = Math.max(0.5, this.spawnInterval - 0.01); this.speed = Math.min(0.8, this.speed + 0.002); } // player movement smoothing const moveSpeed = 6 * dt; if (this._move.left) this.player.position.x = Math.max(-2, this.player.position.x - moveSpeed); if (this._move.right) this.player.position.x = Math.min(2, this.player.position.x + moveSpeed); if (this._move.up) this.player.position.z -= moveSpeed * 0.6; if (this._move.down) this.player.position.z += moveSpeed * 0.6; // camera follow const desiredCam = new THREE.Vector3(this.player.position.x, this.player.position.y, this.player.position.z + this.cameraOffset.z); this.camera.position.lerp(desiredCam, 0.06); const lookAt = new THREE.Vector3(this.player.position.x, this.player.position.y, this.player.position.z - 6); this.camera.lookAt(lookAt); // collision detection (AABB) const playerBox = new THREE.Box3().setFromObject(this.player); for (const obj of this.obstacles) { const box = new THREE.Box3().setFromObject(obj.mesh); if (playerBox.intersectsBox(box)) { this.running = false; // flash player this.player.material.color.set(0xff0000); if (this.onGameOver) this.onGameOver(Math.floor(this.score)); return; } } this.renderer.render(this.scene, this.camera); requestAnimationFrame(this._boundAnimate); } } // expose window.GameEngine = GameEngine; /* Main React + MUI app. Uses window.GameEngine and window['MaterialUI'] (UMD) */ const MUI = window['MaterialUI'] || window.MaterialUI; if (!MUI || !window.GameEngine) { const missing = !MUI ? 'Material UI' : ''; const missing2 = !window.GameEngine ? (missing ? ' and GameEngine' : 'GameEngine') : ''; function ErrorApp() { return (

Erreur : Ressource manquante

Vérifiez la console. Manque: {missing}{missing && missing2 ? ' et ' : ''}{missing2}

Assurez-vous d'être connecté à Internet.

); } ReactDOM.render(, document.getElementById('root')); } else { const { AppBar, Toolbar, Typography, Button, Container, Box, Paper, IconButton, Snackbar, Alert } = MUI; function TopBar({ score, onStart, onReset, running }) { return ( ROBLOX 3D - Mini Jeu Score: {score} ); } function ControlsHelp() { return (

Contrôles

Déplacer: ← → ou A D

Avancer / Reculer: ↑ ↓ ou W S

But: éviter les obstacles. Score augmente en passant les obstacles.

); } function App() { const containerRef = React.useRef(null); const engineRef = React.useRef(null); const [score, setScore] = React.useState(0); const [running, setRunning] = React.useState(false); const [gameOver, setGameOver] = React.useState(false); const [snackOpen, setSnackOpen] = React.useState(false); React.useEffect(() => { // create engine once const engine = new window.GameEngine(); engine.create(containerRef.current); engine.onGameOver = (finalScore) => { setRunning(false); setGameOver(true); setSnackOpen(true); }; engine.onScore((s) => setScore(s)); engineRef.current = engine; // auto start paused (user clicks start) return () => { engine.stop(); }; }, []); const handleStart = () => { const eng = engineRef.current; if (!eng) return; if (running) { eng.stop(); setRunning(false); } else { eng.start(); setRunning(true); setGameOver(false); } }; const handleReset = () => { const eng = engineRef.current; if (!eng) return; eng.reset(true); setScore(0); setGameOver(false); setRunning(false); }; return (

setSnackOpen(false)}> setSnackOpen(false)} sx={{ width: '100%' }}> Game Over — Score final : {score} ); } ReactDOM.render(, document.getElementById('root')); }