// ThreeJS revision: 152 // IMPORTS: import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { EffectComposer } from 'three/addons/postprocessing/EffectComposer.js'; import { RenderPass } from 'three/addons/postprocessing/RenderPass.js'; import { UnrealBloomPass } from 'three/addons/postprocessing/UnrealBloomPass.js'; import { SMAAPass } from 'three/addons/postprocessing/SMAAPass.js'; import { FBXLoader } from 'three/addons/loaders/FBXLoader.js'; import { OBJLoader } from 'three/addons/loaders/OBJLoader.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; /* This is where external user components are loaded into scope. This seems like the simplest solution to this problem as it does not require modifications to the Script loader. This requires an export statement at the end of the user script with the desires export components added. Components can be removed from this import statement to completely remove them without having to modify the external script contents - meaning it can hold objects that aren't even used in this script for later use. */ import { MaterialManager, LightingManager, MeshManager } from 'https://play.rosebud.ai/assets/ThreeJSScripts.js?hZgy'; const SCRIPT_ASSETS = [{ name: "script_tile", url: "https://play.rosebud.ai/assets/script_tile.js?O3m4" }, { name: "script_crosshair", url: "https://play.rosebud.ai/assets/script_crosshair.js?2xtq" }, { name: "script_ammodisplay", url: "https://play.rosebud.ai/assets/script_ammodisplay.js?YY03" }, { name: "script_cameraController", url: "https://play.rosebud.ai/assets/script_cameraController.js?Smaz" }, { name: "script_audioPlayer", url: "https://play.rosebud.ai/assets/script_audioPlayer.js?6FCn" }, { name: "script_ray", url: "https://play.rosebud.ai/assets/script_ray.js?nE1Z" }]; const MODEL_ASSETS = { MAC10: { url: 'https://play.rosebud.ai/assets/mac_10_01.glb?K38F', type: 'glb', scale: 0.017 }, CHARACTER: { url: 'https://play.rosebud.ai/assets/mc_character_model.obj?1v5W', type: 'obj', scale: 1 }, XBOT: { url: 'https://play.rosebud.ai/assets/mdl_xbot.fbx?y7Qq', type: 'fbx', scale: 0.12 }, SLENDERMAN: { url: 'https://play.rosebud.ai/assets/mdl_slenderman.glb?CQq8', type: 'glb', scale: 15 } }; const SOUND_ASSETS = { effects: { bulletHit: { url: 'https://play.rosebud.ai/assets/snd_bullet_hit.wav?5GSg', volume: 0.4 }, gunShot: { url: 'https://play.rosebud.ai/assets/snd_pistol_shot.wav?V6gU', volume: 0.05 }, reload: { url: 'https://play.rosebud.ai/assets/snd_reload.wav?qYEe', volume: 0.5 } }, music: { // Reserved for background music }, ambient: { // Reserved for ambient sounds } }; const APP_SETTINGS = { debug: { showEnemyStateLabel: false }, tilemap: { width: 10, height: 10, tileSize: 20, obstacleCount: 5 }, obstacles: { height: 50, physics: { mass: 0, // Static obstacles friction: 0.5, restitution: 0.3 }, material: { color: 0x808080, roughness: 0.7, metalness: 0.2 } }, controls: { hideGunSettingsMenu: true, createEnemyOnStart: true, enableMuzzleFlash: false, showNavMesh: false, showEnemyPath: false, mouseSensitivity: { x: 0.005, y: 0.005 }, playerMoveSpeed: 30 }, renderer: { shadowMap: { enabled: true, type: THREE.PCFSoftShadowMap }, colorSpace: { output: THREE.SRGBColorSpace, toneMapping: THREE.ACESFilmicToneMapping, toneMappingExposure: 1.2 }, antialias: true, pixelRatio: window.devicePixelRatio }, world: { defaults: { skyColor: 0x87CEEB, groundColor: 0xFFFFFF }, }, enemyStates: { CHASING: 'CHASING', WAITING: 'WAITING', ATTACKING: 'ATTACKING' }, physics: { gravity: { x: 0, y: -9.81, z: 0 }, defaultContactMaterial: { friction: 0.01, restitution: 0.6 }, solver: { iterations: 10, tolerance: 0.001 } }, enemy: { position: { x: 0, y: 0, z: -50 }, chaseSpeed: 10, waitDuration: 2000, startWaitingDistance: 20, attackDuration: 1000, attackCooldown: 2000, model: MODEL_ASSETS.XBOT }, camera: { fov: 75, near: 0.1, far: 1000, initialPosition: { x: 0, y: 50, z: 100 } }, player: { moveSpeed: 30, sensitivity: { x: 0.002, y: 0.002 } }, gameplay: {}, guns: { smg: { recoil: { duration: 0.1, // Shorter duration for automatic weapon kickback: 0.02, // Less kickback per shot recover: 0.9, // Faster recovery rotationX: 0.05 // Less rotation per shot }, muzzleFlash: { size: 0.06, color: 0xffff00, duration: 25, offset: { x: 0, y: 0.1, z: 0 } }, name: "SMG", ammo: { current: 30, max: 30 }, fireRate: { isAutomatic: true, cooldown: 100 }, model: { ...MODEL_ASSETS.MAC10 }, texture: { url: 'https://play.rosebud.ai/assets/BLK64.png?B9l1' }, sound: { ...SOUND_ASSETS.effects.gunShot }, position: { default: { x: 0.06, y: -0.08, z: -0.15 }, ads: { x: 0, y: -0.05, z: -0.1 } }, rotation: { default: { x: 0, y: -Math.PI / 2, z: 0 }, ads: { x: 0, y: -Math.PI / 2, z: 0 } }, muzzleFlash: { size: 0.06, color: 0xffff00, duration: 25 }, adsToggle: { enabled: true, transitionSpeed: 0.12 }, fov: { default: 75, ads: 60, transitionSpeed: 0.12 } } }, lights: { sunlight: { color: 0xffffff, intensity: 1.5, position: { x: -50, y: 100, z: -50 }, castShadow: true, shadow: { mapSize: { width: 2048, height: 2048 }, camera: { near: 10, far: 1000, left: -100, right: 100, top: 100, bottom: -100 }, bias: -0.0001 } } } }; const TEXTURE_ASSETS = { normal: { 'terrain_nrm': 'https://develop.play.rosebud.ai/assets/Grass_04_Nrm.png?BQVT', // Add more normal maps as needed }, texture: { 'terrain': 'https://develop.play.rosebud.ai/assets/Grass_04.png?MBRT', // Add more textures as needed }, sprites: { 'TomeSprites': 'https://play.rosebud.ai/assets/Tomes32x32.png?meX8', // Add more sprite sheets as needed } }; // Components: function TextureManager() { class TextureManager { constructor() { this.textures = new Map(); this.loader = new THREE.TextureLoader(LoadingManager); this.texturesLoaded = false; this.loadTextures(); } load(key, url, onLoad = () => {}, onProgress = () => {}, onError = () => {}) { if (this.textures.has(key)) { onLoad(this.textures.get(key)); return Promise.resolve(this.textures.get(key)); } return new Promise((resolve, reject) => { this.loader.load( url, (texture) => { this.textures.set(key, texture); onLoad(texture); resolve(texture); }, onProgress, (error) => { onError(error); reject(error); } ); }); } loadTextures() { return new Promise((resolve, reject) => { const texturePromises = []; // Iterate through each category in TEXTURE_ASSETS for (const category in TEXTURE_ASSETS) { for (const textureName in TEXTURE_ASSETS[category]) { const textureUrl = TEXTURE_ASSETS[category][textureName]; const key = textureName; texturePromises.push( this.load( key, textureUrl, (texture) => { if (category === 'sprites') { texture.minFilter = THREE.NearestFilter; texture.magFilter = THREE.NearestFilter; texture.generateMipmaps = false; } console.log(`Loaded ${category} texture: ${key}`); } ) ); } } Promise.all(texturePromises) .then((loadedTextures) => { this.texturesLoaded = true; console.log('All textures loaded successfully'); console.log('Loaded textures:'); this.textures.forEach((texture, key) => { console.log(`- ${key}: ${texture.image.src}`); }); resolve(); }) .catch((error) => { console.error('Error loading textures:', error); reject(error); }); }); } getTexture(key) { const texture = this.textures.get(key); if (!texture) { console.warn(`Texture with key "${key}" not found.`); } return texture; } dispose(key) { if (this.textures.has(key)) { this.textures.get(key).dispose(); this.textures.delete(key); } } disposeAll() { for (let texture of this.textures.values()) { texture.dispose(); } this.textures.clear(); } } return new TextureManager(); } class ModelLoader { constructor() { this.loaders = { texture: new THREE.TextureLoader(LoadingManager), gltf: new GLTFLoader(LoadingManager), glb: new GLTFLoader(LoadingManager), fbx: new FBXLoader(LoadingManager), obj: new OBJLoader(LoadingManager), audio: new THREE.AudioLoader(LoadingManager) }; this.cache = { models: new Map(), textures: new Map(), audio: new Map() }; } async loadModel(modelData) { const { url, type, scale = 1, volume } = modelData; const cacheKey = `${url}_${scale}`; // Check cache first if (this.cache.models.has(cacheKey)) { return this.cache.models.get(cacheKey).clone(); } return new Promise((resolve, reject) => { const modelType = type.toLowerCase(); const loader = this.loaders[modelType]; if (!loader) { reject(new Error(`Unsupported model type: ${type}`)); return; } loader.load( url, (result) => { let model; // Handle different model types switch (modelType) { case 'gltf': case 'glb': model = result.scene; break; case 'fbx': case 'obj': model = result; break; default: model = result.scene || result; } if (!model) { reject(new Error(`Failed to load model: ${url}`)); return; } model.scale.setScalar(scale); this.cache.models.set(cacheKey, model.clone()); resolve(model); }, (progress) => { const percentage = (progress.loaded / progress.total * 100).toFixed(2); console.log(`Loading ${type}: ${percentage}%`); }, reject ); }); } async loadTexture(url) { if (this.cache.textures.has(url)) { return this.cache.textures.get(url).clone(); } return new Promise((resolve, reject) => { this.loaders.texture.load( url, (texture) => { this.cache.textures.set(url, texture); resolve(texture); }, undefined, reject ); }); } async loadAudio(url) { if (this.cache.audio.has(url)) { return this.cache.audio.get(url); } return new Promise((resolve, reject) => { this.loaders.audio.load( url, (buffer) => { const audio = new THREE.Audio(new THREE.AudioListener()); audio.setBuffer(buffer); this.cache.audio.set(url, audio); resolve(audio); }, undefined, reject ); }); } } class Gun { constructor(scene, camera, model, texture, sound, settings) { this.scene = scene; this.camera = camera; this.model = model; this.texture = texture; this.shootSound = sound; this.wasMouseDown = false; // Track previous mouse state this.currentAmmo = settings.ammo.current; this.maxAmmo = settings.ammo.max; this.isReloading = false; this.reloadTime = 1000; // 1 second reload time this.reloadStartTime = 0; this.reloadAnimationProgress = 0; // Store original position and rotation for reload animation this.originalPosition = { ...settings.position.default }; this.originalRotation = { ...settings.rotation.default }; // Define reload animation positions and rotations this.reloadPosition = { x: 0, // Center y: -0.5, // Lower z: -0.3 // Closer }; this.reloadRotation = { x: -Math.PI / 4, // Tilt down y: Math.PI, z: 0 }; if (this.shootSound && settings.sound && typeof settings.sound.volume === 'number') { this.shootSound.setVolume(settings.sound.volume); } this.settings = settings; this.muzzleFlash = null; this.isADS = false; this.isTransitioning = false; this.lastShotTime = 0; this.isAutomatic = settings.fireRate.isAutomatic; this.cooldown = settings.fireRate.cooldown; this.ray = new Ray({ THREE: THREE, origin: new THREE.Vector3(), direction: new THREE.Vector3() }); this.defaultPosition = { ...settings.position.default }; this.adsPosition = { ...settings.position.ads }; this.currentPosition = { ...this.defaultPosition }; this.currentRotation = { ...settings.rotation.default }; this.currentFOV = settings.fov.default; this.setupModel(); } setupModel() { if (this.model && this.texture) { this.model.scale.setScalar(this.settings.model.scale); // Initialize recoil properties this.recoilAmount = 0; this.recoilRecovery = 0; this.lastRecoilTime = 0; this.isRecoiling = false; this.model.traverse((child) => { if (child.isMesh) { child.material.map = this.texture; child.material.needsUpdate = true; } }); this.scene.add(this.model); } } updatePosition(deltaTime) { if (!this.model) return; if (this.isRecoiling) { this.updateRecoil(deltaTime); } if (this.muzzleFlash) { this.muzzleFlash.update(this.model.position, this.model.quaternion); } if (this.isReloading) { this.updateReloadAnimation(); } else if (this.isTransitioning) { this.updateADSTransition(deltaTime); } this.updateModelTransform(); this.updateCameraFOV(); } triggerRecoil() { this.isRecoiling = true; this.recoilAmount = 1; this.lastRecoilTime = Date.now(); } updateRecoil(deltaTime) { const recoilSettings = this.settings.recoil; const recoilProgress = (Date.now() - this.lastRecoilTime) / (recoilSettings.duration * 1000); if (recoilProgress >= 1) { this.isRecoiling = false; this.recoilAmount = 0; return; } // Calculate smooth recoil decay this.recoilAmount = Math.max(0, 1 - Math.pow(recoilProgress, recoilSettings.recover)); } updateReloadAnimation() { const currentTime = Date.now(); const reloadProgress = (currentTime - this.reloadStartTime) / this.reloadTime; this.reloadAnimationProgress = Math.min(1, reloadProgress); const phase = this.calculateReloadPhase(); this.updateReloadPositionAndRotation(phase); } calculateReloadPhase() { if (this.reloadAnimationProgress < 0.5) { return this.reloadAnimationProgress * 2; // Going down (0 to 0.5 becomes 0 to 1) } return 2 - (this.reloadAnimationProgress * 2); // Going up (0.5 to 1 becomes 1 to 0) } updateReloadPositionAndRotation(phase) { this.currentPosition = { x: this.lerp(this.originalPosition.x, this.reloadPosition.x, phase), y: this.lerp(this.originalPosition.y, this.reloadPosition.y, phase), z: this.lerp(this.originalPosition.z, this.reloadPosition.z, phase) }; this.currentRotation = { x: this.lerp(this.originalRotation.x, this.reloadRotation.x, phase), y: this.lerp(this.originalRotation.y, this.reloadRotation.y, phase), z: this.lerp(this.originalRotation.z, this.reloadRotation.z, phase) }; } updateADSTransition(deltaTime) { this.transitionProgress += deltaTime / this.settings.adsToggle.transitionSpeed; this.transitionProgress = Math.min(this.transitionProgress, 1); const positions = this.getTransitionPositions(); const rotations = this.getTransitionRotations(); const fovs = this.getTransitionFOVs(); this.updateTransitionValues(positions, rotations, fovs); if (this.transitionProgress === 1) { this.isTransitioning = false; } } getTransitionPositions() { return { start: this.isADS ? this.defaultPosition : this.adsPosition, end: this.isADS ? this.adsPosition : this.defaultPosition }; } getTransitionRotations() { return { start: this.isADS ? this.settings.rotation.default : this.settings.rotation.ads, end: this.isADS ? this.settings.rotation.ads : this.settings.rotation.default }; } getTransitionFOVs() { return { start: this.isADS ? this.settings.fov.default : this.settings.fov.ads, end: this.isADS ? this.settings.fov.ads : this.settings.fov.default }; } updateTransitionValues(positions, rotations, fovs) { this.currentPosition = { x: this.lerp(positions.start.x, positions.end.x, this.transitionProgress), y: this.lerp(positions.start.y, positions.end.y, this.transitionProgress), z: this.lerp(positions.start.z, positions.end.z, this.transitionProgress) }; this.currentRotation = { x: this.lerp(rotations.start.x, rotations.end.x, this.transitionProgress), y: this.lerp(rotations.start.y, rotations.end.y, this.transitionProgress), z: this.lerp(rotations.start.z, rotations.end.z, this.transitionProgress) }; this.currentFOV = this.lerp(fovs.start, fovs.end, this.transitionProgress); } updateModelTransform() { let recoilOffset = new THREE.Vector3(0, 0, 0); let recoilRotation = new THREE.Euler(0, 0, 0); if (this.isRecoiling) { const recoilSettings = this.settings.recoil; // Apply recoil position offset recoilOffset.z += recoilSettings.kickback * this.recoilAmount; // Apply recoil rotation recoilRotation.x += recoilSettings.rotationX * this.recoilAmount; } const gunPosition = new THREE.Vector3( this.currentPosition.x, this.currentPosition.y, this.currentPosition.z ); // Apply recoil offset in gun's local space gunPosition.add(recoilOffset); gunPosition.applyQuaternion(this.camera.quaternion); this.model.position.copy(gunPosition.add(this.camera.position)); // Apply base rotation and recoil rotation this.model.rotation.set( this.currentRotation.x + recoilRotation.x, this.currentRotation.y + recoilRotation.y, this.currentRotation.z + recoilRotation.z ); this.model.quaternion.premultiply(this.camera.quaternion); } updateCameraFOV() { this.camera.fov = this.currentFOV; this.camera.updateProjectionMatrix(); } lerp(start, end, t) { return start * (1 - t) + end * t; } playShootSound() { if (this.shootSound) { if (this.shootSound.isPlaying) { this.shootSound.stop(); } this.shootSound.play(); } } performRaycast() { const direction = new THREE.Vector3(); this.camera.getWorldDirection(direction); this.ray.update(this.camera.position.clone(), direction.normalize()); if (window.Enemy && window.Enemy.model) { const intersection = this.ray.checkIntersection(window.Enemy.model); if (intersection) { window.AudioPlayer.play('bulletHit'); console.log('Enemy hit!', { distance: intersection.distance, point: intersection.point, modelName: intersection.object.name || 'unnamed mesh' }); } return intersection; } return null; } update(deltaTime) { this.updatePositionAndAnimations(deltaTime); if (!this.checkInputSystem()) { return; } const currentTime = Date.now(); const isMouseDown = window.Input.isMouseDown; if (this.handleReloadingState(currentTime)) { return; } if (this.checkAmmoAndReload()) { return; } this.handleShooting(currentTime, isMouseDown); this.wasMouseDown = isMouseDown; } updatePositionAndAnimations(deltaTime) { this.updatePosition(deltaTime); } checkInputSystem() { if (!window.Input) { console.log('Gun update: Input system not available'); return false; } return true; } handleReloadingState(currentTime) { if (this.isReloading) { if (currentTime - this.reloadStartTime >= this.reloadTime) { this.completeReload(); } return true; } return false; } checkAmmoAndReload() { if (this.currentAmmo <= 0) { this.startReload(); return true; } return false; } handleShooting(currentTime, isMouseDown) { const cooldownPassed = currentTime - this.lastShotTime >= this.cooldown; if (cooldownPassed) { if (this.isAutomatic) { // Automatic weapons fire while mouse is held if (isMouseDown) { this.performShot(); } } else { // Single-fire weapons only fire on mouse press if (isMouseDown && !this.wasMouseDown) { this.performShot(); } } } } performShot() { if (this.currentAmmo <= 0) { return; } this.playShootSound(); this.performRaycast(); this.triggerRecoil(); if (this.muzzleFlash) { this.muzzleFlash.show(); } this.lastShotTime = Date.now(); this.currentAmmo--; // Update ammo display if (window.AmmoDisplay) { window.AmmoDisplay.updateAmmo(this.currentAmmo, this.maxAmmo); } } getCurrentAmmo() { return this.currentAmmo; } getMaxAmmo() { return this.maxAmmo; } startReload() { this.isReloading = true; this.reloadStartTime = Date.now(); this.reloadAnimationProgress = 0; // Play reload sound if (window.AudioPlayer) { window.AudioPlayer.play('reload'); } // Update ammo display to show reloading if (window.AmmoDisplay) { window.AmmoDisplay.updateAmmo('...', this.maxAmmo); } } completeReload() { this.isReloading = false; this.currentAmmo = this.maxAmmo; this.reloadAnimationProgress = 0; // Reset to original position and rotation this.currentPosition = { ...this.originalPosition }; this.currentRotation = { ...this.originalRotation }; // Update ammo display after reload if (window.AmmoDisplay) { window.AmmoDisplay.updateAmmo(this.currentAmmo, this.maxAmmo); } } reload() { if (!this.isReloading) { this.startReload(); } } hide() { if (this.model) { this.model.visible = false; } } show() { if (this.model) { this.model.visible = true; } } } class GunManager { constructor(scene, camera) { this.scene = scene; this.camera = camera; this.currentGun = null; this.loadedGuns = new Map(); } async loadGun(gunType) { if (this.loadedGuns.has(gunType)) { return this.loadedGuns.get(gunType); } const gunSettings = APP_SETTINGS.guns?.[gunType]; if (!gunSettings) { console.error(`Gun type ${gunType} not found in settings`); return null; } try { const [model, texture, sound] = await Promise.all([ window.ModelLoader.loadModel(gunSettings.model), window.ModelLoader.loadTexture(gunSettings.texture.url), window.ModelLoader.loadAudio(gunSettings.sound.url, gunSettings.sound.volume) ]); const gun = new Gun(this.scene, this.camera, model, texture, sound, gunSettings); this.loadedGuns.set(gunType, gun); // Initialize ammo display when gun is loaded if (window.AmmoDisplay) { window.AmmoDisplay.updateAmmo(gun.getCurrentAmmo(), gun.getMaxAmmo()); } return gun; } catch (error) { console.error(`Error loading gun ${gunType}:`, error); return null; } } async switchGun(gunType) { if (this.currentGun) { this.currentGun.hide(); } const newGun = await this.loadGun(gunType); if (newGun) { this.currentGun = newGun; this.currentGun.show(); } return newGun; } getCurrentGun() { return this.currentGun; } update(deltaTime) { if (this.currentGun) { this.currentGun.update(deltaTime); } } } class Renderer { constructor() { this.postProcessing = null; this.renderer = new THREE.WebGLRenderer({ antialias: APP_SETTINGS.renderer.antialias, canvas: canvas, powerPreference: "high-performance" }); this.init(); } init() { this.renderer.setPixelRatio(APP_SETTINGS.renderer.pixelRatio); this.renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); this.renderer.shadowMap.enabled = APP_SETTINGS.renderer.shadowMap.enabled; this.renderer.shadowMap.type = APP_SETTINGS.renderer.shadowMap.type; this.renderer.outputColorSpace = APP_SETTINGS.renderer.colorSpace.output; this.renderer.toneMapping = APP_SETTINGS.renderer.colorSpace.toneMapping; this.renderer.toneMappingExposure = APP_SETTINGS.renderer.colorSpace.toneMappingExposure; console.log('Renderer initialized with APP_SETTINGS parameters'); } initPostProcessing() { this.postProcessing = new PostProcessing(this.renderer, WorldScene, MainCamera); window.PostProcessing = this.postProcessing; } render() { if (this.postProcessing) { this.postProcessing.render(); } else { this.renderer.render(WorldScene, MainCamera); } } setSize(width, height) { this.renderer.setSize(width, height); if (this.postProcessing) { this.postProcessing.setSize(width, height); } } } class PostProcessing { constructor() { this.composer = null; this.bloomPass = null; this.smaaPass = null; this.initComposer(); } initComposer() { this.composer = new EffectComposer(GameRenderer.renderer); const renderPass = new RenderPass(WorldScene, MainCamera); this.composer.addPass(renderPass); this.bloomPass = new UnrealBloomPass( new THREE.Vector2(innerWidth, innerHeight), 0.2, // bloom strength 0.4, // radius 0.9 // threshold ); this.composer.addPass(this.bloomPass); this.smaaPass = new SMAAPass( innerWidth * GameRenderer.renderer.getPixelRatio(), innerHeight * GameRenderer.renderer.getPixelRatio() ); this.composer.addPass(this.smaaPass); } setSize(width, height) { this.composer.setSize(width, height); this.bloomPass.resolution.set(width, height); this.smaaPass.setSize(width, height); } render() { this.composer.render(); } } const StarNestShader = { uniforms: { 'tDiffuse': { value: null }, 'iTime': { value: 0 }, 'iResolution': { value: new THREE.Vector2() } }, vertexShader: ` varying vec2 vUv; void main() { vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); } `, fragmentShader: ` uniform float iTime; uniform vec2 iResolution; uniform vec2 iMouse; uniform sampler2D tDiffuse; varying vec2 vUv; #define iterations 17 #define formuparam 0.53 #define volsteps 20 #define stepsize 0.1 #define zoom 0.800 #define tile 0.850 #define speed 0.010 #define brightness 0.0015 #define darkmatter 0.300 #define distfading 0.730 #define saturation 0.850 void mainImage( out vec4 fragColor, in vec2 fragCoord ) { //get coords and direction vec2 uv=fragCoord.xy/iResolution.xy-.5; uv.y*=iResolution.y/iResolution.x; vec3 dir=vec3(uv*zoom,1.); float time=iTime*speed+.25; // Fixed view direction without rotation vec3 from=vec3(1.,.5,0.5); from+=vec3(time*2.,time,-2.); //volumetric rendering float s=0.1,fade=1.; vec3 v=vec3(0.); for (int r=0; r6) fade*=1.-dm; // dark matter, don't render near //v+=vec3(dm,dm*.5,0.); v+=fade; v+=vec3(s,s*s,s*s*s*s)*a*brightness*fade; // coloring based on distance fade*=distfading; // distance fading s+=stepsize; } v=mix(vec3(length(v)),v,saturation); //color adjust fragColor = vec4(v*.01,1.); } void main() { vec4 fragColor; mainImage(fragColor, gl_FragCoord.xy); gl_FragColor = fragColor; } ` }; class SkyBox { constructor() { this.skyMesh = null; this.shaderMaterial = null; this.loadSkyboxModel(); } loadSkyboxModel() { const loader = new GLTFLoader(LoadingManager); loader.load('https://play.rosebud.ai/assets/SkyboxSphere.glb?BkJ1', (gltf) => { this.skyMesh = gltf.scene.children[0]; this.skyMesh.scale.set(1500, 1200, 1500); this.skyMesh.position.set(0, 0, 0); // Fix position at world origin this.skyMesh.matrixAutoUpdate = false; // Disable automatic matrix updates // Create and apply the StarNest shader material this.shaderMaterial = new THREE.ShaderMaterial({ ...StarNestShader, side: THREE.BackSide, transparent: false, depthWrite: false, depthTest: true }); this.shaderMaterial.uniforms.iResolution.value.set(window.innerWidth, window.innerHeight); this.shaderMaterial.uniforms.iTime.value = 0; this.skyMesh.material = this.shaderMaterial; WorldScene.add(this.skyMesh); console.log('Skybox created with StarNestShader'); this.updateSunPosition(); }); } update(deltaTime) { if (this.shaderMaterial && this.skyMesh) { // Reset position to ensure skybox stays fixed this.skyMesh.position.set(0, 0, 0); // Update shader uniforms this.shaderMaterial.uniforms.iTime.value += deltaTime; this.shaderMaterial.uniforms.iResolution.value.set(window.innerWidth, window.innerHeight); // Update material this.shaderMaterial.needsUpdate = true; } this.updateSunPosition(); } updateSunPosition() { if (this.shaderMaterial && Lights.getLight('sunLight')) { const sunLight = Lights.getLight('sunLight'); const sunDirection = new THREE.Vector3(); sunLight.getWorldDirection(sunDirection); // StarNestShader doesn't use sun position, so we'll skip updating it } } getSkyColor() { return this.shaderMaterial ? this.shaderMaterial.skyColor : new THREE.Color(0x87CEEB); } getGroundColor() { return this.shaderMaterial ? this.shaderMaterial.groundColor : new THREE.Color(0xFFFFFF); } setSkyColor(color) { if (this.shaderMaterial) { this.shaderMaterial.setSkyColor(color); } } setGroundColor(color) { if (this.shaderMaterial) { this.shaderMaterial.setGroundColor(color); } } } class WorldTime { constructor() { this.currentTime = 0; // Time in seconds this.timeScale = 1; // 1 second real time = 1 second game time this.tweening = false; this.tweenStartTime = 0; this.tweenEndTime = 0; this.tweenDuration = 0; } update(deltaTime) { if (this.tweening) { this.updateTween(deltaTime); } else { this.currentTime += deltaTime * this.timeScale; } } setTimeScale(scale) { this.timeScale = scale; } getHours() { return Math.floor(this.currentTime / 3600) % 24; } getMinutes() { return Math.floor((this.currentTime % 3600) / 60); } getSeconds() { return Math.floor(this.currentTime % 60); } getTimeString() { const hours = this.getHours().toString().padStart(2, '0'); const minutes = this.getMinutes().toString().padStart(2, '0'); const seconds = this.getSeconds().toString().padStart(2, '0'); return `${hours}:${minutes}:${seconds}`; } setTime(hours) { const targetTime = hours * 3600; // Convert hours to seconds this.tweenStartTime = this.currentTime; this.tweenEndTime = targetTime; this.tweenDuration = 2; // Duration of the tween in seconds this.tweening = true; } updateTween(deltaTime) { const elapsedTime = Math.min(deltaTime, this.tweenDuration); const progress = elapsedTime / this.tweenDuration; this.currentTime = this.tweenStartTime + (this.tweenEndTime - this.tweenStartTime) * progress; this.tweenDuration -= elapsedTime; if (this.tweenDuration <= 0) { this.currentTime = this.tweenEndTime; this.tweening = false; } } } class World { constructor() { window.WorldScene = new THREE.Scene(); this.skybox = new SkyBox(WorldScene); this.lights = {}; this.physicsWorld = new CANNON.World(); this.setupPhysicsWorld(); this.initCamera(); this.initRenderer(); this.initLights(); this.tilemap = null; this.Time = new WorldTime(); } setupPhysicsWorld() { this.physicsWorld.gravity.set( APP_SETTINGS.physics.gravity.x, APP_SETTINGS.physics.gravity.y, APP_SETTINGS.physics.gravity.z ); this.physicsWorld.defaultContactMaterial.friction = APP_SETTINGS.physics.defaultContactMaterial.friction; this.physicsWorld.defaultContactMaterial.restitution = APP_SETTINGS.physics.defaultContactMaterial.restitution; this.physicsWorld.solver.iterations = APP_SETTINGS.physics.solver.iterations; this.physicsWorld.solver.tolerance = APP_SETTINGS.physics.solver.tolerance; this.groundPhysMaterial = new CANNON.Material('ground'); } initLights() { const defaultSkyColor = new THREE.Color(APP_SETTINGS.world.defaults.skyColor); const defaultGroundColor = new THREE.Color(APP_SETTINGS.world.defaults.groundColor); const sunlightSettings = APP_SETTINGS.lights.sunlight; Lights.createLight('sunLight', 'directional', { color: sunlightSettings.color, intensity: sunlightSettings.intensity, position: sunlightSettings.position, castShadow: sunlightSettings.castShadow, shadow: sunlightSettings.shadow }); Lights.createLight('hemiLight', 'hemisphere', { skyColor: defaultSkyColor, groundColor: defaultGroundColor, intensity: 0.6 }); console.log('Lights initialized with default colors:', defaultSkyColor, defaultGroundColor); } getLight(name) { return Lights.getLight(name); } calculateSunRotation(time) { const rotationSpeed = 0.1; // Adjust this value to change the orbit speed const angle = time * rotationSpeed; const radius = 100; // Adjust this value to change the orbit radius const x = Math.cos(angle) * radius; const z = Math.sin(angle) * radius; const baseHeight = 80; // Increased from 50 to 80 const verticalAmplitude = 30; // Increased from 20 to 30 const y = baseHeight + Math.sin(angle * 0.5) * verticalAmplitude; return new THREE.Vector3(x, y, z); } updateSunlight(playerPosition) { Lights.updateLight('sunLight', (sunLight) => { const offset = this.calculateSunRotation(this.Time.currentTime); sunLight.position.copy(playerPosition).add(offset); // Update the target if (!sunLight.target) { sunLight.target = new THREE.Object3D(); WorldScene.add(sunLight.target); } sunLight.target.position.copy(playerPosition); }); // Update the skybox sun position if (this.skybox) { this.skybox.updateSunPosition(); } } initCamera() { window.MainCamera = new THREE.PerspectiveCamera( APP_SETTINGS.camera.fov, canvas.offsetWidth / canvas.offsetHeight, APP_SETTINGS.camera.near, APP_SETTINGS.camera.far ); MainCamera.position.set( APP_SETTINGS.camera.initialPosition.x, APP_SETTINGS.camera.initialPosition.y, APP_SETTINGS.camera.initialPosition.z ); MainCamera.lookAt(0, 0, 0); console.log('Camera initialized with APP_SETTINGS parameters'); } initRenderer() { window.GameRenderer = new Renderer(MainCamera); GameRenderer.initPostProcessing(WorldScene); } createTilemap() { if (this.tilemap) { return this.tilemap; } const tileMapGenerator = new TileMapGenerator({ THREE: THREE, Materials: window.Materials, settings: APP_SETTINGS, width: APP_SETTINGS.tilemap.width, height: APP_SETTINGS.tilemap.height, tileSize: APP_SETTINGS.tilemap.tileSize }); this.tilemap = tileMapGenerator.generateMap(); const tilemapMesh = this.tilemap.render(); WorldScene.add(tilemapMesh); // Add grid lines for visual reference const gridLines = this.tilemap.createGridLines(); WorldScene.add(gridLines); return this.tilemap; } update(deltaTime) { this.Time.update(deltaTime); this.physicsWorld.step(deltaTime); // Update sunlight position based on a fixed point (e.g., world origin) this.updateSunlight(new THREE.Vector3(0, 0, 0)); this.skybox.update(deltaTime); GameRenderer.render(); } } class InputHandler { constructor() { this.mouseHandler = this.handleMouseMove.bind(this); this.mouseDownHandler = this.handleMouseDown.bind(this); this.isMouseDown = false; this.lastDebugTime = 0; this.debugInterval = 1000; // Log every 1 second // Mouse movement tracking this.mouseDelta = { x: 0, y: 0 }; this.previousMousePosition = { x: 0, y: 0 }; this.currentMousePosition = { x: 0, y: 0 }; this.mouseMoveAmount = { x: 0, y: 0 }; // For debugging this.initControls(); } initControls() { document.addEventListener('mousemove', this.mouseHandler); document.addEventListener('click', () => { canvas.requestPointerLock(); }); document.addEventListener('mousedown', this.mouseDownHandler); document.addEventListener('mouseup', (event) => this.handleMouseUp(event)); this.initialized = true; } isInitialized() { return this.initialized === true; } handleMouseDown(event) { if (document.pointerLockElement === canvas) { this.isMouseDown = true; this.previousMousePosition.x = event.clientX; this.previousMousePosition.y = event.clientY; } } handleMouseUp(event) { if (document.pointerLockElement === canvas) { this.isMouseDown = false; } } handleMouseMove(event) { if (document.pointerLockElement === canvas) { const currentTime = Date.now(); // Update current position this.currentMousePosition.x = event.clientX; this.currentMousePosition.y = event.clientY; // Debug logging every second // Calculate delta this.mouseDelta.x = event.movementX; this.mouseDelta.y = event.movementY; // Track total movement amount (for debugging) this.mouseMoveAmount.x += Math.abs(this.mouseDelta.x); this.mouseMoveAmount.y += Math.abs(this.mouseDelta.y); // Store current position as previous for next frame this.previousMousePosition.x = this.currentMousePosition.x; this.previousMousePosition.y = this.currentMousePosition.y; } } getMouseDelta() { return { ...this.mouseDelta }; } getDebugInfo() { return { delta: { ...this.mouseDelta }, current: { ...this.currentMousePosition }, previous: { ...this.previousMousePosition }, totalMovement: { ...this.mouseMoveAmount } }; } update() { // Reset delta at the end of each frame this.mouseDelta.x = 0; this.mouseDelta.y = 0; } } class Enemy { constructor(scene) { // Scene reference this.scene = scene; this.stateLabel = new StateLabel(this); // Attack state tracking this.attackStartTime = 0; this.attackTimeElapsed = 0; // Animation properties this.mixer = null; this.animations = new Map(); this.currentAnimation = null; // Settings and configuration this.settings = APP_SETTINGS.enemy; this.moveSpeed = this.settings.chaseSpeed; // Position and model this.position = new THREE.Vector3( this.settings.position.x, this.settings.position.y, this.settings.position.z ); this.model = null; this.isLoaded = false; // Pathfinding properties this.pathfinder = null; this.currentPath = null; this.currentPathIndex = 0; this.pathUpdateInterval = 1000; this.lastPathUpdate = 0; this.minWaypointDistance = 1.0; // Recent points tracking this.recentPoints = []; this.maxRecentPoints = 5; this.recentPointThreshold = 2; // State machine properties this.currentState = APP_SETTINGS.enemyStates.CHASING; this.waitStartTime = 0; this.waitDuration = this.settings.waitDuration; } async loadModel() { try { const modelData = { url: MODEL_ASSETS.XBOT.url, type: MODEL_ASSETS.XBOT.type, scale: MODEL_ASSETS.XBOT.scale }; this.model = await window.ModelLoader.loadModel(modelData); if (this.model) { // Create animation mixer this.mixer = new THREE.AnimationMixer(this.model); // Load walk, idle, and melee animations Promise.all([ new Promise((resolve) => { const walkAnimLoader = new FBXLoader(LoadingManager); walkAnimLoader.load('https://play.rosebud.ai/assets/anim_WalkInPlace.fbx?w4Ll', (animationObject) => { const walkAnimation = animationObject.animations[0]; const walkAction = this.mixer.clipAction(walkAnimation); this.animations.set('walk', walkAction); resolve(); }); }), new Promise((resolve) => { const idleAnimLoader = new FBXLoader(LoadingManager); idleAnimLoader.load('https://play.rosebud.ai/assets/anim_Idle.fbx?0kIG', (animationObject) => { const idleAnimation = animationObject.animations[0]; const idleAction = this.mixer.clipAction(idleAnimation); this.animations.set('idle', idleAction); resolve(); }); }), new Promise((resolve) => { const meleeAnimLoader = new FBXLoader(LoadingManager); meleeAnimLoader.load('https://play.rosebud.ai/assets/anim_Boxing.fbx?wOUf', (animationObject) => { const meleeAnimation = animationObject.animations[0]; const meleeAction = this.mixer.clipAction(meleeAnimation); this.animations.set('melee', meleeAction); resolve(); }); }) ]).then(() => { // Start with walk animation by default const walkAction = this.animations.get('walk'); if (walkAction) { walkAction.play(); this.currentAnimation = 'walk'; } console.log('All animations loaded'); }); // Initialize pathfinder after tilemap is created if (GameWorld.tilemap) { this.pathfinder = new AStar(GameWorld.tilemap); } // Setup the model this.setPosition(this.position); this.model.scale.setScalar(modelData.scale); // Make the model and all its children raycastable this.model.traverse((child) => { if (child.isMesh) { child.raycast = THREE.Mesh.prototype.raycast; } }); // Add to scene this.scene.add(this.model); this.isLoaded = true; console.log('Enemy model loaded successfully'); } } catch (error) { console.error('Error loading enemy model:', error); } } setPosition(position) { // Update internal position this.position.copy(position); // Update model position if it exists if (this.model) { this.model.position.copy(position); // Ensure position is slightly above ground to prevent z-fighting this.model.position.y = Math.max(position.y, 0.1); } } enterState(state) { const currentTime = Date.now(); switch (state) { case APP_SETTINGS.enemyStates.CHASING: this.moveSpeed = this.settings.chaseSpeed; this.transitionToAnimation('walk'); break; case APP_SETTINGS.enemyStates.WAITING: this.waitStartTime = currentTime; this.moveSpeed = 0; this.transitionToAnimation('idle'); break; case APP_SETTINGS.enemyStates.ATTACKING: this.attackTimeElapsed = 0; this.attackStartTime = currentTime; this.moveSpeed = 0; this.transitionToAnimation('melee'); // Debug logging console.log('Entering ATTACKING state at time:', currentTime); break; } } transitionToAnimation(newAnimation) { if (this.currentAnimation === newAnimation) return; const fadeTime = 0.5; // Time in seconds for crossfade const oldAction = this.animations.get(this.currentAnimation); const newAction = this.animations.get(newAnimation); if (newAction) { newAction.reset(); newAction.play(); if (oldAction) { // Crossfade between animations newAction.crossFadeFrom(oldAction, fadeTime, true); } this.currentAnimation = newAnimation; } } executeStateAction(state, deltaTime, playerPosition) { switch (state) { case APP_SETTINGS.enemyStates.CHASING: this.executeChaseAction(deltaTime, playerPosition); break; case APP_SETTINGS.enemyStates.WAITING: this.executeWaitAction(deltaTime, playerPosition); break; case APP_SETTINGS.enemyStates.ATTACKING: this.executeAttackAction(deltaTime, playerPosition); break; } } exitState(state) { switch (state) { case APP_SETTINGS.enemyStates.CHASING: break; case APP_SETTINGS.enemyStates.WAITING: // No longer stopping animations here, letting transitionToAnimation handle it break; } } executeChaseAction(deltaTime, playerPosition) { // Debug logging properties initialization if not exists if (!this.lastPathLog) this.lastPathLog = 0; const currentTime = Date.now(); // Check if we need to update the path if (currentTime - this.lastPathUpdate >= this.pathUpdateInterval) { this.updatePath(playerPosition); this.lastPathUpdate = currentTime; this.currentPathIndex = 0; // Log path information every second if (currentTime - this.lastPathLog >= 1000) { console.log('Enemy Chase Debug:', { hasPath: !!this.currentPath, pathLength: this.currentPath ? this.currentPath.length : 0, currentIndex: this.currentPathIndex, currentPosition: { x: this.position.x.toFixed(2), y: this.position.y.toFixed(2), z: this.position.z.toFixed(2) }, targetPosition: { x: playerPosition.x.toFixed(2), y: playerPosition.y.toFixed(2), z: playerPosition.z.toFixed(2) } }); this.lastPathLog = currentTime; } } // Check if we have a valid path if (!this.currentPath || this.currentPathIndex >= this.currentPath.length) { // No valid path, use direct movement const direction = this.calculateDirectionToPlayer(playerPosition); const normalizedDirection = direction.clone().normalize(); const movement = normalizedDirection.multiplyScalar(this.moveSpeed * deltaTime); const newPosition = this.position.clone().add(movement); this.setPosition(newPosition); } else { // Follow the current path this.followPath(deltaTime); } if (this.model) { // Calculate direction vector but ignore Y component const targetPosition = new THREE.Vector3( playerPosition.x, this.model.position.y, // Keep the same Y level playerPosition.z ); this.model.lookAt(targetPosition); } } followPath(deltaTime) { const currentPoint = this.position; const targetPoint = this.currentPath[this.currentPathIndex]; // Check if target point is in recently visited points if (this.isPointRecentlyVisited(targetPoint)) { this.currentPathIndex++; return; } // Calculate direction vector to target (only x and z components) const direction = new THREE.Vector3( targetPoint.x - currentPoint.x, 0, targetPoint.z - currentPoint.z ); // Calculate distance to current target const distanceToTarget = direction.length(); if (distanceToTarget < this.minWaypointDistance) { // Add current point to recently visited points this.addRecentPoint(targetPoint); // Move to next path point this.currentPathIndex++; } else { // Normalize direction and apply movement speed direction.normalize(); // Calculate movement distance for this frame const moveDistance = this.moveSpeed * deltaTime; // Create new position by adding scaled direction to current position const newPosition = new THREE.Vector3( currentPoint.x + direction.x * moveDistance, this.position.y, // Maintain current height currentPoint.z + direction.z * moveDistance ); this.setPosition(newPosition); } } executeWaitAction(deltaTime, playerPosition) { if (this.model) { // Keep facing the player while waiting, but don't move const targetPosition = new THREE.Vector3( playerPosition.x, this.model.position.y, // Keep the same Y level playerPosition.z ); this.model.lookAt(targetPosition); // Ensure position stays fixed during waiting state this.setPosition(this.position); } } executeAttackAction(deltaTime, playerPosition) { if (this.model) { // Keep facing the player while attacking const targetPosition = new THREE.Vector3( playerPosition.x, this.model.position.y, playerPosition.z ); this.model.lookAt(targetPosition); // Update attack time elapsed (using real time instead of deltaTime) const currentTime = Date.now(); this.attackTimeElapsed = currentTime - this.attackStartTime; } } calculateDirectionToPlayer(playerPosition) { return new THREE.Vector3( playerPosition.x - this.position.x, 0, // Keep y movement at 0 playerPosition.z - this.position.z ); } shouldTransitionState(playerPosition) { const distanceToPlayer = this.calculateDirectionToPlayer(playerPosition).length(); const currentTime = Date.now(); switch (this.currentState) { case APP_SETTINGS.enemyStates.CHASING: // Transition to WAITING if we're close enough to player return distanceToPlayer <= this.settings.startWaitingDistance; case APP_SETTINGS.enemyStates.WAITING: const waitTimeElapsed = currentTime - this.waitStartTime >= this.settings.waitDuration; if (waitTimeElapsed) { if (distanceToPlayer <= this.settings.startWaitingDistance) { // Transition to attacking when wait is done and we're close this.nextState = APP_SETTINGS.enemyStates.ATTACKING; return true; } else { // If we're far, transition to chasing this.nextState = APP_SETTINGS.enemyStates.CHASING; return true; } } return false; case APP_SETTINGS.enemyStates.ATTACKING: const attackTimeElapsed = currentTime - this.attackStartTime; if (attackTimeElapsed >= this.settings.attackDuration) { this.nextState = APP_SETTINGS.enemyStates.WAITING; return true; } return false; default: return false; } } update(deltaTime, playerPosition) { if (!this.model || !playerPosition) { return; } // Update animation mixer if (this.mixer) { this.mixer.update(deltaTime); } // Update state label if (this.stateLabel) { this.stateLabel.update(deltaTime, playerPosition); } const distanceToPlayer = this.calculateDirectionToPlayer(playerPosition).length(); const currentTime = Date.now(); // State transition logic let newState = this.currentState; switch (this.currentState) { case APP_SETTINGS.enemyStates.CHASING: if (distanceToPlayer <= this.settings.startWaitingDistance) { newState = APP_SETTINGS.enemyStates.WAITING; } break; case APP_SETTINGS.enemyStates.WAITING: const waitTimeElapsed = currentTime - this.waitStartTime >= this.settings.waitDuration; if (waitTimeElapsed) { if (distanceToPlayer <= this.settings.startWaitingDistance) { newState = APP_SETTINGS.enemyStates.ATTACKING; } else { newState = APP_SETTINGS.enemyStates.CHASING; } } break; case APP_SETTINGS.enemyStates.ATTACKING: if (this.attackTimeElapsed >= this.settings.attackDuration) { newState = APP_SETTINGS.enemyStates.WAITING; } break; } // Handle state change if needed if (newState !== this.currentState) { this.exitState(this.currentState); this.currentState = newState; this.enterState(this.currentState); } // Execute current state action this.executeStateAction(this.currentState, deltaTime, playerPosition); } updatePath(playerPosition) { if (!this.pathfinder) return; const path = this.pathfinder.findPath(this.position, playerPosition); if (path) { // Filter out recently visited points from the path this.currentPath = path.filter(point => !this.isPointRecentlyVisited(point)); // Always call visualizePath, visibility is handled within the method this.pathfinder.visualizePath(this.currentPath); } } // Add a point to the recently visited points queue addRecentPoint(point) { this.recentPoints.push(new THREE.Vector3(point.x, point.y, point.z)); if (this.recentPoints.length > this.maxRecentPoints) { this.recentPoints.shift(); // Remove oldest point } } // Check if a point has been recently visited isPointRecentlyVisited(point) { return this.recentPoints.some(recentPoint => point.distanceTo(recentPoint) < this.recentPointThreshold ); } dispose() { if (this.stateLabel) { this.stateLabel.dispose(); this.stateLabel = null; } if (this.model) { this.scene.remove(this.model); // Clean up geometries and materials this.model.traverse((child) => { if (child.isMesh) { if (child.geometry) child.geometry.dispose(); if (child.material) { if (Array.isArray(child.material)) { child.material.forEach(material => material.dispose()); } else { child.material.dispose(); } } } }); this.model = null; this.isLoaded = false; } } } class StateLabel { constructor(enemy) { this.enemy = enemy; this.visible = APP_SETTINGS.debug.showEnemyStateLabel; // Create the sprite const canvas = document.createElement('canvas'); canvas.width = 256; canvas.height = 128; this.context = canvas.getContext('2d'); // Create texture from canvas this.texture = new THREE.CanvasTexture(canvas); this.texture.minFilter = THREE.LinearFilter; this.texture.magFilter = THREE.LinearFilter; // Create sprite material const spriteMaterial = new THREE.SpriteMaterial({ map: this.texture, transparent: true }); // Create sprite this.sprite = new THREE.Sprite(spriteMaterial); this.sprite.scale.set(10, 5, 1); WorldScene.add(this.sprite); this.updateLabel(enemy.currentState); } updateLabel(state) { if (!this.visible) return; // Clear canvas this.context.clearRect(0, 0, 256, 128); // Set background this.context.fillStyle = 'rgba(0, 0, 255, 0.5)'; this.context.fillRect(0, 0, 256, 128); // Set text style this.context.fillStyle = 'white'; this.context.font = 'bold 48px Arial'; this.context.textAlign = 'center'; this.context.textBaseline = 'middle'; // Draw state text this.context.fillText(state, 128, 64); // Update texture this.texture.needsUpdate = true; } update(deltaTime, playerPosition) { if (!this.visible || !this.enemy.model) return; // Update position (above enemy) const enemyPosition = this.enemy.model.position.clone(); this.sprite.position.copy(enemyPosition); this.sprite.position.y += 30; // Position above enemy // Update label text if state changed if (this.lastState !== this.enemy.currentState) { this.updateLabel(this.enemy.currentState); this.lastState = this.enemy.currentState; } // Make sprite face camera if (MainCamera) { const cameraPosition = MainCamera.position.clone(); const direction = cameraPosition.sub(this.sprite.position); this.sprite.lookAt(cameraPosition); } } setVisible(visible) { this.visible = visible; this.sprite.visible = visible; } dispose() { if (this.sprite) { if (this.sprite.material) { this.sprite.material.dispose(); } if (this.sprite.material.map) { this.sprite.material.map.dispose(); } WorldScene.remove(this.sprite); } this.enemy = null; this.context = null; this.texture = null; this.sprite = null; } } class Player { constructor(camera) { this.moveSpeed = APP_SETTINGS.controls.playerMoveSpeed; this.velocity = new THREE.Vector3(); this.camera = camera; this.position = new THREE.Vector3(0, 15, 0); // Set to 15 units height offset this.keys = { forward: false, backward: false, left: false, right: false }; this.initKeyBindings(); } getPosition() { return this.position.clone(); } initKeyBindings() { document.addEventListener('keydown', (event) => { switch (event.code) { case 'KeyW': this.keys.forward = true; break; case 'KeyS': this.keys.backward = true; break; case 'KeyA': this.keys.left = true; break; case 'KeyD': this.keys.right = true; break; case 'KeyR': // Get current gun and check if it can be reloaded const currentGun = window.GunManager?.getCurrentGun(); if (currentGun && !currentGun.isReloading && currentGun.currentAmmo < currentGun.maxAmmo) { currentGun.reload(); } break; } }); document.addEventListener('keyup', (event) => { switch (event.code) { case 'KeyW': this.keys.forward = false; break; case 'KeyS': this.keys.backward = false; break; case 'KeyA': this.keys.left = false; break; case 'KeyD': this.keys.right = false; break; } }); } update(deltaTime) { // Reset velocity this.velocity.set(0, 0, 0); // Get movement directions based on camera orientation const forward = window.CameraControl.getForwardVector(); const right = window.CameraControl.getRightVector(); // Remove vertical component for horizontal-only movement forward.y = 0; right.y = 0; forward.normalize(); right.normalize(); // Calculate movement based on key states if (this.keys.forward) this.velocity.add(forward.multiplyScalar(this.moveSpeed)); if (this.keys.backward) this.velocity.sub(forward.multiplyScalar(this.moveSpeed)); if (this.keys.right) this.velocity.add(right.multiplyScalar(this.moveSpeed)); if (this.keys.left) this.velocity.sub(right.multiplyScalar(this.moveSpeed)); // Apply movement this.position.addScaledVector(this.velocity, deltaTime); // Update camera position this.camera.position.copy(this.position); } } class TileMap { constructor(params) { if (!params) { throw new Error('TileMap: params object is required'); } // Validate required dependencies if (!params.THREE) { throw new Error('TileMap: THREE dependency is required'); } if (!params.settings) { throw new Error('TileMap: settings object is required'); } if (!params.Materials) { throw new Error('TileMap: Materials dependency is required'); } // Store dependencies this.THREE = params.THREE; this.settings = params.settings; this.Materials = params.Materials; this.width = this.settings.tilemap.width; this.height = this.settings.tilemap.height; this.tileSize = this.settings.tilemap.tileSize; this.tiles = []; this.mapMesh = new this.THREE.Group(); this.occupiedPositions = new Set(); this.navMesh = null; this.createTiles(); } createTiles() { if (!this.Materials || !this.THREE) { throw new Error('TileMap: Required dependencies not available for tile creation'); } for (let x = 0; x < this.width; x++) { for (let z = 0; z < this.height; z++) { const tileX = (x - this.width / 2 + 0.5) * this.tileSize; const tileZ = (z - this.height / 2 + 0.5) * this.tileSize; const tile = new Tile({ THREE: this.THREE, Materials: this.Materials, x: tileX, z: tileZ, size: this.tileSize, materialSettings: this.settings.tilemap.tileMaterial || { color: 0xFFFFFF, roughness: 0.7, metalness: 0.3 } }); this.tiles.push(tile); this.mapMesh.add(tile.mesh); } } } getTileAt(x, z) { return this.tiles[x * this.height + z]; } render() { return this.mapMesh; } createGridLines() { if (!this.THREE) { throw new Error('TileMap: THREE dependency required for grid line creation'); } const material = new this.THREE.LineBasicMaterial({ color: this.settings.tilemap.gridColor || 0x000000 }); const points = []; for (let x = 0; x <= this.width; x++) { const xPos = (x - this.width / 2) * this.tileSize; points.push(new THREE.Vector3(xPos, 0.1, -this.height * this.tileSize / 2)); points.push(new THREE.Vector3(xPos, 0.1, this.height * this.tileSize / 2)); } for (let z = 0; z <= this.height; z++) { const zPos = (z - this.height / 2) * this.tileSize; points.push(new THREE.Vector3(-this.width * this.tileSize / 2, 0.1, zPos)); points.push(new THREE.Vector3(this.width * this.tileSize / 2, 0.1, zPos)); } const geometry = new THREE.BufferGeometry().setFromPoints(points); return new THREE.LineSegments(geometry, material); } worldToGridPosition(worldX, worldZ) { const gridX = Math.floor((worldX + (this.width * this.tileSize) / 2) / this.tileSize); const gridZ = Math.floor((worldZ + (this.height * this.tileSize) / 2) / this.tileSize); return { x: gridX, z: gridZ }; } gridToWorldPosition(gridX, gridZ) { const worldX = (gridX - this.width / 2 + 0.5) * this.tileSize; const worldZ = (gridZ - this.height / 2 + 0.5) * this.tileSize; return { x: worldX, z: worldZ }; } isTileOccupied(gridX, gridZ) { return this.occupiedPositions.has(`${gridX},${gridZ}`); } markTileOccupied(gridX, gridZ) { const key = `${gridX},${gridZ}`; if (!this.occupiedPositions.has(key)) { this.occupiedPositions.add(key); console.log(`Tile marked as occupied at grid position (${gridX}, ${gridZ})`); } } placeObstacle() { const randomX = Math.floor(Math.random() * this.width); const randomZ = Math.floor(Math.random() * this.height); const worldPos = this.gridToWorldPosition(randomX, randomZ); try { const obstacle = new Obstacle({ THREE: THREE, position: new THREE.Vector3(worldPos.x, this.height / 2 + 0.05, worldPos.z), settings: APP_SETTINGS }); if (obstacle.mesh) { this.mapMesh.add(obstacle.mesh); this.markTileOccupied(randomX, randomZ); return { x: randomX, z: randomZ, obstacle: obstacle }; } } catch (error) { console.error('Error creating obstacle:', error); return null; } } toggleNavMeshVisualization() { if (this.navMesh) { if (this.navMesh.visualElements.visible) { this.navMesh.visualElements.visible = false; } else { this.navMesh.visualElements.visible = true; } } } initNavMesh() { if (this.navMesh) { this.navMesh.dispose(); } this.navMesh = new NavMesh({ THREE: THREE, tileMap: this, settings: this.settings, width: this.width, height: this.height, tileSize: this.tileSize }); console.log('NavMesh initialized after obstacle placement'); } placeObstacles(count) { const occupiedPositions = new Set(); for (let i = 0; i < count; i++) { let position; do { position = this.placeObstacle(); } while (occupiedPositions.has(`${position.x},${position.z}`)); occupiedPositions.add(`${position.x},${position.z}`); } } } class AStar { constructor(tileMap) { this.tileMap = tileMap; this.navMesh = tileMap.navMesh; this.pathVisual = new THREE.Group(); this.pathVisual.visible = false; // Initialize as invisible WorldScene.add(this.pathVisual); } findNearestNode(position) { if (!position || !this.navMesh || !this.navMesh.points) { return null; } let nearestNode = null; let minDistance = Infinity; for (const node of this.navMesh.points) { if (node) { const distance = position.distanceTo(node); if (distance < minDistance) { minDistance = distance; nearestNode = node; } } } return nearestNode; } heuristic(a, b) { if (!a || !b) return Infinity; return a.distanceTo(b); } getNeighbors(node) { if (!node || !this.navMesh || !this.navMesh.points) { return []; } const neighbors = []; const maxDistance = this.tileMap.tileSize * 1.25; for (const point of this.navMesh.points) { if (point && point !== node) { const distance = node.distanceTo(point); if (distance <= maxDistance) { neighbors.push(point); } } } return neighbors; } findPath(start, goal) { const startNode = this.findNearestNode(start); const goalNode = this.findNearestNode(goal); if (!startNode || !goalNode) return null; const openSet = new Set([startNode]); const closedSet = new Set(); const cameFrom = new Map(); const gScore = new Map(); const fScore = new Map(); gScore.set(startNode, 0); fScore.set(startNode, this.heuristic(startNode, goalNode)); while (openSet.size > 0) { let current = null; let lowestFScore = Infinity; for (const node of openSet) { const score = fScore.get(node) || Infinity; if (score < lowestFScore) { lowestFScore = score; current = node; } } if (current === goalNode) { return this.reconstructPath(cameFrom, current); } openSet.delete(current); closedSet.add(current); for (const neighbor of this.getNeighbors(current)) { if (closedSet.has(neighbor)) continue; const tentativeGScore = (gScore.get(current) || 0) + current.distanceTo(neighbor); if (!openSet.has(neighbor)) { openSet.add(neighbor); } else if (tentativeGScore >= (gScore.get(neighbor) || 0)) { continue; } cameFrom.set(neighbor, current); gScore.set(neighbor, tentativeGScore); fScore.set(neighbor, tentativeGScore + this.heuristic(neighbor, goalNode)); } } return null; } reconstructPath(cameFrom, current) { const path = [current]; while (cameFrom.has(current)) { current = cameFrom.get(current); path.unshift(current); } return path; } visualizePath(path) { // Clear previous visualization while (this.pathVisual.children.length > 0) { const child = this.pathVisual.children[0]; if (child.geometry) child.geometry.dispose(); if (child.material) child.material.dispose(); this.pathVisual.remove(child); } // Update visibility based on settings this.pathVisual.visible = APP_SETTINGS.controls.showEnemyPath; if (!path || path.length < 2) return; // Create line visualization const points = path.map(point => new THREE.Vector3(point.x, point.y + 1, point.z)); const geometry = new THREE.BufferGeometry().setFromPoints(points); const material = new THREE.LineBasicMaterial({ color: 0x00ff00, linewidth: 3 }); const line = new THREE.Line(geometry, material); this.pathVisual.add(line); // Add spheres at path points const sphereGeometry = new THREE.SphereGeometry(0.5, 8, 8); const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0x00ff00 }); points.forEach(point => { const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); sphere.position.copy(point); this.pathVisual.add(sphere); }); } togglePathVisibility(visible) { this.pathVisual.visible = visible; } dispose() { while (this.pathVisual.children.length > 0) { const child = this.pathVisual.children[0]; if (child.geometry) child.geometry.dispose(); if (child.material) child.material.dispose(); this.pathVisual.remove(child); } WorldScene.remove(this.pathVisual); } } class NavMesh { constructor(params) { if (!params) { throw new Error('NavMesh: params object is required'); } // Validate required dependencies if (!params.THREE) { throw new Error('NavMesh: THREE dependency is required'); } if (!params.tileMap) { throw new Error('NavMesh: tileMap is required'); } if (!params.settings) { throw new Error('NavMesh: settings object is required'); } // Store dependencies this.THREE = params.THREE; this.tileMap = params.tileMap; this.settings = params.settings; // Initialize properties this.points = []; this.visualElements = new this.THREE.Group(); this.visualElements.visible = this.settings.controls.showNavMesh; this.pointSize = 1.5; this.pointColor = 0xff0000; this.lineColor = 0xffff00; this.generateGrid(); this.createVisualization(); window.WorldScene.add(this.visualElements); } isCornerOfOccupiedTile(gridX, gridZ) { // Check all four tiles that share this corner const tilesToCheck = [{ x: gridX - 1, z: gridZ - 1 }, { x: gridX - 1, z: gridZ }, { x: gridX, z: gridZ - 1 }, { x: gridX, z: gridZ }]; // If any of these tiles are occupied, this is a corner of an occupied tile return tilesToCheck.some(tile => tile.x >= 0 && tile.x < this.tileMap.width && tile.z >= 0 && tile.z < this.tileMap.height && this.tileMap.isTileOccupied(tile.x, tile.z) ); } generateGrid() { const tileSize = this.tileMap.tileSize; const width = this.tileMap.width; const height = this.tileMap.height; // Generate points at tile corners (intersections) for (let x = 0; x <= width; x++) { for (let z = 0; z <= height; z++) { if (!this.isCornerOfOccupiedTile(x, z)) { const xPos = (x - width / 2) * tileSize; const zPos = (z - height / 2) * tileSize; this.addPoint(xPos, zPos, 5); } } } // Generate points at tile centers (only for unoccupied tiles) for (let x = 0; x < width; x++) { for (let z = 0; z < height; z++) { if (!this.tileMap.isTileOccupied(x, z)) { const worldPos = this.tileMap.gridToWorldPosition(x, z); this.addPoint(worldPos.x, worldPos.z, 5); } } } } hasAdjacentOccupiedTile(x, z) { const adjacentTiles = [{ x: x - 1, z: z }, // Left { x: x + 1, z: z }, // Right { x: x, z: z - 1 }, // Front { x: x, z: z + 1 }, // Back { x: x - 1, z: z - 1 }, // Diagonal Front-Left { x: x + 1, z: z - 1 }, // Diagonal Front-Right { x: x - 1, z: z + 1 }, // Diagonal Back-Left { x: x + 1, z: z + 1 } // Diagonal Back-Right ]; return adjacentTiles.some(tile => tile.x >= 0 && tile.x < this.tileMap.width && tile.z >= 0 && tile.z < this.tileMap.height && this.tileMap.isTileOccupied(tile.x, tile.z) ); } addPoint(x, z, y) { const point = new THREE.Vector3(x, y, z); this.points.push(point); } createVisualization() { // Remove existing visualization this.removeVisualization(); // Create points visualization const pointGeometry = new this.THREE.SphereGeometry(this.pointSize, 8, 8); const pointMaterial = new this.THREE.MeshBasicMaterial({ color: this.pointColor }); this.points.forEach(point => { const pointMesh = new this.THREE.Mesh(pointGeometry, pointMaterial); pointMesh.position.copy(point); this.visualElements.add(pointMesh); }); // Log the number of points created console.log(`NavMesh: Created ${this.points.length} navigation points`); // Create lines between adjacent points const lineMaterial = new this.THREE.LineBasicMaterial({ color: this.lineColor, linewidth: 3 // Note: linewidth only works in WebGLRenderer with certain conditions }); const tileSize = this.tileMap.tileSize; for (let i = 0; i < this.points.length; i++) { for (let j = i + 1; j < this.points.length; j++) { const distance = this.points[i].distanceTo(this.points[j]); if (distance <= tileSize * 1.5) { // Connect points within reasonable distance const lineGeometry = new this.THREE.BufferGeometry().setFromPoints([ this.points[i], this.points[j] ]); const line = new this.THREE.Line(lineGeometry, lineMaterial); this.visualElements.add(line); } } } } removeVisualization() { while (this.visualElements.children.length > 0) { const child = this.visualElements.children[0]; if (child.geometry) child.geometry.dispose(); if (child.material) child.material.dispose(); this.visualElements.remove(child); } } dispose() { this.removeVisualization(); window.WorldScene.remove(this.visualElements); this.points = []; } } class Obstacle { constructor(params) { if (!params) { throw new Error('Obstacle: params object is required'); } // Validate required dependencies if (!params.THREE) { throw new Error('Obstacle: THREE dependency is required'); } if (!params.position || !params.position instanceof params.THREE.Vector3) { throw new Error('Obstacle: Valid position Vector3 is required'); } if (!params.settings || !params.settings.obstacles || !params.settings.tilemap) { throw new Error('Obstacle: Valid settings object is required'); } // Store dependencies this.THREE = params.THREE; this.position = params.position; this.settings = params.settings; // Initialize properties this.tileSize = this.settings.tilemap.tileSize; this.height = this.settings.obstacles.height; this.mesh = null; // Create the mesh try { this.mesh = this.createMesh(); } catch (error) { console.error('Obstacle: Error creating mesh:', error); throw error; } } createMesh() { const geometry = new this.THREE.BoxGeometry( this.tileSize, this.height, this.tileSize ); const material = new this.THREE.MeshStandardMaterial({ color: this.settings.obstacles.material.color, roughness: this.settings.obstacles.material.roughness, metalness: this.settings.obstacles.material.metalness }); const mesh = new this.THREE.Mesh(geometry, material); mesh.position.copy(this.position); mesh.castShadow = true; mesh.receiveShadow = true; return mesh; } dispose() { if (this.mesh) { if (this.mesh.geometry) { this.mesh.geometry.dispose(); } if (this.mesh.material) { this.mesh.material.dispose(); } } } } class TileMapGenerator { constructor(params) { if (!params) { throw new Error('TileMapGenerator: params object is required'); } if (!params.settings) { throw new Error('TileMapGenerator: settings object is required'); } if (!params.THREE) { throw new Error('TileMapGenerator: THREE dependency is required'); } if (!params.Materials) { throw new Error('TileMapGenerator: Materials dependency is required'); } this.settings = params.settings; this.THREE = params.THREE; this.Materials = params.Materials; } generateMap() { const tileMap = new TileMap({ THREE: this.THREE, Materials: this.Materials, settings: this.settings }); // Place obstacles first tileMap.placeObstacles(APP_SETTINGS.tilemap.obstacleCount); // Initialize NavMesh after obstacles are placed tileMap.initNavMesh(); return tileMap; } } class App { constructor() { this.createRenderDivs(); this.clock = new THREE.Clock(); this.initialLoadingComplete = false; this.spriteSheet = null; this.deltaTime = 0; this.init(); } loadScript(url) { return new Promise((resolve, reject) => { if (document.querySelector(`script[src="${url}"]`)) { resolve(); return; } var script = document.createElement('script'); script.type = 'text/javascript'; script.src = url; script.onload = () => resolve(); script.onerror = () => reject(new Error('Script loading failed for ' + url)); document.head.appendChild(script); }); } async loadScripts() { try { for (const script of SCRIPT_ASSETS) { await this.loadScript(script.url); console.log(`Script loaded: ${script.name}`); } } catch (error) { console.error('Error loading scripts:', error); } } async init() { // Load external scripts first await this.loadScripts(); window.LoadingManager = new THREE.LoadingManager(); this.setupLoadingManager(); window.Textures = TextureManager(); window.Materials = MaterialManager(); window.Meshes = MeshManager(); window.Lights = LightingManager(); window.ModelLoader = new ModelLoader(); window.GameWorld = new World(); window.AudioPlayer = new AudioPlayer({ THREE: THREE, camera: MainCamera, LoadingManager: window.LoadingManager, soundAssets: SOUND_ASSETS }); window.Input = new InputHandler(); window.CameraControl = new CameraController({ THREE: THREE, camera: MainCamera, settings: APP_SETTINGS }); window.Player = new Player(MainCamera); window.GunManager = new GunManager(WorldScene, MainCamera); // Create AmmoDisplay with proper parameters window.AmmoDisplay = new AmmoDisplay({ uiContainer: window.uiDiv, position: { left: '20px', bottom: '20px' }, style: { backgroundColor: 'rgba(0, 0, 0, 0.5)', padding: '10px', borderRadius: '5px' }, iconSize: { width: '24px', height: '24px' }, textStyle: { color: 'white', fontSize: '20px', fontFamily: 'Arial, sans-serif' } }); // Only create enemy if enabled in settings if (APP_SETTINGS.controls.createEnemyOnStart) { window.Enemy = new Enemy(WorldScene); window.Enemy.loadModel().then(() => { console.log('Enemy initialized and loaded'); }); } // Load initial SMG window.GunManager.switchGun('smg').then(() => { console.log('Initial SMG loaded'); }); // Create crosshair with parameters window.Crosshair = new Crosshair({ uiContainer: window.uiDiv, initialColor: '#ff0000', initialSize: 20, initialThickness: 2 }); // Wait for textures to load before creating UI elements this.waitForTexturesAndInitUI(); this.addEventListeners(); } waitForTexturesAndInitUI() { Promise.all([ Textures.loadTextures(), window.AudioPlayer.loadSoundAssets() ]).then(() => { if (Textures.texturesLoaded) { GameWorld.createTilemap(); console.log('All assets loaded successfully'); } }).catch(error => { console.error('Error loading assets:', error); setTimeout(() => this.waitForTexturesAndInitUI(), 100); }); } setupLoadingManager() { LoadingManager.onProgress = (url, itemsLoaded, itemsTotal) => { const progress = (itemsLoaded / itemsTotal * 100).toFixed(0); loadingScreen.innerHTML = `Loading... ${progress}%`; }; LoadingManager.onLoad = () => { this.initialLoadingComplete = true; loadingScreen.style.display = 'none'; if (GameWorld) { // Check if the skybox has been loaded if (GameWorld.skybox.skyMesh) { console.log("Skybox loaded successfully"); } else { console.warn("Skybox not loaded yet"); } } }; LoadingManager.onError = (url) => { console.error('Error loading:', url); }; } addEventListeners() { addEventListener('resize', this.onWindowResize.bind(this)); const resizeObserver = new ResizeObserver(this.onWindowResize.bind(this)); resizeObserver.observe(parentDiv); } onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; if (GameWorld) { if (GameWorld.skybox && GameWorld.skybox.shaderMaterial) { GameWorld.skybox.shaderMaterial.uniforms.iResolution.value.set(width, height); } MainCamera.aspect = width / height; MainCamera.updateProjectionMatrix(); GameRenderer.setSize(width, height); } } animate() { requestAnimationFrame(this.animate.bind(this)); this.deltaTime = Math.min(this.clock.getDelta(), 0.1); if (this.initialLoadingComplete) { GameWorld.update(this.deltaTime); CameraControl.update(); window.Player.update(this.deltaTime); Input.update(); window.GunManager.update(this.deltaTime); // Update enemy if it's loaded if (APP_SETTINGS.controls.createEnemyOnStart && window.Enemy && window.Enemy.isLoaded) { const playerPosition = window.Player.getPosition(); window.Enemy.update(this.deltaTime, playerPosition); } if (this.worldClock) { this.worldClock.update(GameWorld.Time); } else { //console.warn('WorldClock not initialized'); } } } start() { this.animate(); } createRenderDivs() { // Can create global variables by assigning them to window.variableName. window.parentDiv = document.getElementById('renderDiv'); window.canvas = document.getElementById('threeRenderCanvas'); window.loadingScreen = document.createElement('div'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create loading screen loadingScreen.style.position = 'absolute'; loadingScreen.style.top = '0'; loadingScreen.style.left = '0'; loadingScreen.style.width = '100%'; loadingScreen.style.height = '100%'; loadingScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.8)'; loadingScreen.style.color = 'white'; loadingScreen.style.display = 'flex'; loadingScreen.style.justifyContent = 'center'; loadingScreen.style.alignItems = 'center'; loadingScreen.style.fontSize = '24px'; loadingScreen.innerHTML = 'Loading... 0%'; parentDiv.appendChild(loadingScreen); window.uiDiv = document.createElement('div'); uiDiv.id = 'uiDiv'; uiDiv.style.position = 'absolute'; uiDiv.style.top = '0'; uiDiv.style.left = '0'; uiDiv.style.width = '100%'; uiDiv.style.height = '100%'; uiDiv.style.pointerEvents = 'none'; // Set to 'none' to allow events to pass through uiDiv.style.userSelect = 'none'; // Disable text selection uiDiv.style.webkitUserSelect = 'none'; // For Safari uiDiv.style.msUserSelect = 'none'; // For IE/Edge // Apply the same styles to parentDiv parentDiv.style.userSelect = 'none'; parentDiv.style.webkitUserSelect = 'none'; parentDiv.style.msUserSelect = 'none'; parentDiv.appendChild(uiDiv); } } window.Game = new App(); Game.start();