import React, { useState, useRef, useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; const GhostScene = ({ onCollectKey }) => { const mountRef = useRef(null); useEffect(() => { const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); const renderer = new THREE.WebGLRenderer({ alpha: true }); renderer.setSize(window.innerWidth, window.innerHeight); mountRef.current.appendChild(renderer.domElement); // Room walls const roomGeometry = new THREE.BoxGeometry(10, 6, 10); const roomMaterial = new THREE.MeshBasicMaterial({ color: 0x332211, side: THREE.BackSide, transparent: true, opacity: 0.8 }); const room = new THREE.Mesh(roomGeometry, roomMaterial); scene.add(room); // Create floating ghost const ghostGeometry = new THREE.SphereGeometry(0.3, 32, 32); const ghostMaterial = new THREE.MeshBasicMaterial({ color: 0xccccff, transparent: true, opacity: 0.6 }); const ghost = new THREE.Mesh(ghostGeometry, ghostMaterial); ghost.position.set(2, 0, -2); scene.add(ghost); // Create key const keyGeometry = new THREE.BoxGeometry(0.3, 0.3, 0.1); const keyMaterial = new THREE.MeshBasicMaterial({ color: 0xffcc00 }); const key = new THREE.Mesh(keyGeometry, keyMaterial); key.position.set(-2, 0, -2); scene.add(key); camera.position.z = 5; let mouseX = 0; let mouseY = 0; const onMouseMove = (event) => { mouseX = (event.clientX / window.innerWidth) * 2 - 1; mouseY = -(event.clientY / window.innerHeight) * 2 + 1; }; window.addEventListener('mousemove', onMouseMove); const onClick = (event) => { const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2( (event.clientX / window.innerWidth) * 2 - 1, -(event.clientY / window.innerHeight) * 2 + 1 ); raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObject(key); if (intersects.length > 0) { scene.remove(key); onCollectKey(); } }; window.addEventListener('click', onClick); const animate = () => { requestAnimationFrame(animate); // Ghost floating animation ghost.position.y = Math.sin(Date.now() * 0.001) * 0.5; ghost.rotation.y += 0.01; // Key floating animation key.position.y = Math.sin(Date.now() * 0.002) * 0.2; key.rotation.y += 0.02; // Camera follows mouse slightly camera.position.x += (mouseX * 2 - camera.position.x) * 0.05; camera.position.y += (mouseY * 2 - camera.position.y) * 0.05; camera.lookAt(scene.position); renderer.render(scene, camera); }; animate(); return () => { window.removeEventListener('mousemove', onMouseMove); window.removeEventListener('click', onClick); mountRef.current.removeChild(renderer.domElement); renderer.dispose(); }; }, [onCollectKey]); return

; }; const Game = () => { const [hasKey, setHasKey] = useState(false); const [escaped, setEscaped] = useState(false); const [hint, setHint] = useState(''); const handleDoorClick = () => { if (hasKey) { setEscaped(true); } else { setHint('Find the golden key first!'); setTimeout(() => setHint(''), 2000); } }; if (escaped) { return (

Congratulations!

You escaped the haunted mansion!

); } return (

setHasKey(true)} />

{hint &&

{hint}

}

Inventory: {hasKey ? '🗝️ Key' : 'Empty'}

); }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();