import React, { useRef, useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import * as THREE from 'three'; import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass.js'; const FPSGame = () => { const mountRef = useRef(null); const gameOverRef = useRef(false); // Game state const [gameOver, setGameOver] = React.useState(false); // Keep gameOverRef in sync with gameOver state useEffect(() => { gameOverRef.current = gameOver; }, [gameOver]); const [health, setHealth] = React.useState(5); const [indicatorVisible, setIndicatorVisible] = React.useState({ visible: false, points: 0 }); // Three.js refs const sceneRef = useRef(null); const cameraRef = useRef(null); const rendererRef = useRef(null); const composerRef = useRef(null); const pretzelManagerRef = useRef(null); const controlsRef = useRef({ moveState: { forward: false, backward: false, left: false, right: false, speed: 0.15, flippingLeft: false, flippingRight: false, shooting: false }, pitch: 0, yaw: 0, isLocked: false }); class PretzelManager { constructor(scene) { this.scene = scene; this.pretzels = []; this.positions = [ { x: 6, z: 3, collected: false }, { x: 0, z: 6, collected: false }, { x: -4, z: 2, collected: false } ]; this.collectedCount = 0; this.initialize(); } reset() { // Clean up existing pretzels this.pretzels.forEach(pretzel => { if (pretzel && this.scene) { this.scene.remove(pretzel); if (pretzel.children) { pretzel.children.forEach(child => { if (child.geometry) child.geometry.dispose(); if (child.material) child.material.dispose(); }); } } }); // Reset arrays and counters this.pretzels = []; this.positions = [ { x: 6, z: 3, collected: false }, { x: 0, z: 6, collected: false }, { x: -4, z: 2, collected: false } ]; this.collectedCount = 0; // Reinitialize pretzels this.initialize(); } initialize() { // Clear existing pretzels first this.pretzels.forEach(pretzel => { if (pretzel && this.scene) { this.scene.remove(pretzel); if (pretzel.children) { pretzel.children.forEach(child => { if (child.geometry) child.geometry.dispose(); if (child.material) child.material.dispose(); }); } } }); // Reset pretzels array this.pretzels = []; // Create new pretzels for each position this.positions.forEach(pos => { const pretzel = this.createPretzel(pos); this.pretzels.push(pretzel); }); } createPretzel(position) { const pretzelGroup = new THREE.Group(); const mainTorus = new THREE.Mesh( new THREE.TorusGeometry(0.3, 0.1, 16, 32), new THREE.MeshStandardMaterial({ color: 0xc4a484, roughness: 0.3, metalness: 0.8, envMapIntensity: 1.0 }) ); const detail1 = new THREE.Mesh( new THREE.TorusGeometry(0.15, 0.05, 16, 32), mainTorus.material ); detail1.position.set(0.2, 0, 0); const detail2 = new THREE.Mesh( new THREE.TorusGeometry(0.15, 0.05, 16, 32), mainTorus.material ); detail2.position.set(-0.2, 0, 0); pretzelGroup.add(mainTorus); pretzelGroup.add(detail1); pretzelGroup.add(detail2); pretzelGroup.position.set(position.x, 1.5, position.z); pretzelGroup.userData.initialY = pretzelGroup.position.y; pretzelGroup.userData.hoverOffset = Math.random() * Math.PI * 2; this.scene.add(pretzelGroup); return pretzelGroup; } collectPretzel(pretzelIndex) { if (!this.positions || !this.positions[pretzelIndex]) { console.error('Invalid pretzel position'); return; } if (this.positions[pretzelIndex].collected) return; this.positions[pretzelIndex].collected = true; this.collectedCount++; console.log('PretzelManager - collectedCount:', this.collectedCount); const pretzel = this.pretzels[pretzelIndex]; this.scene.remove(pretzel); pretzel.children.forEach(child => { child.geometry.dispose(); child.material.dispose(); }); } update(time) { if (!this.pretzels || !this.positions) return; this.pretzels.forEach((pretzel, index) => { if (this.positions[index] && !this.positions[index].collected && pretzel) { pretzel.position.y = pretzel.userData.initialY + Math.sin(time + pretzel.userData.hoverOffset) * 0.2; pretzel.rotation.y += 0.02; } }); } } const [damageFlash, setDamageFlash] = React.useState(false); const [isInvincible, setIsInvincible] = React.useState(false); const [score, setScore] = React.useState(0); const [hitMarkers, setHitMarkers] = React.useState([]); const [distanceToChef, setDistanceToChef] = React.useState(0); const [highScore, setHighScore] = React.useState(() => { const saved = localStorage.getItem('highScore'); return saved ? parseInt(saved) : 0; }); // Scene initialization effect - runs only once useEffect(() => { // Constants const PLAYER_RADIUS = 0.5; // Scene setup const scene = new THREE.Scene(); scene.fog = new THREE.Fog(0x87ceeb, 1, 50); // Create rain system const rainCount = 15000; const rainGeometry = new THREE.BufferGeometry(); const rainPositions = new Float32Array(rainCount * 3); const rainVelocities = new Float32Array(rainCount); for (let i = 0; i < rainCount * 3; i += 3) { rainPositions[i] = Math.random() * 200 - 100; // x (doubled range) rainPositions[i + 1] = Math.random() * 50; // y rainPositions[i + 2] = Math.random() * 200 - 100; // z (doubled range) rainVelocities[i / 3] = 0.15 + Math.random() * 0.25; // Slightly adjusted speed range } rainGeometry.setAttribute('position', new THREE.BufferAttribute(rainPositions, 3)); const rainMaterial = new THREE.PointsMaterial({ color: 0xaaaaaa, size: 0.1, transparent: true, opacity: 0.6, fog: true }); const rain = new THREE.Points(rainGeometry, rainMaterial); scene.add(rain); // Initialize PretzelManager with scene and store in ref pretzelManagerRef.current = new PretzelManager(scene); // Ensure pretzelManager is properly initialized if (!pretzelManagerRef.current || !pretzelManagerRef.current.positions) { console.error('PretzelManager not properly initialized'); pretzelManagerRef.current = new PretzelManager(scene); } // Create gradient background const vertexShader = ` varying vec3 vWorldPosition; void main() { vec4 worldPosition = modelMatrix * vec4(position, 1.0); vWorldPosition = worldPosition.xyz; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `; const fragmentShader = ` uniform vec3 topColor; uniform vec3 bottomColor; uniform float offset; uniform float exponent; varying vec3 vWorldPosition; void main() { float h = normalize(vWorldPosition + offset).y; gl_FragColor = vec4(mix(bottomColor, topColor, max(pow(max(h, 0.0), exponent), 0.0)), 1.0); } `; const uniforms = { topColor: { value: new THREE.Color(0x0077ff) }, bottomColor: { value: new THREE.Color(0x89cff0) }, offset: { value: 33 }, exponent: { value: 0.6 } }; const skyGeo = new THREE.SphereGeometry(1000, 32, 15); const skyMat = new THREE.ShaderMaterial({ uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, side: THREE.BackSide }); const sky = new THREE.Mesh(skyGeo, skyMat); scene.add(sky); // Cloud system const createCloud = (x, y, z) => { const cloudGroup = new THREE.Group(); // Create multiple planes with different sizes and rotations for a fuller cloud const cloudMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, transparent: true, opacity: 0.6, side: THREE.DoubleSide, roughness: 1, metalness: 0, depthWrite: false }); // Create multiple overlapping segments for each cloud const segments = [ // Core cloud segments { scale: 3.0, y: 0, x: 0, z: 0 }, { scale: 2.8, y: 0.3, x: 0.2, z: 0.1 }, { scale: 2.6, y: -0.2, x: -0.1, z: 0.2 }, // Upper layer { scale: 2.4, y: 0.5, x: 0.8, z: 0.3 }, { scale: 2.2, y: 0.6, x: -0.7, z: -0.2 }, { scale: 2.0, y: 0.4, x: 0.3, z: -0.8 }, // Lower layer { scale: 2.5, y: -0.3, x: -0.5, z: 0.5 }, { scale: 2.3, y: -0.4, x: 0.6, z: -0.4 }, { scale: 2.1, y: -0.5, x: -0.3, z: -0.6 }, // Edges for fluffiness { scale: 1.8, y: 0.2, x: 1.2, z: 0.7 }, { scale: 1.7, y: -0.1, x: -1.1, z: 0.8 }, { scale: 1.6, y: 0.3, x: 0.9, z: -0.9 }, { scale: 1.5, y: -0.2, x: -0.8, z: -1.0 } ]; segments.forEach(segment => { const cloudPlane = new THREE.Mesh( new THREE.PlaneGeometry(segment.scale, segment.scale), cloudMaterial.clone() ); cloudPlane.position.set(segment.x, segment.y, segment.z); cloudPlane.rotation.x = Math.PI / 2; cloudPlane.rotation.z = Math.random() * Math.PI; cloudGroup.add(cloudPlane); }); cloudGroup.position.set(x, y, z); cloudGroup.userData = { originalY: y, speed: Math.random() * 0.02 + 0.01, amplitude: Math.random() * 0.5 + 0.5, phase: Math.random() * Math.PI * 2 }; scene.add(cloudGroup); return cloudGroup; }; // Create multiple clouds at different positions const clouds = []; for (let i = 0; i < 20; i++) { const radius = Math.random() * 40 + 20; const angle = (i / 20) * Math.PI * 2; const x = Math.cos(angle) * radius; const z = Math.sin(angle) * radius; const y = Math.random() * 5 + 25; clouds.push(createCloud(x, y, z)); } const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 10000); // Safe spawn position near flag but not inside objects const spawnOffset = new THREE.Vector2(3, 3); // Offset from flag for safer spawn camera.position.set(37 + spawnOffset.x, 2, 37 + spawnOffset.y); camera.rotation.y = Math.PI / 4; // Create spawn flag const createSpawnFlag = (x, y, z) => { const flagGroup = new THREE.Group(); // Flag pole const poleGeometry = new THREE.CylinderGeometry(0.1, 0.1, 4, 8); const poleMaterial = new THREE.MeshPhongMaterial({ color: 0x808080, shininess: 30 }); const pole = new THREE.Mesh(poleGeometry, poleMaterial); pole.position.set(1.5, 2, 1.5); // Offset pole by 1.5 on X-axis // Flag with waving segments const flagGeometry = new THREE.PlaneGeometry(2.5, 1.5, 8, 1); const flagMaterial = new THREE.MeshPhongMaterial({ color: 0xff00ff, shininess: 30, side: THREE.DoubleSide, emissive: 0xff00ff, emissiveIntensity: 1.0, transparent: true, opacity: 0.9 }); const flag = new THREE.Mesh(flagGeometry, flagMaterial); flag.position.set(0.2, 3.5, 1.5); flag.rotation.y = 0; flag.rotation.z = -Math.PI / 16; // Slight upward tilt // Add bright purple spot lights at spawn const spawnLight = new THREE.SpotLight(0xff00ff, 50, 20); // Brighter intensity spawnLight.position.set(0.2, 5, 1.5); // Position above flag spawnLight.target.position.set(0.2, 0, 1.5); // Point straight down at ground below flag spawnLight.angle = Math.PI / 4; // Narrower angle for more focused light spawnLight.penumbra = 0.2; // Sharper edges // Add point light for additional glow const spawnAmbientLight = new THREE.PointLight(0xff00ff, 15, 8); spawnAmbientLight.position.set(0.2, 3.5, 1.5); // Position at flag height // Add flag highlight const flagLight = new THREE.SpotLight(0xff00ff, 5, 12); flagLight.position.set(x + 1.2, y + 5, z); flagLight.target.position.set(x + 1.2, y, z); flagLight.angle = Math.PI / 6; flagLight.penumbra = 0.3; flagGroup.add(pole); flagGroup.add(flag); flagGroup.add(spawnLight); flagGroup.add(spawnLight.target); flagGroup.add(spawnAmbientLight); flagGroup.add(flagLight); flagGroup.add(flagLight.target); // Add animation properties flagGroup.userData.waveOffset = Math.random() * Math.PI * 2; flagGroup.position.set(x, y, z); scene.add(flagGroup); return flagGroup; }; // Create spawn flag and detection zone at spawn position const spawnFlag = createSpawnFlag(37, 0, 37); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); renderer.physicallyCorrectLights = true; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.0; renderer.outputEncoding = THREE.sRGBEncoding; mountRef.current.appendChild(renderer.domElement); // Post-processing setup const composer = new EffectComposer(renderer); const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.5, // strength 0.4, // radius 0.85 // threshold ); composer.addPass(bloomPass); // Controls state const moveState = { forward: false, backward: false, left: false, right: false, speed: 0.15, flippingLeft: false, flippingRight: false, shooting: false }; // Mouse look variables let pitch = 0; let yaw = 0; let isLocked = false; let gunGroup = new THREE.Group(); let rollAngle = 0; // Create detailed gun model const gunMaterial = new THREE.MeshPhongMaterial({ color: 0x222222, shininess: 100 }); // Main body const gunBody = new THREE.Mesh( new THREE.BoxGeometry(0.1, 0.15, 0.4), gunMaterial ); // Barrel const gunBarrel = new THREE.Mesh( new THREE.CylinderGeometry(0.02, 0.02, 0.4, 8), gunMaterial ); // Grip const gunGrip = new THREE.Mesh( new THREE.BoxGeometry(0.08, 0.2, 0.1), gunMaterial ); gunGrip.position.y = -0.15; gunGrip.position.z = 0.1; gunGrip.rotation.x = 0.3; gunBarrel.rotation.x = Math.PI / 2; gunBarrel.position.z = -0.3; gunGroup.add(gunBody); gunGroup.add(gunBarrel); gunBarrel.position.z = -0.3; gunGroup.position.set(0.3, -0.2, -0.5); camera.add(gunGroup); scene.add(camera); // Floor const floorGeometry = new THREE.PlaneGeometry(100, 100, 100, 100); const floorMaterial = new THREE.MeshPhongMaterial({ color: 0x444444, shininess: 0, wireframe: false }); const floor = new THREE.Mesh(floorGeometry, floorMaterial); floor.rotation.x = -Math.PI / 2; floor.receiveShadow = true; // Add grid pattern to floor const gridHelper = new THREE.GridHelper(100, 100, 0x000000, 0x333333); gridHelper.position.y = 0.01; scene.add(gridHelper); scene.add(floor); // Add ambient and directional light const ambientLight = new THREE.AmbientLight(0x404040); scene.add(ambientLight); const directionalLight = new THREE.DirectionalLight(0xffffff, 1); directionalLight.position.set(1, 1, 1); scene.add(directionalLight); // Add disco spotlights const createSpotlight = (color, position, target) => { const spotlight = new THREE.SpotLight(color, 15); spotlight.position.copy(position); spotlight.target.position.copy(target); spotlight.angle = Math.PI / 4; spotlight.penumbra = 0.1; spotlight.distance = 50; spotlight.decay = 1; spotlight.castShadow = true; scene.add(spotlight); scene.add(spotlight.target); return spotlight; }; // Create multiple spotlights with different colors const spotlights = [ createSpotlight(0xff0000, new THREE.Vector3(15, 10, 0), new THREE.Vector3(0, 0, 0)), createSpotlight(0x00ff00, new THREE.Vector3(-15, 10, 0), new THREE.Vector3(0, 0, 0)), createSpotlight(0x0000ff, new THREE.Vector3(0, 10, 15), new THREE.Vector3(0, 0, 0)), createSpotlight(0xff00ff, new THREE.Vector3(0, 10, -15), new THREE.Vector3(0, 0, 0)) ]; // Create environmental objects const createTree = (x, z) => { const treeGroup = new THREE.Group(); // Tree trunk const trunkGeometry = new THREE.CylinderGeometry(0.2, 0.3, 2, 8); const trunkMaterial = new THREE.MeshPhongMaterial({ color: 0x4a2805, shininess: 5 }); const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial); // Tree foliage (3 layers for fuller look) const leafMaterial = new THREE.MeshPhongMaterial({ color: 0x0f5522, shininess: 10 }); const foliage1 = new THREE.Mesh( new THREE.ConeGeometry(1.5, 2, 8), leafMaterial ); foliage1.position.y = 1.5; const foliage2 = new THREE.Mesh( new THREE.ConeGeometry(1.2, 1.8, 8), leafMaterial ); foliage2.position.y = 2.2; const foliage3 = new THREE.Mesh( new THREE.ConeGeometry(0.8, 1.5, 8), leafMaterial ); foliage3.position.y = 2.8; treeGroup.add(trunk); treeGroup.add(foliage1); treeGroup.add(foliage2); treeGroup.add(foliage3); treeGroup.position.set(x, 1, z); // Add some random rotation for variety treeGroup.rotation.y = Math.random() * Math.PI * 2; scene.add(treeGroup); }; const createRock = (x, z) => { const rockGeometry = new THREE.DodecahedronGeometry(Math.random() * 0.5 + 0.5); const rockMaterial = new THREE.MeshPhongMaterial({ color: 0x666666, shininess: 2, flatShading: true }); const rock = new THREE.Mesh(rockGeometry, rockMaterial); rock.position.set(x, 0.5, z); rock.rotation.set( Math.random() * Math.PI, Math.random() * Math.PI, Math.random() * Math.PI ); scene.add(rock); }; // Add environmental objects in a circular pattern const radius = 30; const numTrees = 20; for (let i = 0; i < numTrees; i++) { const angle = (i / numTrees) * Math.PI * 2; const x = Math.cos(angle) * radius + (Math.random() - 0.5) * 10; const z = Math.sin(angle) * radius + (Math.random() - 0.5) * 10; createTree(x, z); // Add some rocks near trees if (Math.random() > 0.5) { createRock( x + (Math.random() - 0.5) * 3, z + (Math.random() - 0.5) * 3 ); } } // Add some random rocks in the middle area for (let i = 0; i < 15; i++) { createRock( (Math.random() - 0.5) * 30, (Math.random() - 0.5) * 30 ); } // Create interesting structures const createArch = (x, z, rotation = 0) => { const archGroup = new THREE.Group(); // Pillars const pillarGeometry = new THREE.CylinderGeometry(0.3, 0.3, 6, 8); const pillarMaterial = new THREE.MeshPhongMaterial({ color: 0x808080, shininess: 30 }); const pillar1 = new THREE.Mesh(pillarGeometry, pillarMaterial); const pillar2 = new THREE.Mesh(pillarGeometry, pillarMaterial); pillar1.position.set(-2, 3, 0); pillar2.position.set(2, 3, 0); // Top arch const archTop = new THREE.Mesh( new THREE.TorusGeometry(2, 0.3, 8, 16, Math.PI), pillarMaterial ); archTop.position.set(0, 6, 0); archTop.rotation.z = 0; archGroup.add(pillar1); archGroup.add(pillar2); archGroup.add(archTop); archGroup.position.set(x, 0, z); archGroup.rotation.y = rotation; scene.add(archGroup); }; const createPlatform = (x, z, height = 2) => { const platformGroup = new THREE.Group(); // Main platform const platform = new THREE.Mesh( new THREE.BoxGeometry(4, 0.3, 4), new THREE.MeshPhongMaterial({ color: 0x505050, shininess: 20 }) ); // Support pillars const pillarGeometry = new THREE.CylinderGeometry(0.3, 0.3, height, 8); const pillarMaterial = new THREE.MeshPhongMaterial({ color: 0x404040, shininess: 30 }); const positions = [ [-1.7, -1.7], [1.7, -1.7], [-1.7, 1.7], [1.7, 1.7] ]; positions.forEach(([px, pz]) => { const pillar = new THREE.Mesh(pillarGeometry, pillarMaterial); pillar.position.set(px, -height/2, pz); platformGroup.add(pillar); }); platformGroup.add(platform); platformGroup.position.set(x, height, z); scene.add(platformGroup); }; const createSculpture = (x, z) => { const sculptureGroup = new THREE.Group(); // Base const base = new THREE.Mesh( new THREE.CylinderGeometry(1, 1.2, 0.5, 8), new THREE.MeshPhongMaterial({ color: 0x505050, shininess: 50 }) ); // Abstract shape - interweaving rings const ringMaterial = new THREE.MeshPhongMaterial({ color: 0x909090, shininess: 100 }); const ring1 = new THREE.Mesh( new THREE.TorusGeometry(1, 0.1, 8, 24), ringMaterial ); const ring2 = new THREE.Mesh( new THREE.TorusGeometry(1, 0.1, 8, 24), ringMaterial ); const ring3 = new THREE.Mesh( new THREE.TorusGeometry(1, 0.1, 8, 24), ringMaterial ); ring1.rotation.x = Math.PI / 2; ring2.rotation.y = Math.PI / 2; ring3.rotation.z = Math.PI / 2; sculptureGroup.add(base); sculptureGroup.add(ring1); sculptureGroup.add(ring2); sculptureGroup.add(ring3); sculptureGroup.position.set(x, 0.25, z); scene.add(sculptureGroup); }; // Track active lasers const activeLasers = []; // Create laser beam const createLaser = (startPos, targetPos) => { const laserGroup = new THREE.Group(); // Calculate initial direction and distance const direction = new THREE.Vector3().subVectors(targetPos, startPos).normalize(); const distance = startPos.distanceTo(targetPos); // Core beam const laserGeometry = new THREE.CylinderGeometry(0.1, 0.1, distance, 8); const laserMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, emissive: 0xff0000, emissiveIntensity: 8.0, transparent: true, opacity: 0.9, roughness: 0.0, metalness: 1.0, envMapIntensity: 2.0 }); const laser = new THREE.Mesh(laserGeometry, laserMaterial); // Glow effect const glowGeometry = new THREE.CylinderGeometry(0.2, 0.2, distance, 8); const glowMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, emissive: 0xff0000, emissiveIntensity: 4.0, transparent: true, opacity: 0.4, roughness: 0.0, metalness: 1.0, envMapIntensity: 2.0, side: THREE.BackSide }); const glow = new THREE.Mesh(glowGeometry, glowMaterial); laserGroup.add(laser); laserGroup.add(glow); // Position at start point and store targeting information laserGroup.position.copy(startPos); laserGroup.targetPos = targetPos.clone(); laserGroup.startPos = startPos.clone(); laserGroup.moveSpeed = 0.008; // Much slower for better dodging laserGroup.progress = 0; // Track movement progress laserGroup.canDamage = true; // Add damage capability flag // Orient laser towards target laserGroup.lookAt(targetPos); laserGroup.rotateX(Math.PI / 2); scene.add(laserGroup); activeLasers.push(laserGroup); }; const createRoboticSculpture = (x, z) => { const robotGroup = new THREE.Group(); // Base platform const baseGeometry = new THREE.CylinderGeometry(2, 2.5, 0.5, 8); const baseMaterial = new THREE.MeshStandardMaterial({ color: 0x303030, roughness: 0.1, metalness: 0.9, envMapIntensity: 1.0 }); const base = new THREE.Mesh(baseGeometry, baseMaterial); // Robot body const bodyMaterial = new THREE.MeshStandardMaterial({ color: 0x707070, roughness: 0.05, metalness: 0.95, envMapIntensity: 1.2 }); // Torso const torsoGeometry = new THREE.BoxGeometry(2, 3, 1.5); const torso = new THREE.Mesh(torsoGeometry, bodyMaterial); torso.position.y = 2; // Head Group with complex structure const headGroup = new THREE.Group(); // Main head cube const headGeometry = new THREE.BoxGeometry(1.2, 1.2, 1.2); const head = new THREE.Mesh(headGeometry, bodyMaterial); headGroup.add(head); headGroup.position.y = 4; // Additional geometric details on head const detailMaterial = new THREE.MeshStandardMaterial({ color: 0x505050, roughness: 0.07, metalness: 0.93, envMapIntensity: 1.1 }); // Top head plate const topPlate = new THREE.Mesh( new THREE.BoxGeometry(1.3, 0.1, 1.3), detailMaterial ); topPlate.position.y = 0.65; headGroup.add(topPlate); // Bottom head plate const bottomPlate = new THREE.Mesh( new THREE.BoxGeometry(1.3, 0.1, 1.3), detailMaterial ); bottomPlate.position.y = -0.65; headGroup.add(bottomPlate); // Cybernetic details (tubes and connectors) const tubeGeometry = new THREE.CylinderGeometry(0.03, 0.03, 1.2, 8); const positions = [ [-0.5, 0, -0.5], [0.5, 0, -0.5], [-0.5, 0, 0.5], [0.5, 0, 0.5] ]; positions.forEach(([x, y, z]) => { const tube = new THREE.Mesh(tubeGeometry, detailMaterial); tube.position.set(x, y, z); headGroup.add(tube); }); // Advanced eye system const eyeGroup = new THREE.Group(); // Main eyes with glowing effect that can change color const eyeMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00, emissive: 0x00ff00, emissiveIntensity: 5.0, roughness: 0.0, metalness: 1.0, envMapIntensity: 2.0 }); eyeMaterial.targetMode = false; // Add tracking property // Large main eyes const mainEyeGeometry = new THREE.SphereGeometry(0.2, 16, 16); const leftEye = new THREE.Mesh(mainEyeGeometry, eyeMaterial); const rightEye = new THREE.Mesh(mainEyeGeometry, eyeMaterial); leftEye.position.set(-0.3, 0, 0.6); rightEye.position.set(0.3, 0, 0.6); // Eye sockets const socketGeometry = new THREE.RingGeometry(0.22, 0.25, 16); const socketMaterial = new THREE.MeshStandardMaterial({ color: 0x303030, side: THREE.DoubleSide, roughness: 0.2, metalness: 0.8, envMapIntensity: 1.0 }); const leftSocket = new THREE.Mesh(socketGeometry, socketMaterial); const rightSocket = new THREE.Mesh(socketGeometry, socketMaterial); leftSocket.position.set(-0.3, 0, 0.61); rightSocket.position.set(0.3, 0, 0.61); leftSocket.rotation.y = Math.PI; rightSocket.rotation.y = Math.PI; // Small scanning eyes const scanEyeGeometry = new THREE.SphereGeometry(0.05, 8, 8); const scanEyeMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, emissive: 0xff0000, emissiveIntensity: 7.0, roughness: 0.0, metalness: 1.0, envMapIntensity: 2.0 }); const scanEyes = []; for (let i = 0; i < 3; i++) { const eye = new THREE.Mesh(scanEyeGeometry, scanEyeMaterial); eye.position.set(-0.4 + i * 0.4, -0.3, 0.6); scanEyes.push(eye); eyeGroup.add(eye); } eyeGroup.add(leftEye); eyeGroup.add(rightEye); eyeGroup.add(leftSocket); eyeGroup.add(rightSocket); headGroup.add(eyeGroup); // Side Antennas const antennaGeometry = new THREE.CylinderGeometry(0.05, 0.02, 0.8, 8); const leftAntenna = new THREE.Mesh(antennaGeometry, bodyMaterial); const rightAntenna = new THREE.Mesh(antennaGeometry, bodyMaterial); leftAntenna.position.set(-0.7, 0.4, 0); rightAntenna.position.set(0.7, 0.4, 0); leftAntenna.rotation.z = Math.PI / 6; rightAntenna.rotation.z = -Math.PI / 6; headGroup.add(leftAntenna); headGroup.add(rightAntenna); // Top Radar Dish const radarGroup = new THREE.Group(); const radarBase = new THREE.Mesh( new THREE.CylinderGeometry(0.1, 0.15, 0.2, 8), bodyMaterial ); const radarDish = new THREE.Mesh( new THREE.SphereGeometry(0.3, 16, 16, 0, Math.PI), new THREE.MeshPhongMaterial({ color: 0x505050, shininess: 100, metalness: 0.8 }) ); radarDish.rotation.x = Math.PI / 2; radarDish.position.y = 0.2; radarGroup.add(radarBase); radarGroup.add(radarDish); radarGroup.position.y = 0.8; headGroup.add(radarGroup); // Arms const armGeometry = new THREE.BoxGeometry(0.4, 2, 0.4); const leftArm = new THREE.Mesh(armGeometry, bodyMaterial); const rightArm = new THREE.Mesh(armGeometry, bodyMaterial); leftArm.position.set(-1.2, 2.5, 0); rightArm.position.set(1.2, 2.5, 0); // Add all parts to the group robotGroup.add(base); robotGroup.add(torso); robotGroup.add(headGroup); robotGroup.add(leftArm); robotGroup.add(rightArm); robotGroup.position.set(x, 0, z); scene.add(robotGroup); // Add animation properties robotGroup.rotation.y = Math.random() * Math.PI * 2; robotGroup.animationPhase = Math.random() * Math.PI * 2; return robotGroup; }; // Add structures to the scene createArch(-15, 0, Math.PI / 4); createArch(15, 0, -Math.PI / 4); createArch(0, -15, 0); createArch(0, 15, Math.PI / 2); createPlatform(-10, -10, 3); createPlatform(10, 10, 2); createPlatform(-10, 10, 4); createPlatform(10, -10, 2.5); createSculpture(5, 0); createSculpture(-5, 0); createSculpture(0, 5); createSculpture(0, -5); // Create robot chef at spawn point const createRobotChef = (x, z) => { const chefGroup = new THREE.Group(); // Body const bodyGeometry = new THREE.CylinderGeometry(0.5, 0.5, 1.5, 8); const bodyMaterial = new THREE.MeshStandardMaterial({ color: 0x707070, roughness: 0.2, metalness: 0.9, envMapIntensity: 1.0 }); const body = new THREE.Mesh(bodyGeometry, bodyMaterial); // Apron const apronGeometry = new THREE.BoxGeometry(1.1, 1.2, 0.1); const apronMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff }); const apron = new THREE.Mesh(apronGeometry, apronMaterial); apron.position.set(0, 0, 0.45); // Head const headGeometry = new THREE.SphereGeometry(0.4, 12, 12); const headMaterial = new THREE.MeshPhongMaterial({ color: 0xffd700, shininess: 100 }); const head = new THREE.Mesh(headGeometry, headMaterial); head.position.y = 1.2; // Chef's Hat const hatBaseGeometry = new THREE.CylinderGeometry(0.45, 0.45, 0.1, 16); const hatTopGeometry = new THREE.CylinderGeometry(0.4, 0.4, 0.4, 16); const hatMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, shininess: 30 }); const hatBase = new THREE.Mesh(hatBaseGeometry, hatMaterial); const hatTop = new THREE.Mesh(hatTopGeometry, hatMaterial); hatBase.position.y = 1.7; hatTop.position.y = 1.95; // Eyes with emissive glow const eyeGeometry = new THREE.SphereGeometry(0.06, 8, 8); const eyeMaterial = new THREE.MeshStandardMaterial({ color: 0x00ff00, emissive: 0x00ff00, emissiveIntensity: 8.0, roughness: 0.0, metalness: 1.0, envMapIntensity: 2.0 }); const leftEye = new THREE.Mesh(eyeGeometry, eyeMaterial); const rightEye = new THREE.Mesh(eyeGeometry, eyeMaterial); leftEye.position.set(-0.15, 1.3, 0.35); rightEye.position.set(0.15, 1.3, 0.35); // Eyebrows + moustache const eyebrowGroup = new THREE.Group(); const leftEyebrow = new THREE.Mesh( new THREE.TorusGeometry(0.15, 0.03, 8, 12, Math.PI), new THREE.MeshPhongMaterial({ color: 0x222222, shininess: 30 }) ); leftEyebrow.position.set(-0.15, 0.1, 0.35); leftEyebrow.rotation.set(0, 0, Math.PI / 6); const rightEyebrow = new THREE.Mesh( new THREE.TorusGeometry(0.15, 0.03, 8, 12, Math.PI), new THREE.MeshPhongMaterial({ color: 0x222222, shininess: 30 }) ); rightEyebrow.position.set(0.15, 0.1, 0.35); rightEyebrow.rotation.set(0, 0, -Math.PI / 6); eyebrowGroup.add(leftEyebrow); eyebrowGroup.add(rightEyebrow); const moustacheGroup = new THREE.Group(); const moustacheMaterial = new THREE.MeshPhongMaterial({ color: 0x222222, shininess: 30 }); const centerPiece = new THREE.Mesh( new THREE.BoxGeometry(0.3, 0.02, 0.05), moustacheMaterial ); centerPiece.position.set(0, -0.15, 0.4); const leftEnd = new THREE.Mesh( new THREE.TorusGeometry(0.1, 0.02, 8, 12, Math.PI), moustacheMaterial ); leftEnd.position.set(-0.15, -0.15, 0.4); leftEnd.rotation.set(0, 0, Math.PI / 6); const rightEnd = new THREE.Mesh( new THREE.TorusGeometry(0.1, 0.02, 8, 12, Math.PI), moustacheMaterial ); rightEnd.position.set(0.15, -0.15, 0.4); rightEnd.rotation.set(0, 0, -Math.PI / 6); moustacheGroup.add(centerPiece); moustacheGroup.add(leftEnd); moustacheGroup.add(rightEnd); // Mechanical arms const createArm = (isLeft) => { const armGroup = new THREE.Group(); const upperArmGeometry = new THREE.CylinderGeometry(0.08, 0.08, 0.6, 8); const forearmGeometry = new THREE.CylinderGeometry(0.06, 0.06, 0.5, 8); const jointGeometry = new THREE.SphereGeometry(0.1, 8, 8); const upperArm = new THREE.Mesh(upperArmGeometry, bodyMaterial); const forearm = new THREE.Mesh(forearmGeometry, bodyMaterial); const joint = new THREE.Mesh(jointGeometry, bodyMaterial); upperArm.position.y = -0.3; joint.position.y = -0.6; forearm.position.y = -0.9; armGroup.add(upperArm); armGroup.add(joint); armGroup.add(forearm); armGroup.position.set(isLeft ? -0.5 : 0.5, 0.8, 0); armGroup.rotation.z = isLeft ? -Math.PI / 6 : Math.PI / 6; return armGroup; }; const leftArm = createArm(true); const rightArm = createArm(false); chefGroup.add(body); chefGroup.add(apron); chefGroup.add(head); head.add(eyebrowGroup); head.add(moustacheGroup); chefGroup.add(hatBase); chefGroup.add(hatTop); chefGroup.add(leftEye); chefGroup.add(rightEye); chefGroup.add(leftArm); chefGroup.add(rightArm); chefGroup.userData.bobOffset = Math.random() * Math.PI * 2; chefGroup.userData.armPhase = Math.random() * Math.PI * 2; chefGroup.position.set(x, 1, z); scene.add(chefGroup); return chefGroup; }; const createTable = (x, z) => { const tableGroup = new THREE.Group(); // Table top const tableTopGeometry = new THREE.BoxGeometry(2, 0.1, 1); const tableTopMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); // Brown color for wood const tableTop = new THREE.Mesh(tableTopGeometry, tableTopMaterial); tableTop.position.set(0, 1, 0); // Table legs const legGeometry = new THREE.BoxGeometry(0.1, 1, 0.1); const legMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 }); const leg1 = new THREE.Mesh(legGeometry, legMaterial); const leg2 = new THREE.Mesh(legGeometry, legMaterial); const leg3 = new THREE.Mesh(legGeometry, legMaterial); const leg4 = new THREE.Mesh(legGeometry, legMaterial); leg1.position.set(-0.85, 0.5, -0.45); leg2.position.set(0.85, 0.5, -0.45); leg3.position.set(-0.85, 0.5, 0.45); leg4.position.set(0.85, 0.5, 0.45); // Tray const trayGeometry = new THREE.BoxGeometry(1.5, 0.1, 0.5); const trayMaterial = new THREE.MeshPhongMaterial({ color: 0xFFD700 }); // Gold color const tray = new THREE.Mesh(trayGeometry, trayMaterial); tray.position.set(0, 1.1, 0); tableGroup.add(tableTop); tableGroup.add(leg1); tableGroup.add(leg2); tableGroup.add(leg3); tableGroup.add(leg4); tableGroup.add(tray); tableGroup.position.set(x, 0, z); scene.add(tableGroup); return tableGroup; }; // Create robot chef near spawn point const robotChef = createRobotChef(35, 35); // Create table in front of the chef const chefTable = createTable(35, 34); // Add robotic sculpture to the right const roboticSculpture = createRoboticSculpture(3, 0); // Add some obstacle boxes (example usage commented out) // const createBox = (x, z, color) => { ... }; // Create moving enemies const enemies = []; const createEnemy = (x, z, color) => { const enemyGroup = new THREE.Group(); // Body - cylinder const bodyGeometry = new THREE.CylinderGeometry(0.7, 0.5, 2, 16); const bodyMaterial = new THREE.MeshStandardMaterial({ color, roughness: 0.1, metalness: 0.9, envMapIntensity: 1.2 }); const body = new THREE.Mesh(bodyGeometry, bodyMaterial); // Head const headGeometry = new THREE.SphereGeometry(0.4, 8, 8); const headMaterial = new THREE.MeshStandardMaterial({ color: 0x000000, roughness: 0.1, metalness: 0.9, envMapIntensity: 1.2 }); const head = new THREE.Mesh(headGeometry, headMaterial); head.position.y = 1.2; // Arms const armGeometry = new THREE.CapsuleGeometry(0.15, 0.8, 4, 8); const armMaterial = new THREE.MeshStandardMaterial({ color, roughness: 0.15, metalness: 0.85, envMapIntensity: 1.0 }); const leftArm = new THREE.Mesh(armGeometry, armMaterial); leftArm.position.set(-0.8, 0.3, 0); leftArm.rotation.z = Math.PI / 3; const rightArm = new THREE.Mesh(armGeometry, armMaterial); rightArm.position.set(0.8, 0.3, 0); rightArm.rotation.z = -Math.PI / 3; // Eye glow const eyeGeometry = new THREE.SphereGeometry(0.1, 16, 16); const eyeMat = new THREE.MeshStandardMaterial({ color: 0xff0000, emissive: 0xff0000, emissiveIntensity: 8.0, roughness: 0.0, metalness: 1.0, envMapIntensity: 2.0 }); const leftEye = new THREE.Mesh(eyeGeometry, eyeMat); const rightEye = new THREE.Mesh(eyeGeometry, eyeMat); leftEye.position.set(-0.2, 1.3, 0.3); rightEye.position.set(0.2, 1.3, 0.3); enemyGroup.add(body); enemyGroup.add(head); enemyGroup.add(leftArm); enemyGroup.add(rightArm); enemyGroup.add(leftEye); enemyGroup.add(rightEye); enemyGroup.position.set(x, 2, z); enemyGroup.velocity = new THREE.Vector3( (Math.random() - 0.5) * 0.1, 0, (Math.random() - 0.5) * 0.1 ); enemyGroup.armAngle = 0; enemyGroup.bobHeight = 0; enemyGroup.canDamage = true; enemyGroup.health = 3; scene.add(enemyGroup); enemies.push(enemyGroup); return enemyGroup; }; createEnemy(-5, -5, 0xff0000); createEnemy(5, -5, 0x0000ff); createEnemy(0, 5, 0xffff00); createEnemy(-8, 3, 0xff00ff); createEnemy(8, 3, 0x00ffff); // Only check spawn position on initial spawn and explicit restart const checkSpawnPosition = (force = false) => { const spawnRadius = 5; // Area to check for safe spawn let isSafe = false; let attempts = 0; const maxAttempts = 8; while (!isSafe && attempts < maxAttempts) { const angle = (attempts / maxAttempts) * Math.PI * 2; const x = 37 + Math.cos(angle) * spawnRadius; const z = 37 + Math.sin(angle) * spawnRadius; const testPosition = new THREE.Vector3(x, 2, z); let collision = false; scene.children.forEach(object => { if (collision) return; if (object.type === 'Group') { // Check trees if (object.children.some(child => child.geometry instanceof THREE.CylinderGeometry)) { const dx = testPosition.x - object.position.x; const dz = testPosition.z - object.position.z; const distance = Math.sqrt(dx * dx + dz * dz); if (distance < (PLAYER_RADIUS + 1.5)) { collision = true; } } // Check other structures object.children.forEach(child => { if (child.geometry instanceof THREE.BoxGeometry || child.geometry instanceof THREE.CylinderGeometry) { const dx = testPosition.x - child.getWorldPosition(new THREE.Vector3()).x; const dz = testPosition.z - child.getWorldPosition(new THREE.Vector3()).z; const distance = Math.sqrt(dx * dx + dz * dz); if (distance < (PLAYER_RADIUS + 1)) { collision = true; } } }); } // Check rocks if (object.geometry instanceof THREE.DodecahedronGeometry) { const dx = testPosition.x - object.position.x; const dz = testPosition.z - object.position.z; const distance = Math.sqrt(dx * dx + dz * dz); if (distance < (PLAYER_RADIUS + 1)) { collision = true; } } }); if (!collision) { camera.position.copy(testPosition); isSafe = true; } attempts++; } if (!isSafe) { camera.position.set(37 + spawnRadius, 2, 37 + spawnRadius); } }; checkSpawnPosition(); // ====================== KEYBOARD AND MOUSE HANDLERS ====================== /** * We updated these handlers so that: * 1) If gameOver is true, only 'R' works (restarts the game), * and no other keys move the player. * 2) When the game ends, we exit pointer lock so you can press R. */ const handleKeyDown = (e) => { // If game is over, only 'R' to restart should work if (gameOverRef.current) { if (e.code === 'KeyR') { e.preventDefault(); // Reset game state setGameOver(false); setHealth(5); setScore(0); setDamageFlash(false); setIsInvincible(false); // Request pointer lock after a short delay to ensure state is updated setTimeout(() => { renderer.domElement.requestPointerLock(); }, 100); // Reset camera position and rotation camera.position.set(37, 2, 37); camera.rotation.set(0, Math.PI / 4, 0); checkSpawnPosition(true); // Reset movement state moveState.forward = false; moveState.backward = false; moveState.left = false; moveState.right = false; moveState.speed = 0.15; moveState.flippingLeft = false; moveState.flippingRight = false; moveState.shooting = false; // Reset enemies enemies.forEach(enemy => { enemy.position.set( (Math.random() - 0.5) * 40, 2, (Math.random() - 0.5) * 40 ); enemy.health = 3; enemy.canDamage = true; }); // Reset pretzels if (pretzelManagerRef.current) { pretzelManagerRef.current.reset(); } else { pretzelManagerRef.current = new PretzelManager(scene); } // Clear active projectiles activeBullets.forEach(bullet => { scene.remove(bullet); }); activeBullets.length = 0; activeLasers.forEach(laser => { scene.remove(laser); }); activeLasers.length = 0; } // Ignore everything else return; } // Otherwise, normal handling switch(e.code) { case 'KeyW': moveState.forward = true; break; case 'KeyS': moveState.backward = true; break; case 'KeyA': moveState.right = true; break; case 'KeyD': moveState.left = true; break; case 'KeyQ': moveState.flippingLeft = true; break; case 'KeyE': moveState.flippingRight = true; break; case 'Space': console.log(`Spacebar pressed! Collected Pretzels: ${pretzelManagerRef.current.collectedCount}, Near Chef: ${isNearChef()}`); if (pretzelManagerRef.current.collectedCount > 0 && isNearChef()) { const collectedCount = pretzelManagerRef.current.collectedCount; const pointsForPretzels = collectedCount * 1000; setScore(prevScore => prevScore + pointsForPretzels); console.log(`Successfully handed in ${collectedCount} pretzels for ${pointsForPretzels} points!`); // Store which positions were collected const collectedIndices = pretzelManagerRef.current.positions .map((pos, index) => ({ pos, index })) .filter(item => item.pos.collected) .map(item => item.index); // Reset collected count pretzelManagerRef.current.collectedCount = 0; // Reset collected status for collected positions collectedIndices.forEach(index => { if (pretzelManagerRef.current.positions[index]) { pretzelManagerRef.current.positions[index].collected = false; // Remove old pretzel const oldPretzel = pretzelManagerRef.current.pretzels[index]; if (oldPretzel) { pretzelManagerRef.current.scene.remove(oldPretzel); if (oldPretzel.children) { oldPretzel.children.forEach(child => { if (child.geometry) child.geometry.dispose(); if (child.material) child.material.dispose(); }); } } // Create new pretzel const newPretzel = pretzelManagerRef.current.createPretzel( pretzelManagerRef.current.positions[index] ); pretzelManagerRef.current.pretzels[index] = newPretzel; } }); setIndicatorVisible({ visible: true, points: pointsForPretzels }); setTimeout(() => setIndicatorVisible({ visible: false, points: 0 }), 1500); } else if (!isNearChef()) { console.log("Too far from Chef! Get closer to hand in pretzels."); } else if ((pretzelManagerRef.current?.collectedCount || 0) === 0) { console.log("No pretzels collected yet! Find some pretzels first."); } break; } }; const handleKeyUp = (e) => { // If game is over, ignore everything if (gameOverRef.current) { // Ensure all movement states are reset moveState.forward = false; moveState.backward = false; moveState.left = false; moveState.right = false; moveState.flippingLeft = false; moveState.flippingRight = false; moveState.shooting = false; return; } switch(e.code) { case 'KeyW': moveState.forward = false; break; case 'KeyS': moveState.backward = false; break; case 'KeyA': moveState.right = false; break; case 'KeyD': moveState.left = false; break; case 'KeyQ': moveState.flippingLeft = false; break; case 'KeyE': moveState.flippingRight = false; break; } }; // Helper to check if near Chef const isNearChef = () => { const maxDistance = 5; const playerPosition = new THREE.Vector2(camera.position.x, camera.position.z); const chefPosition = new THREE.Vector2(robotChef.position.x, robotChef.position.z); return playerPosition.distanceTo(chefPosition) <= maxDistance; }; const handleMouseMove = (e) => { // If game is over or not locked, do nothing if (gameOverRef.current) return; if (!isLocked) return; const movementX = e.movementX || 0; const movementY = e.movementY || 0; yaw -= movementX * 0.002; pitch -= movementY * 0.002; pitch = Math.max(-Math.PI/2, Math.min(Math.PI/2, pitch)); camera.rotation.order = 'YXZ'; camera.rotation.x = pitch; camera.rotation.y = yaw; }; const handlePointerLockChange = () => { isLocked = document.pointerLockElement === renderer.domElement; }; const requestPointerLock = () => { if (!gameOverRef.current && !document.pointerLockElement) { renderer.domElement.requestPointerLock(); } }; const handleMouseDown = (e) => { // If game is over or not locked, ignore all mouse input if (gameOverRef.current || !isLocked) { moveState.shooting = false; return; } if (e.button === 0) { // Left click (shooting) moveState.shooting = true; } // Raycast to see if we clicked a pretzel const raycaster = new THREE.Raycaster(); const center = new THREE.Vector2(0, 0); raycaster.setFromCamera(center, camera); const intersects = raycaster.intersectObjects(scene.children, true); for (let i = 0; i < intersects.length; i++) { const object = intersects[i].object.parent; if (object && object.userData && object.userData.hasOwnProperty('initialY')) { const distance = camera.position.distanceTo(object.position); if (distance < 3 && pretzelManagerRef.current) { const pretzelArray = pretzelManagerRef.current.pretzels; const positionsArray = pretzelManagerRef.current.positions; if (!pretzelArray || !positionsArray) { console.error('Pretzel arrays not properly initialized'); return; } const pretzelIndex = pretzelArray.indexOf(object); if (pretzelIndex !== -1 && positionsArray[pretzelIndex] && !positionsArray[pretzelIndex].collected) { console.log('Before collection - current pretzels:', pretzelManagerRef.current.collectedCount); pretzelManagerRef.current.collectPretzel(pretzelIndex); console.log('After collection - updated pretzels:', pretzelManagerRef.current.collectedCount); return; } } } } // Create bullet const bulletGeometry = new THREE.SphereGeometry(0.08, 12, 12); const bulletMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00, emissive: 0xffff00, emissiveIntensity: 3.0, transparent: true, opacity: 0.9, roughness: 0.0, metalness: 0.0 }); // Create glow effect sphere const glowGeometry = new THREE.SphereGeometry(0.12, 12, 12); const glowMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00, emissive: 0xffff00, emissiveIntensity: 2.0, transparent: true, opacity: 0.4, roughness: 1.0, metalness: 0.0, side: THREE.BackSide }); const bullet = new THREE.Group(); const bulletCore = new THREE.Mesh(bulletGeometry, bulletMaterial); const bulletGlow = new THREE.Mesh(glowGeometry, glowMaterial); bullet.add(bulletCore); bullet.add(bulletGlow); // Position bullet at gun tip const bulletStartPos = new THREE.Vector3(); // Position bullet at gun tip gunBarrel.getWorldPosition(bulletStartPos); bullet.position.copy(bulletStartPos); const direction = new THREE.Vector3(); camera.getWorldDirection(direction); bullet.velocity = direction.multiplyScalar(0.7); scene.add(bullet); activeBullets.push(bullet); // Gun recoil gunGroup.position.z += 0.1; setTimeout(() => { gunGroup.position.z -= 0.1; }, 50); setTimeout(() => { if (bullet && scene.children.includes(bullet)) { scene.remove(bullet); if (bullet.children && bullet.children.length > 0) { bullet.children.forEach(child => { if (child && child.geometry) { child.geometry.dispose(); } if (child && child.material) { if (Array.isArray(child.material)) { child.material.forEach(material => material && material.dispose()); } else { child.material.dispose(); } } }); } const index = activeBullets.indexOf(bullet); if (index > -1) { activeBullets.splice(index, 1); } } }, 2000); }; const handleMouseUp = () => { moveState.shooting = false; }; document.addEventListener('keydown', handleKeyDown); document.addEventListener('keyup', handleKeyUp); document.addEventListener('mousemove', handleMouseMove); document.addEventListener('pointerlockchange', handlePointerLockChange); renderer.domElement.addEventListener('click', requestPointerLock); renderer.domElement.addEventListener('contextmenu', (e) => e.preventDefault()); renderer.domElement.addEventListener('mousedown', handleMouseDown); renderer.domElement.addEventListener('mouseup', handleMouseUp); // ====================== ANIMATION LOOP ====================== const activeBullets = []; function animate() { requestAnimationFrame(animate); if (spawnFlag) { const flagMesh = spawnFlag.children[1]; const time = Date.now() * 0.001; const vertices = flagMesh.geometry.attributes.position.array; for (let i = 0; i < vertices.length; i += 3) { const x = vertices[i]; const xOffset = (x + 1.25) * 2; vertices[i + 2] = Math.sin(time * 2 + xOffset) * 0.2; } flagMesh.geometry.attributes.position.needsUpdate = true; flagMesh.material.emissiveIntensity = 1.0 + Math.sin(time * 2) * 0.2; } const time = Date.now() * 0.001; // Animate rain if (rain) { const positions = rain.geometry.attributes.position.array; for (let i = 0; i < positions.length; i += 3) { positions[i + 1] -= rainVelocities[i / 3]; // Move raindrop down // Reset raindrop to top when it goes below ground if (positions[i + 1] < 0) { positions[i] = Math.random() * 200 - 100; // Random x (doubled range) positions[i + 1] = 50; // Reset to top positions[i + 2] = Math.random() * 200 - 100; // Random z (doubled range) } } rain.geometry.attributes.position.needsUpdate = true; } // Animate clouds clouds.forEach(cloud => { // Gentle floating motion cloud.position.y = cloud.userData.originalY + Math.sin(time * 0.5 + cloud.userData.phase) * cloud.userData.amplitude; // Slow rotation cloud.rotation.y += 0.001; // Drift motion cloud.position.x += Math.sin(time * 0.2 + cloud.userData.phase) * 0.01; cloud.position.z += Math.cos(time * 0.2 + cloud.userData.phase) * 0.01; // Update cloud planes opacity for subtle pulsing cloud.children.forEach((plane, index) => { // More varied opacity animation for each plane const baseOpacity = 0.4 + (index % 3) * 0.1; plane.material.opacity = baseOpacity + Math.sin(time * 0.7 + cloud.userData.phase + index * 0.2) * 0.15; }); }); const playerPosition = new THREE.Vector3(camera.position.x, camera.position.y, camera.position.z); const chefPosition = new THREE.Vector3(robotChef.position.x, robotChef.position.y, robotChef.position.z); const distanceToChef = playerPosition.distanceTo(chefPosition); setDistanceToChef(distanceToChef); if (robotChef) { robotChef.position.y = 1 + Math.sin(time + robotChef.userData.bobOffset) * 0.1; const leftArm = robotChef.children[7]; const rightArm = robotChef.children[8]; if (distanceToChef < 5) { leftArm.rotation.z = -Math.PI / 6 + Math.sin(time * 2) * 0.3; rightArm.rotation.z = Math.PI / 6 + Math.sin(time * 2) * 0.3; } else { leftArm.rotation.z = -Math.PI / 6 + Math.sin(time * 0.5) * 0.1; rightArm.rotation.z = Math.PI / 6 + Math.sin(time * 0.5) * 0.1; } const angle = Math.atan2( playerPosition.x - robotChef.position.x, playerPosition.z - robotChef.position.z ); robotChef.rotation.y = angle; } if (pretzelManagerRef.current) { pretzelManagerRef.current.update(time); } spotlights.forEach((spotlight, index) => { const offsetX = Math.sin(time + index * Math.PI/2) * 10; const offsetZ = Math.cos(time + index * Math.PI/2) * 10; spotlight.target.position.set(offsetX, -5, offsetZ); spotlight.target.updateMatrixWorld(); }); // Update bullets for (let i = activeBullets.length - 1; i >= 0; i--) { const bullet = activeBullets[i]; bullet.position.add(bullet.velocity); // Rotate the bullet for a cool effect bullet.rotation.x += 0.1; bullet.rotation.y += 0.1; // Pulse the glow const glowPulse = Math.sin(Date.now() * 0.01) * 0.5 + 1.5; bullet.children[1].material.opacity = 0.4 * glowPulse; bullet.children[0].material.emissiveIntensity = 3.0 * glowPulse; } // Update enemies enemies.forEach(enemy => { enemy.position.add(enemy.velocity); if (Math.abs(enemy.position.x) > 20) { enemy.velocity.x *= -1; enemy.rotation.y = Math.atan2(enemy.velocity.x, enemy.velocity.z); } if (Math.abs(enemy.position.z) > 20) { enemy.velocity.z *= -1; enemy.rotation.y = Math.atan2(enemy.velocity.x, enemy.velocity.z); } enemy.armAngle += 0.1; enemy.bobHeight += 0.1; const leftArm = enemy.children[2]; const rightArm = enemy.children[3]; leftArm.rotation.x = Math.sin(enemy.armAngle) * 0.2; rightArm.rotation.x = -Math.sin(enemy.armAngle) * 0.2; enemy.position.y = 2 + Math.sin(enemy.bobHeight) * 0.2; // Check bullet collisions for (let i = activeBullets.length - 1; i >= 0; i--) { const bullet = activeBullets[i]; const distance = bullet.position.distanceTo(enemy.position); if (distance < 2) { enemy.health--; const vector = enemy.position.clone(); vector.project(camera); const x = (vector.x + 1) * window.innerWidth / 2; const y = (-vector.y + 1) * window.innerHeight / 2; const markerId = Date.now(); setHitMarkers(prev => [...prev, { id: markerId, x, y }]); setTimeout(() => { setHitMarkers(prev => prev.filter(marker => marker.id !== markerId)); }, 200); if (enemy.health <= 0) { setScore(prevScore => { const newScore = prevScore + 100; if (newScore > highScore) { setHighScore(newScore); localStorage.setItem('highScore', newScore.toString()); } return newScore; }); // Respawn enemy.position.set( (Math.random() - 0.5) * 40, 2, (Math.random() - 0.5) * 40 ); enemy.velocity.set( (Math.random() - 0.5) * 0.1, 0, (Math.random() - 0.5) * 0.1 ); enemy.armAngle = 0; enemy.bobHeight = 0; enemy.health = 3; enemy.rotation.y = Math.atan2(enemy.velocity.x, enemy.velocity.z); } if (bullet && scene.children.includes(bullet)) { scene.remove(bullet); if (bullet.children && bullet.children.length > 0) { bullet.children.forEach(child => { if (child && child.geometry) { child.geometry.dispose(); } if (child && child.material) { if (Array.isArray(child.material)) { child.material.forEach(material => material && material.dispose()); } else { child.material.dispose(); } } }); } const index = activeBullets.indexOf(bullet); if (index > -1) { activeBullets.splice(index, 1); } } break; } } }); // Check enemy collision with player enemies.forEach(enemy => { const distanceToEnemy = camera.position.distanceTo(enemy.position); if (distanceToEnemy < 2 && enemy.canDamage) { if (!isInvincible) { enemy.canDamage = false; setTimeout(() => { enemy.canDamage = true; }, 1000); setHealth(prev => { const newHealth = Math.max(0, prev - 1); if (newHealth === 0) { document.exitPointerLock(); setGameOver(true); // Reset all movement states moveState.forward = false; moveState.backward = false; moveState.left = false; moveState.right = false; moveState.flippingLeft = false; moveState.flippingRight = false; moveState.shooting = false; } return newHealth; }); setDamageFlash(true); setTimeout(() => setDamageFlash(false), 150); setIsInvincible(true); setTimeout(() => setIsInvincible(false), 1000); } const pushDirection = new THREE.Vector3() .subVectors(camera.position, enemy.position) .normalize() .multiplyScalar(1); camera.position.add(pushDirection); } }); // Movement & collision, only if not gameOver // Only process movement if the game is not over if (!gameOverRef.current) { const direction = new THREE.Vector3(); const rotation = camera.rotation.clone(); const newPosition = camera.position.clone(); if (moveState.forward) { direction.z -= Math.cos(rotation.y); direction.x -= Math.sin(rotation.y); } if (moveState.backward) { direction.z += Math.cos(rotation.y); direction.x += Math.sin(rotation.y); } if (moveState.left) { direction.z += Math.cos(rotation.y + Math.PI/2); direction.x += Math.sin(rotation.y + Math.PI/2); } if (moveState.right) { direction.z -= Math.cos(rotation.y + Math.PI/2); direction.x -= Math.sin(rotation.y + Math.PI/2); } direction.normalize(); const potentialX = newPosition.x + direction.x * moveState.speed; const potentialZ = newPosition.z + direction.z * moveState.speed; const newPositionX = camera.position.clone(); const newPositionZ = camera.position.clone(); newPositionX.x = potentialX; newPositionZ.z = potentialZ; let canMoveX = true; let canMoveZ = true; const checkCollision = (pos) => { let collision = false; scene.children.forEach(object => { if (collision) return; if (object.type === 'Group') { // Check trees if (object.children.some(child => child.geometry instanceof THREE.CylinderGeometry)) { const dx = pos.x - object.position.x; const dz = pos.z - object.position.z; const distance = Math.sqrt(dx * dx + dz * dz); if (distance < (PLAYER_RADIUS + 1)) { collision = true; } } // Check sculptures if (object.children.some(child => child.geometry instanceof THREE.TorusGeometry)) { const dx = pos.x - object.position.x; const dz = pos.z - object.position.z; const distance = Math.sqrt(dx * dx + dz * dz); if (distance < (PLAYER_RADIUS + 1.2)) { collision = true; } } // Check arch pillars object.children.forEach(child => { if (child.geometry instanceof THREE.CylinderGeometry) { const dx = pos.x - child.getWorldPosition(new THREE.Vector3()).x; const dz = pos.z - child.getWorldPosition(new THREE.Vector3()).z; const distance = Math.sqrt(dx * dx + dz * dz); if (distance < (PLAYER_RADIUS + 0.3)) { collision = true; } } }); } // Check rocks if (object.geometry instanceof THREE.DodecahedronGeometry) { const dx = pos.x - object.position.x; const dz = pos.z - object.position.z; const distance = Math.sqrt(dx * dx + dz * dz); if (distance < (PLAYER_RADIUS + 0.7)) { collision = true; } } }); return collision; }; if (checkCollision(newPositionX)) { canMoveX = false; } if (checkCollision(newPositionZ)) { canMoveZ = false; } if (canMoveX) { newPosition.x = potentialX; } if (canMoveZ) { newPosition.z = potentialZ; } camera.position.copy(newPosition); // Lean/roll const MAX_LEAN = 0.5; if (moveState.flippingLeft) { camera.rotation.z = Math.min(camera.rotation.z + 0.05, MAX_LEAN); } else if (moveState.flippingRight) { camera.rotation.z = Math.max(camera.rotation.z - 0.05, -MAX_LEAN); } else { if (Math.abs(camera.rotation.z) < 0.05) { camera.rotation.z = 0; } else { camera.rotation.z *= 0.95; } } } // Animate robotic sculpture if (roboticSculpture) { const distanceToPlayer = roboticSculpture.position.distanceTo(camera.position); const targetRange = 15; if (distanceToPlayer < targetRange) { const directionToPlayer = new THREE.Vector3() .subVectors(camera.position, roboticSculpture.position) .normalize(); const robotForward = new THREE.Vector3(0, 0, 1); robotForward.applyAxisAngle(new THREE.Vector3(0, 1, 0), roboticSculpture.rotation.y); const angleToPlayer = robotForward.angleTo(directionToPlayer); const fieldOfView = Math.PI / 2; const targetRotation = Math.atan2(directionToPlayer.x, directionToPlayer.z); const currentRotation = roboticSculpture.rotation.y; const rotationDiff = targetRotation - currentRotation; roboticSculpture.rotation.y += rotationDiff * 0.005; const headGroup = roboticSculpture.children[2]; const eyeGroup = headGroup.children.find(child => child instanceof THREE.Group); if (eyeGroup) { const leftEye = eyeGroup.children[3]; const rightEye = eyeGroup.children[4]; if (!leftEye.material.targetMode) { leftEye.material.color.setHex(0xff0000); leftEye.material.emissive.setHex(0xff0000); rightEye.material.color.setHex(0xff0000); rightEye.material.emissive.setHex(0xff0000); leftEye.material.targetMode = true; rightEye.material.targetMode = true; } const maxFireRate = 2.0; const minFireRate = 0.5; const fireRateRange = maxFireRate - minFireRate; const normalizedDistance = Math.min(Math.max(distanceToPlayer, 5), targetRange) - 5; const fireRate = minFireRate + (normalizedDistance / (targetRange - 5)) * fireRateRange; if (angleToPlayer < fieldOfView/2 && (!roboticSculpture.lastShotTime || time - roboticSculpture.lastShotTime > fireRate)) { const leftEyePos = new THREE.Vector3(); const rightEyePos = new THREE.Vector3(); leftEye.getWorldPosition(leftEyePos); rightEye.getWorldPosition(rightEyePos); const targetPos = camera.position.clone(); targetPos.y -= 1; createLaser(leftEyePos, targetPos); createLaser(rightEyePos, targetPos.clone()); roboticSculpture.lastShotTime = time; } } } else { roboticSculpture.rotation.y += 0.0005; const headGroup = roboticSculpture.children[2]; const eyeGroup = headGroup.children.find(child => child instanceof THREE.Group); if (eyeGroup) { const leftEye = eyeGroup.children[3]; const rightEye = eyeGroup.children[4]; if (leftEye.material.targetMode) { leftEye.material.color.setHex(0x00ff00); leftEye.material.emissive.setHex(0x00ff00); rightEye.material.color.setHex(0x00ff00); rightEye.material.emissive.setHex(0x00ff00); leftEye.material.targetMode = false; rightEye.material.targetMode = false; } } } roboticSculpture.children[3].rotation.x = Math.sin(time + roboticSculpture.animationPhase) * 0.2; roboticSculpture.children[4].rotation.x = Math.sin(time + roboticSculpture.animationPhase + Math.PI) * 0.2; const headGroup = roboticSculpture.children[2]; if (headGroup && headGroup.children) { const eyeGroup = headGroup.children.find(child => child instanceof THREE.Group); if (eyeGroup) { const scanEyes = eyeGroup.children.slice(0, 3); scanEyes.forEach((eye, index) => { eye.position.y = -0.3 + Math.sin(time * 2 + index * Math.PI/2) * 0.1; }); const leftEye = eyeGroup.children[3]; const rightEye = eyeGroup.children[4]; const pulseIntensity = (Math.sin(time * 3) + 1) * 2.0 + 4.0; leftEye.material.emissiveIntensity = pulseIntensity; rightEye.material.emissiveIntensity = pulseIntensity; } const tubes = headGroup.children.slice(2, 6); tubes.forEach((tube, index) => { tube.rotation.y = Math.sin(time * 1.5 + index * Math.PI/2) * 0.1; }); const leftAntenna = headGroup.children[7]; const rightAntenna = headGroup.children[8]; if (leftAntenna && rightAntenna) { leftAntenna.rotation.z = Math.PI / 6 + Math.sin(time * 1.5) * 0.1; rightAntenna.rotation.z = -Math.PI / 6 + Math.sin(time * 1.5) * 0.1; } const radarGroup = headGroup.children[9]; if (radarGroup && radarGroup.children && radarGroup.children[1]) { radarGroup.rotation.y += 0.03; radarGroup.children[1].rotation.x = Math.PI / 2 + Math.sin(time * 0.5) * 0.1; } headGroup.rotation.y = Math.sin(time * 0.3) * 0.1; headGroup.rotation.x = Math.sin(time * 0.4) * 0.05; headGroup.position.y = 4 + Math.sin(time * 0.6) * 0.1; } } // Update lasers for (let i = activeLasers.length - 1; i >= 0; i--) { const laser = activeLasers[i]; laser.progress += laser.moveSpeed; const newPos = new THREE.Vector3().lerpVectors( laser.startPos, laser.targetPos, laser.progress ); laser.position.copy(newPos); laser.lookAt(laser.targetPos); laser.rotateX(Math.PI / 2); const distanceToPlayer = laser.position.distanceTo(camera.position); if (distanceToPlayer < 2 && laser.canDamage) { if (!isInvincible) { laser.canDamage = false; setHealth(prev => { const newHealth = Math.max(0, prev - 1); if (newHealth === 0) { document.exitPointerLock(); setGameOver(true); // Do not call checkSpawnPosition here } return newHealth; }); setDamageFlash(true); setTimeout(() => setDamageFlash(false), 200); setIsInvincible(true); setTimeout(() => setIsInvincible(false), 1000); } scene.remove(laser); laser.children.forEach(child => { child.geometry.dispose(); child.material.dispose(); }); activeLasers.splice(i, 1); } if (laser.progress >= 1) { scene.remove(laser); laser.children.forEach(child => { child.geometry.dispose(); child.material.dispose(); }); activeLasers.splice(i, 1); } } composer.render(); } animate(); const handleResize = () => { camera.aspect = window.innerWidth / window.innerHeight; camera.updateProjectionMatrix(); renderer.setSize(window.innerWidth, window.innerHeight); composer.setSize(window.innerWidth, window.innerHeight); }; window.addEventListener('resize', handleResize); return () => { document.removeEventListener('keydown', handleKeyDown); document.removeEventListener('keyup', handleKeyUp); document.removeEventListener('mousemove', handleMouseMove); document.removeEventListener('pointerlockchange', handlePointerLockChange); renderer.domElement.removeEventListener('click', requestPointerLock); renderer.domElement.removeEventListener('mousedown', handleMouseDown); renderer.domElement.removeEventListener('mouseup', handleMouseUp); window.removeEventListener('resize', handleResize); mountRef.current.removeChild(renderer.domElement); renderer.dispose(); composer.dispose(); // Cleanup rain if (rain) { rain.geometry.dispose(); rain.material.dispose(); scene.remove(rain); } // Cleanup clouds clouds.forEach(cloud => { if (cloud && cloud.children) { cloud.children.forEach(plane => { if (plane.geometry) plane.geometry.dispose(); if (plane.material) plane.material.dispose(); }); scene.remove(cloud); } }); }; }, []); // Empty dependency array - runs only once // Game state effect useEffect(() => { if (!sceneRef.current || !cameraRef.current) return; if (gameOver) { document.exitPointerLock(); if (score > highScore) { localStorage.setItem('highScore', score.toString()); } } }, [gameOver, score, highScore]); return ( <>

{/* Futuristic Crosshair */}

{/* Stats Display */}

Score: {score}

High Score: {highScore}

[W][A][S][D] MOVEMENT

[MOUSE] AIM/SHOOT

[Q][E] LEAN

[SPACE] DELIVER PRETZELS

{/* Health Display */}

SYSTEM INTEGRITY

{[...Array(5)].map((_, i) => (

))}

{/* Pretzel Counter UI */}

{[...Array(3)].map((_, i) => (

🥨

))}

{(pretzelManagerRef.current?.collectedCount || 0) > 0 && (

Return to Chef Brow!

)}

{indicatorVisible.visible && (

Pretzels handed in! +${indicatorVisible.points} points!

)} {damageFlash && (

)} {gameOver && (

GAME OVER

Final Score: {score}

{score > highScore && (

New High Score!

)}

Press R to restart

)} {hitMarkers.map(marker => (

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