// Import necessary modules import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; import { FontLoader } from 'three/addons/loaders/FontLoader.js'; import { TextGeometry } from 'three/addons/geometries/TextGeometry.js'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.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'; // Initialize loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); const gltfLoader = new GLTFLoader(loadingManager); let assetsLoaded = false; // Optionally, add URL remapping if needed loadingManager.setURLModifier((url) => { if (url.includes('Textures/colormap.png')) { return 'https://play.rosebud.ai/assets/3D_playground_character_colormap.png?b3Bg'; } return url; }); const parentDiv = document.getElementById('renderDiv'); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create chat container const chatContainer = document.createElement('div'); chatContainer.style.position = 'absolute'; chatContainer.style.bottom = '20px'; chatContainer.style.left = '20px'; chatContainer.style.width = '400px'; chatContainer.style.maxHeight = '200px'; chatContainer.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; chatContainer.style.borderRadius = '5px'; chatContainer.style.padding = '10px'; chatContainer.style.display = 'flex'; chatContainer.style.flexDirection = 'column'; chatContainer.style.zIndex = '1000'; // Create chat messages container const chatMessages = document.createElement('div'); chatMessages.style.overflowY = 'auto'; chatMessages.style.marginBottom = '10px'; chatMessages.style.maxHeight = '150px'; chatMessages.style.color = 'white'; chatMessages.style.fontFamily = 'Arial, sans-serif'; chatMessages.style.fontSize = '14px'; chatContainer.appendChild(chatMessages); // Create chat input const chatInput = document.createElement('input'); chatInput.type = 'text'; chatInput.style.width = '100%'; chatInput.style.padding = '5px'; chatInput.style.backgroundColor = 'rgba(255, 255, 255, 0.9)'; chatInput.style.border = 'none'; chatInput.style.borderRadius = '3px'; chatInput.style.display = 'none'; chatContainer.appendChild(chatInput); parentDiv.appendChild(chatContainer); // Create loading screen const loadingScreen = document.createElement('div'); 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); // Create title screen const titleScreen = document.createElement('div'); titleScreen.style.position = 'absolute'; titleScreen.style.top = '0'; titleScreen.style.left = '0'; titleScreen.style.width = '100%'; titleScreen.style.height = '100%'; titleScreen.style.backgroundColor = 'rgba(0, 0, 0, 0.85)'; titleScreen.style.color = 'white'; titleScreen.style.display = 'flex'; titleScreen.style.flexDirection = 'column'; titleScreen.style.justifyContent = 'center'; titleScreen.style.alignItems = 'center'; titleScreen.style.fontSize = '24px'; titleScreen.style.fontFamily = 'Arial, sans-serif'; titleScreen.style.zIndex = '1000'; // Add title and controls information titleScreen.innerHTML = `

Village Adventure

Controls:

Movement:

WASD - Move around

SPACE - Jump

Mouse - Look around

Interactions:

E - Interact/Play dice game

Q - Talk to NPCs/Get quests

ENTER - Open chat

Interface:

I - Toggle inventory

L - Toggle quest log

M - Toggle map

System:

P/ESC - Save game

1-9 - Use inventory items

/help - Show commands

Click anywhere to start

`; parentDiv.appendChild(titleScreen); // Handle title screen click // Handle new game and load game buttons document.getElementById('newGameBtn').addEventListener('click', () => { startNewGame(); titleScreen.style.display = 'none'; canvas.requestPointerLock(); }); document.getElementById('loadGameBtn').addEventListener('click', () => { loadGame(); titleScreen.style.display = 'none'; canvas.requestPointerLock(); }); // Loading manager events loadingManager.onProgress = function(url, itemsLoaded, itemsTotal) { const progress = ((itemsLoaded / itemsTotal) * 100).toFixed(0); loadingScreen.innerHTML = `Loading... ${progress}%`; }; loadingManager.onLoad = function() { assetsLoaded = true; loadingScreen.style.display = 'none'; }; loadingManager.onError = function(url) { console.error('Error loading:', url); }; // Initialize the scene const scene = new THREE.Scene(); // Add exponential fog for smoother distance fade scene.fog = new THREE.FogExp2(0x87ceeb, 0.00025); const world = new CANNON.World(); world.gravity.set(0, -20, 0); world.defaultContactMaterial.friction = 0.01; // Reduced global friction world.defaultContactMaterial.restitution = 0; // No bounce by default world.solver.iterations = 10; world.solver.tolerance = 0.001; function randomBetween(min, max) { return Math.random() * (max - min) + min; } // Noise function for terrain generation function noise(nx, ny) { return Math.sin(nx) * Math.cos(ny) * 0.5 + Math.sin(nx * 2) * Math.cos(ny * 2) * 0.25 + Math.sin(nx * 4) * Math.cos(ny * 4) * 0.125; } // Create mountain function createMountain(x, z, height, radius) { const mountain = new THREE.Group(); const geometry = new THREE.ConeGeometry(radius, height, 8); const material = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.9, metalness: 0.1 }); const mesh = new THREE.Mesh(geometry, material); mesh.position.set(0, height / 2, 0); mesh.castShadow = true; mesh.receiveShadow = true; mountain.add(mesh); mountain.position.set(x, 0, z); // Add physics const shape = new CANNON.Cylinder(radius, 0, height, 8); const body = new CANNON.Body({ mass: 0, material: groundPhysMaterial, shape: shape }); body.position.set(x, height / 2, z); world.addBody(body); return mountain; } // Create desert dune function createDune(x, z, size) { const dune = new THREE.Group(); const geometry = new THREE.SphereGeometry(size, 32, 16, 0, Math.PI * 2, 0, Math.PI * 0.5); const material = new THREE.MeshStandardMaterial({ color: 0xd2b48c, roughness: 1.0, metalness: 0.0 }); const mesh = new THREE.Mesh(geometry, material); mesh.position.set(0, 0, 0); mesh.receiveShadow = true; dune.add(mesh); dune.position.set(x, 0, z); // Add physics const shape = new CANNON.Sphere(size); const body = new CANNON.Body({ mass: 0, material: groundPhysMaterial, shape: shape }); body.position.set(x, size / 2, z); world.addBody(body); return dune; } // Create rock formation function createRock(x, z) { const rock = new THREE.Group(); const size = randomBetween(2, 5); const geometry = new THREE.DodecahedronGeometry(size, 1); const material = new THREE.MeshStandardMaterial({ color: 0x696969, roughness: 0.8, metalness: 0.2 }); const mesh = new THREE.Mesh(geometry, material); mesh.position.set(0, size / 2, 0); mesh.castShadow = true; mesh.receiveShadow = true; rock.add(mesh); rock.position.set(x, 0, z); // Add physics const shape = new CANNON.Box(new CANNON.Vec3(size * 0.8, size * 0.8, size * 0.8)); const body = new CANNON.Body({ mass: 0, material: groundPhysMaterial, shape: shape }); body.position.set(x, size / 2, z); world.addBody(body); return rock; } // Define physics materials const groundPhysMaterial = new CANNON.Material('ground'); const clock = new THREE.Clock(); // Initialize the camera const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 6000 // Increased far plane for better distance rendering ); // Adjusted camera position camera.position.set(0, 15, 30); camera.lookAt(0, 0, 0); // Camera settings for first person view const cameraSettings = { height: 4.5, // Eye height from ground smoothSpeed: 0.1, rotationSpeed: 0.5, minPolarAngle: 0.1, maxPolarAngle: Math.PI - 0.1, sensitivity: 0.002, // Mouse look sensitivity }; // Initialize the renderer with HDR const renderer = new THREE.WebGLRenderer({ antialias: true, canvas: canvas, powerPreference: 'high-performance', }); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(canvas.offsetWidth, canvas.offsetHeight); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.outputEncoding = THREE.sRGBEncoding; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.2; // Initialize post-processing const composer = new EffectComposer(renderer); // Regular scene render pass const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); // Add subtle bloom effect const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.2, // bloom strength 0.4, // radius 0.9 // threshold ); composer.addPass(bloomPass); // Add anti-aliasing const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); composer.addPass(smaaPass); // Initialize composer size composer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // Define sky colors for environmental lighting const skyColor = new THREE.Color(0x87ceeb); // Bright sky blue const groundColor = new THREE.Color(0xffffff); // White ground reflection // Create sky dome with improved colors 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: skyColor }, bottomColor: { value: groundColor }, offset: { value: 33 }, exponent: { value: 0.6 }, }; const skyGeo = new THREE.SphereGeometry(1800, 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); // Setup first person controls let yaw = 0; let pitch = 0; // Lock pointer for first person view canvas.addEventListener('click', () => { if (titleScreen.style.display === 'none') { canvas.requestPointerLock(); } }); // Mouse move handler for first person view document.addEventListener('mousemove', (event) => { if (document.pointerLockElement === canvas && titleScreen.style.display === 'none') { yaw -= event.movementX * cameraSettings.sensitivity; pitch -= event.movementY * cameraSettings.sensitivity; // Clamp pitch to prevent camera flipping pitch = Math.max(-Math.PI / 2 + 0.1, Math.min(Math.PI / 2 - 0.1, pitch)); } }); // Create world terrain function createGround() { const size = 6000; const segments = 1; // Create simple flat ground geometry const geometry = new THREE.PlaneGeometry(size, size, segments, segments); // Load and apply textures with optimized settings const texture = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_diffuse.png?CEVh'); const normalMap = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_normal.png?oF66'); // Basic texture settings texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(200, 200); texture.encoding = THREE.sRGBEncoding; texture.anisotropy = 4; normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping; normalMap.repeat.set(200, 200); normalMap.anisotropy = 4; // Simple material settings for better performance const material = new THREE.MeshStandardMaterial({ map: texture, normalMap: normalMap, normalScale: new THREE.Vector2(1, 1), roughness: 0.8, metalness: 0.0, side: THREE.FrontSide }); const ground = new THREE.Mesh(geometry, material); ground.rotation.x = -Math.PI / 2; ground.receiveShadow = true; scene.add(ground); // Simple flat ground physics const groundShape = new CANNON.Plane(); const groundBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial, shape: groundShape }); // Rotate the physics body to match the visual mesh groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0); world.addBody(groundBody); return ground; } // Create basic house function createHouse(x, z, rotation = 0) { const house = new THREE.Group(); // House base (cube) const baseGeometry = new THREE.BoxGeometry(8, 6, 8); const baseMaterial = new THREE.MeshStandardMaterial({ color: 0xcccccc, roughness: 0.7, metalness: 0.1 }); const base = new THREE.Mesh(baseGeometry, baseMaterial); base.position.y = 3; base.castShadow = true; base.receiveShadow = true; // Roof (pyramid) const roofGeometry = new THREE.ConeGeometry(6, 4, 4); const roofMaterial = new THREE.MeshStandardMaterial({ color: 0x8b4513, roughness: 0.8, metalness: 0.1 }); const roof = new THREE.Mesh(roofGeometry, roofMaterial); roof.position.y = 8; roof.rotation.y = Math.PI / 4; roof.castShadow = true; // Add door const doorGeometry = new THREE.PlaneGeometry(2, 3); const doorMaterial = new THREE.MeshStandardMaterial({ color: 0x4a3520, roughness: 0.9, metalness: 0.1 }); const door = new THREE.Mesh(doorGeometry, doorMaterial); door.position.z = 4.01; door.position.y = 1.5; // Add windows const windowGeometry = new THREE.PlaneGeometry(1.5, 1.5); const windowMaterial = new THREE.MeshStandardMaterial({ color: 0x87ceeb, roughness: 0.3, metalness: 0.8 }); const window1 = new THREE.Mesh(windowGeometry, windowMaterial); window1.position.set(-2, 3.5, 4.01); const window2 = new THREE.Mesh(windowGeometry, windowMaterial); window2.position.set(2, 3.5, 4.01); house.add(base, roof, door, window1, window2); // Position and rotate the house house.position.set(x, 0, z); house.rotation.y = rotation; // Add physics const houseShape = new CANNON.Box(new CANNON.Vec3(4, 3, 4)); const houseBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial }); houseBody.addShape(houseShape); houseBody.position.set(x, 3, z); houseBody.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), rotation); world.addBody(houseBody); return house; } // Create dice for the game function createDice() { const dice = new THREE.Group(); // Create dice cube const diceGeometry = new THREE.BoxGeometry(1.5, 1.5, 1.5); const diceMaterial = new THREE.MeshPhysicalMaterial({ color: 0xeeeeee, roughness: 0.2, metalness: 0.1, clearcoat: 0.8, clearcoatRoughness: 0.2 }); const diceMesh = new THREE.Mesh(diceGeometry, diceMaterial); diceMesh.castShadow = true; diceMesh.receiveShadow = true; // Add dot patterns for numbers const dotGeometry = new THREE.CircleGeometry(0.15, 16); const dotMaterial = new THREE.MeshStandardMaterial({ color: 0x000000, roughness: 0.4, metalness: 0.1 }); // Define dot positions for each face const dotPositions = { front: [ // Face 1 [0, 0, 0.76] ], right: [ // Face 2 [-0.25, 0.25, 0.76], [0.25, -0.25, 0.76] ], top: [ // Face 3 [-0.25, 0.25, 0.76], [0, 0, 0.76], [0.25, -0.25, 0.76] ], bottom: [ // Face 4 [-0.25, 0.25, 0.76], [0.25, 0.25, 0.76], [-0.25, -0.25, 0.76], [0.25, -0.25, 0.76] ], left: [ // Face 5 [-0.25, 0.25, 0.76], [0.25, 0.25, 0.76], [0, 0, 0.76], [-0.25, -0.25, 0.76], [0.25, -0.25, 0.76] ], back: [ // Face 6 [-0.25, 0.25, 0.76], [0.25, 0.25, 0.76], [-0.25, 0, 0.76], [0.25, 0, 0.76], [-0.25, -0.25, 0.76], [0.25, -0.25, 0.76] ] }; // Add dots to faces // Front face (1) const frontGroup = new THREE.Group(); dotPositions.front.forEach(pos => { const dot = new THREE.Mesh(dotGeometry, dotMaterial); dot.position.set(pos[0], pos[1], pos[2]); frontGroup.add(dot); }); dice.add(frontGroup); // Back face (6) const backGroup = new THREE.Group(); dotPositions.back.forEach(pos => { const dot = new THREE.Mesh(dotGeometry, dotMaterial); dot.position.set(pos[0], pos[1], -pos[2]); dot.rotation.y = Math.PI; backGroup.add(dot); }); dice.add(backGroup); // Right face (2) const rightGroup = new THREE.Group(); dotPositions.right.forEach(pos => { const dot = new THREE.Mesh(dotGeometry, dotMaterial); dot.position.set(0.76, pos[1], -pos[0]); dot.rotation.y = Math.PI / 2; rightGroup.add(dot); }); dice.add(rightGroup); // Left face (5) const leftGroup = new THREE.Group(); dotPositions.left.forEach(pos => { const dot = new THREE.Mesh(dotGeometry, dotMaterial); dot.position.set(-0.76, pos[1], pos[0]); dot.rotation.y = -Math.PI / 2; leftGroup.add(dot); }); dice.add(leftGroup); // Top face (3) const topGroup = new THREE.Group(); dotPositions.top.forEach(pos => { const dot = new THREE.Mesh(dotGeometry, dotMaterial); dot.position.set(pos[0], 0.76, -pos[1]); dot.rotation.x = -Math.PI / 2; topGroup.add(dot); }); dice.add(topGroup); // Bottom face (4) const bottomGroup = new THREE.Group(); dotPositions.bottom.forEach(pos => { const dot = new THREE.Mesh(dotGeometry, dotMaterial); dot.position.set(pos[0], -0.76, pos[1]); dot.rotation.x = Math.PI / 2; bottomGroup.add(dot); }); dice.add(bottomGroup); dice.add(diceMesh); return dice; } // Create enemy for dice game // Global NPC types configuration const npcTypes = { default: { color: 0xff0000, height: 5, width: 3, reward: 1 }, merchant: { color: 0x4169e1, height: 5.5, width: 3.5, reward: 2 }, warrior: { color: 0x8b4513, height: 6, width: 4, reward: 3 }, wizard: { color: 0x9370db, height: 5.8, width: 3.2, reward: 4 }, elder: { color: 0xdaa520, height: 4.8, width: 3.3, reward: 5 } }; function createEnemy(x, z, type = 'default') { const enemy = new THREE.Group(); const npcConfig = npcTypes[type] || npcTypes.default; // Enemy body with type-specific dimensions const bodyGeometry = new THREE.BoxGeometry( npcConfig.width, npcConfig.height, npcConfig.width ); const bodyMaterial = new THREE.MeshStandardMaterial({ color: npcConfig.color, roughness: 0.7, metalness: 0.3 }); const body = new THREE.Mesh(bodyGeometry, bodyMaterial); body.position.y = npcConfig.height / 2; body.castShadow = true; // Add floating indicator const indicatorGeometry = new THREE.SphereGeometry(0.5, 8, 8); const indicatorMaterial = new THREE.MeshStandardMaterial({ color: 0xffff00, emissive: 0xffff00, emissiveIntensity: 0.5 }); const indicator = new THREE.Mesh(indicatorGeometry, indicatorMaterial); indicator.position.y = npcConfig.height + 1; enemy.add(body, indicator); enemy.position.set(x, 0, z); // Add physics const enemyShape = new CANNON.Box(new CANNON.Vec3(1.5, 2.5, 1.5)); const enemyBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial }); enemyBody.addShape(enemyShape); enemyBody.position.set(x, 2.5, z); world.addBody(enemyBody); // Add to game state const enemyObject = { mesh: enemy, body: enemyBody, active: false, lastGameTime: 0, // Cooldown for dice game cooldownTime: 5000, // 5 seconds cooldown type: type, // Store NPC type availableQuests: [], // Quests this NPC can give questCooldown: 300000 // 5 minutes cooldown for quests }; // Assign quests based on NPC type const questTemplates = { merchant: { title: "Trade Route", description: "Help establish a trade route by defeating enemies", requirement: { type: 'defeat', count: 3, target: 'enemies' }, reward: { coins: 150 } }, warrior: { title: "Combat Training", description: "Prove your worth in combat", requirement: { type: 'win', count: 5, target: 'dice' }, reward: { coins: 200 } }, wizard: { title: "Magical Research", description: "Collect data by exploring different regions", requirement: { type: 'explore', count: 4, target: 'regions' }, reward: { coins: 180 } }, elder: { title: "Village Protection", description: "Help protect the village by defeating nearby threats", requirement: { type: 'defeat', count: 6, target: 'enemies' }, reward: { coins: 250 } } }; if (questTemplates[type]) { enemyObject.availableQuests.push({ ...questTemplates[type], id: `${type}_${Math.random().toString(36).substr(2, 9)}`, npcType: type }); } gameState.enemies.push(enemyObject); return enemy; } // Create a tree function createTree(x, z) { const tree = new THREE.Group(); // Tree trunk const trunkGeometry = new THREE.CylinderGeometry(0.5, 0.7, 4, 8); const trunkMaterial = new THREE.MeshStandardMaterial({ color: 0x8b4513, roughness: 0.9, metalness: 0.1 }); const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial); trunk.position.y = 2; trunk.castShadow = true; // Tree top const topGeometry = new THREE.ConeGeometry(2, 6, 8); const topMaterial = new THREE.MeshStandardMaterial({ color: 0x228b22, roughness: 0.8, metalness: 0.1 }); const top = new THREE.Mesh(topGeometry, topMaterial); top.position.y = 6; top.castShadow = true; tree.add(trunk, top); tree.position.set(x, 0, z); // Add physics const treeShape = new CANNON.Cylinder(0.5, 0.7, 4, 8); const treeBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial }); treeBody.addShape(treeShape); treeBody.position.set(x, 2, z); world.addBody(treeBody); return tree; } // Create shop function createShop(x, z, rotation = 0) { const shop = new THREE.Group(); // Shop base const baseGeometry = new THREE.BoxGeometry(12, 8, 10); const baseMaterial = new THREE.MeshStandardMaterial({ color: 0x8b4513, roughness: 0.7, metalness: 0.1 }); const base = new THREE.Mesh(baseGeometry, baseMaterial); base.position.y = 4; base.castShadow = true; base.receiveShadow = true; // Shop roof const roofGeometry = new THREE.ConeGeometry(8, 6, 4); const roofMaterial = new THREE.MeshStandardMaterial({ color: 0x4a3520, roughness: 0.8, metalness: 0.1 }); const roof = new THREE.Mesh(roofGeometry, roofMaterial); roof.position.y = 11; roof.rotation.y = Math.PI / 4; roof.castShadow = true; // Shop window const windowGeometry = new THREE.PlaneGeometry(4, 2); const windowMaterial = new THREE.MeshStandardMaterial({ color: 0x87ceeb, metalness: 0.8, roughness: 0.2, emissive: 0x87ceeb, emissiveIntensity: 0.5 }); const shopWindow = new THREE.Mesh(windowGeometry, windowMaterial); shopWindow.position.set(0, 5, 5.01); // Shop sign const signGeometry = new THREE.BoxGeometry(8, 1.5, 0.3); const signMaterial = new THREE.MeshStandardMaterial({ color: 0xffd700, metalness: 0.6, roughness: 0.3, emissive: 0xffd700, emissiveIntensity: 0.2 }); const sign = new THREE.Mesh(signGeometry, signMaterial); sign.position.set(0, 7.5, 5.2); shop.add(base, roof, shopWindow, sign); shop.position.set(x, 0, z); shop.rotation.y = rotation; // Add physics const shopShape = new CANNON.Box(new CANNON.Vec3(6, 4, 5)); const shopBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial }); shopBody.addShape(shopShape); shopBody.position.set(x, 4, z); shopBody.quaternion.setFromAxisAngle(new CANNON.Vec3(0, 1, 0), rotation); world.addBody(shopBody); return shop; } // Create village function createVillage(centerX = 0, centerZ = 0, size = 1) { const village = new THREE.Group(); // Scale the village based on size parameter const radius = 40 * size; const numHouses = Math.floor(6 + size); // More houses for larger villages // Create a circular arrangement of houses for (let i = 0; i < numHouses; i++) { const angle = (i / numHouses) * Math.PI * 2; const x = centerX + Math.cos(angle) * radius; const z = centerZ + Math.sin(angle) * radius; const house = createHouse(x, z, angle + Math.PI); village.add(house); } // Add shop if this is the main village (at 0,0) if (centerX === 0 && centerZ === 0) { const shopAngle = (numHouses / numHouses) * Math.PI * 2; const shopX = centerX + Math.cos(shopAngle) * radius; const shopZ = centerZ + Math.sin(shopAngle) * radius; // Store shop position in gameState gameState.shop.position.x = shopX; gameState.shop.position.z = shopZ; const shop = createShop(shopX, shopZ, shopAngle + Math.PI); village.add(shop); } // Add trees around the village const numTrees = 20; for (let i = 0; i < numTrees; i++) { const angle = Math.random() * Math.PI * 2; const treeRadius = radius + 15 + Math.random() * 20; const x = Math.cos(angle) * treeRadius; const z = Math.sin(angle) * treeRadius; const tree = createTree(x, z); village.add(tree); } // Create central area const centerGeometry = new THREE.CircleGeometry(10, 32); const centerMaterial = new THREE.MeshStandardMaterial({ color: 0x808080, roughness: 0.8, metalness: 0.1 }); const centerArea = new THREE.Mesh(centerGeometry, centerMaterial); centerArea.rotation.x = -Math.PI / 2; centerArea.position.y = 0.1; village.add(centerArea); return village; } // Create forest function createForest() { const forest = new THREE.Group(); // Create dense forest area const forestRadius = 200; const numTrees = 500; for (let i = 0; i < numTrees; i++) { const angle = Math.random() * Math.PI * 2; const radius = Math.random() * forestRadius; // Use Perlin noise or similar for natural distribution const x = Math.cos(angle) * radius; const z = Math.sin(angle) * radius; // Avoid placing trees in the village area const distanceToCenter = Math.sqrt(x * x + z * z); if (distanceToCenter > 60) { // Keep clear of village const tree = createTree(x, z); forest.add(tree); } } // Add some enemies scattered in the forest const numEnemies = 10; for (let i = 0; i < numEnemies; i++) { const angle = Math.random() * Math.PI * 2; const radius = 80 + Math.random() * 100; // Place enemies in mid to outer forest const x = Math.cos(angle) * radius; const z = Math.sin(angle) * radius; const enemy = createEnemy(x, z); forest.add(enemy); } return forest; } // Setup improved lighting system const sunLight = new THREE.DirectionalLight(skyColor, 2.0); sunLight.position.set(-200, 400, -200); sunLight.castShadow = true; sunLight.shadow.mapSize.width = 4096; sunLight.shadow.mapSize.height = 4096; sunLight.shadow.camera.near = 10; sunLight.shadow.camera.far = 1000; sunLight.shadow.camera.left = -500; sunLight.shadow.camera.right = 500; sunLight.shadow.camera.top = 500; sunLight.shadow.camera.bottom = -500; sunLight.shadow.bias = -0.001; scene.add(sunLight); // Add hemisphere light to simulate sky and ground bounce light const hemiLight = new THREE.HemisphereLight(skyColor, groundColor, 0.6); scene.add(hemiLight); // ========================= // Character Integration // ========================= // Variables for character let character = null; let characterBody = null; let mixer = null; let isGrounded = false; let currentJumps = 0; let lastJumpTime = 0; let moveDirection = new THREE.Vector3(); let walkAction = null; let idleAction = null; let jumpAction = null; let fallAction = null; let contactNormal = new CANNON.Vec3(); let upAxis = new CANNON.Vec3(0, 1, 0); const keysPressed = { w: false, a: false, s: false, d: false, space: false, }; // Game State const gameState = { coins: 0, diceRolling: false, enemies: [], activeEnemy: null, displayCoins: null, questLog: { isOpen: false, }, activeNPC: null, quests: { active: [], completed: [], maxActive: 5, questGivers: [], availableQuests: [{ id: 'q1', title: 'Forest Expedition', description: 'Defeat 3 enemies in the forest region', region: 'forest', requirement: { type: 'defeat', count: 3, target: 'enemies', region: 'forest' }, reward: { coins: 100 }, progress: 0 }, { id: 'q2', title: 'Mountain Challenge', description: 'Win 5 dice games in the mountain region', region: 'mountain', requirement: { type: 'win', count: 5, target: 'dice', region: 'mountain' }, reward: { coins: 150 }, progress: 0 }, { id: 'q3', title: 'Desert Explorer', description: 'Find 3 treasures in the desert region', region: 'desert', requirement: { type: 'find', count: 3, target: 'treasure', region: 'desert' }, reward: { coins: 200 }, progress: 0 }] }, map: { isOpen: false, playerMarker: null, scale: 0.002, // Adjusted scale factor for map coordinates centerOffset: { x: 0, y: 0 }, // Offset for centering the map }, chat: { isOpen: false, messages: [], maxMessages: 50, aiResponse: null }, inventory: { isOpen: false, items: [], selected: -1, maxItems: 12 // Maximum inventory slots }, saveInterval: null, // For auto-save shop: { isOpen: false, currentShop: null, position: { x: 0, z: 0 }, // Store shop position items: [{ id: 1, name: 'Health Potion', price: 50, icon: '❤️', description: 'Restores health' }, { id: 2, name: 'Speed Boost', price: 100, icon: '⚡', description: 'Increases movement speed' }, { id: 3, name: 'Shield', price: 150, icon: '🛡️', description: 'Provides protection' }] } }; // Create coin display const coinDisplay = () => { const displayGroup = new THREE.Group(); // Create coin icon const coinGeometry = new THREE.CircleGeometry(0.3, 32); const coinMaterial = new THREE.MeshStandardMaterial({ color: 0xffd700, metalness: 0.8, roughness: 0.3, emissive: 0xffd700, emissiveIntensity: 0.2 }); const coinMesh = new THREE.Mesh(coinGeometry, coinMaterial); coinMesh.position.set(-0.8, 0, 0); displayGroup.add(coinMesh); // Create canvas for dynamic score display const canvas = document.createElement('canvas'); canvas.width = 256; canvas.height = 128; const context = canvas.getContext('2d'); // Create texture from canvas const texture = new THREE.CanvasTexture(canvas); const scoreGeometry = new THREE.PlaneGeometry(1, 0.5); const scoreMaterial = new THREE.MeshBasicMaterial({ map: texture, transparent: true, side: THREE.DoubleSide }); const scoreMesh = new THREE.Mesh(scoreGeometry, scoreMaterial); scoreMesh.position.set(0.3, 0, 0); displayGroup.add(scoreMesh); // Function to update score display const updateScore = () => { context.clearRect(0, 0, canvas.width, canvas.height); context.fillStyle = gameState.coins > 0 ? '#00ff00' : '#ffffff'; context.font = 'bold 80px Arial'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText(gameState.coins.toString(), canvas.width / 2, canvas.height / 2); texture.needsUpdate = true; }; // Store references for updates gameState.displayCoins = scoreMesh; gameState.updateScore = updateScore; // Initial score update updateScore(); // Position in view displayGroup.position.set(1, 2, -3); displayGroup.rotation.y = Math.PI; return displayGroup; }; // Character configuration const characterConfig = { // Movement settings groundSpeed: 30, airSpeed: 25, groundDamping: 0.1, airDamping: 0.1, acceleration: 20, turnSpeed: 8, jumpForce: 12, jumpCooldown: 0.1, maxJumps: 1, // Physics settings radius: 2.5, // Collision shape radius height: 5, // Increased height to match model's visual height mass: 62, friction: 0.1, restitution: 0.0, linearDamping: 0.02, angularDamping: 0.9, // Visual and animation settings scale: 10, startHeight: 8, }; // Define physics materials for character const characterPhysMaterial = new CANNON.Material('character'); // Create contact material between character and ground const characterGroundContact = new CANNON.ContactMaterial( characterPhysMaterial, groundPhysMaterial, { friction: 0.01, restitution: 0.0, contactEquationStiffness: 1e8, contactEquationRelaxation: 3, } ); world.addContactMaterial(characterGroundContact); // Create shop UI function createShopUI() { const shopGroup = new THREE.Group(); // Create background panel const bgGeometry = new THREE.PlaneGeometry(4, 3); const bgMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, transparent: true, opacity: 0.8, side: THREE.DoubleSide }); const background = new THREE.Mesh(bgGeometry, bgMaterial); shopGroup.add(background); // Create shop title const canvas = document.createElement('canvas'); canvas.width = 512; canvas.height = 64; const context = canvas.getContext('2d'); context.fillStyle = '#ffd700'; context.font = 'bold 48px Arial'; context.textAlign = 'center'; context.fillText('SHOP', canvas.width / 2, canvas.height / 2 + 16); const titleTexture = new THREE.CanvasTexture(canvas); const titleGeometry = new THREE.PlaneGeometry(2, 0.25); const titleMaterial = new THREE.MeshBasicMaterial({ map: titleTexture, transparent: true, side: THREE.DoubleSide }); const titleMesh = new THREE.Mesh(titleGeometry, titleMaterial); titleMesh.position.set(0, 1.3, 0.01); shopGroup.add(titleMesh); // Create item slots gameState.shop.items.forEach((item, index) => { const slotGroup = new THREE.Group(); // Item background const slotGeometry = new THREE.PlaneGeometry(3.5, 0.4); const slotMaterial = new THREE.MeshBasicMaterial({ color: 0x333333, transparent: true, opacity: 0.9, side: THREE.DoubleSide }); const slot = new THREE.Mesh(slotGeometry, slotMaterial); slotGroup.add(slot); // Create item text const itemCanvas = document.createElement('canvas'); itemCanvas.width = 512; itemCanvas.height = 64; const itemContext = itemCanvas.getContext('2d'); itemContext.fillStyle = '#ffffff'; itemContext.font = '32px Arial'; itemContext.textAlign = 'left'; itemContext.fillText(`${item.icon} ${item.name} - ${item.price} coins`, 10, 40); const itemTexture = new THREE.CanvasTexture(itemCanvas); const itemTextGeometry = new THREE.PlaneGeometry(3.4, 0.35); const itemTextMaterial = new THREE.MeshBasicMaterial({ map: itemTexture, transparent: true, side: THREE.DoubleSide }); const itemTextMesh = new THREE.Mesh(itemTextGeometry, itemTextMaterial); itemTextMesh.position.z = 0.01; slotGroup.add(itemTextMesh); slotGroup.position.y = 0.8 - (index * 0.5); shopGroup.add(slotGroup); }); // Position shop UI in view shopGroup.position.set(0, 0, -2); shopGroup.visible = false; return shopGroup; } // Create inventory UI function createInventoryUI() { const inventoryGroup = new THREE.Group(); // Create background panel const bgGeometry = new THREE.PlaneGeometry(4, 3); const bgMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, transparent: true, opacity: 0.7, side: THREE.DoubleSide }); const background = new THREE.Mesh(bgGeometry, bgMaterial); inventoryGroup.add(background); // Create slot grid (3x4 grid of slots) const slotSize = 0.5; const padding = 0.1; const startX = -1.5; const startY = 1; for (let row = 0; row < 3; row++) { for (let col = 0; col < 4; col++) { const slotGeometry = new THREE.PlaneGeometry(slotSize, slotSize); const slotMaterial = new THREE.MeshBasicMaterial({ color: 0x333333, transparent: true, opacity: 0.9, side: THREE.DoubleSide }); const slot = new THREE.Mesh(slotGeometry, slotMaterial); slot.position.set( startX + col * (slotSize + padding), startY - row * (slotSize + padding), 0.01 ); inventoryGroup.add(slot); } } // Position inventory in view inventoryGroup.position.set(0, 0, -2); inventoryGroup.visible = false; return inventoryGroup; } // Create quest log UI function createQuestLogUI() { const questLogGroup = new THREE.Group(); // Create background panel const bgGeometry = new THREE.PlaneGeometry(4, 3); const bgMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, transparent: true, opacity: 0.8, side: THREE.DoubleSide }); const background = new THREE.Mesh(bgGeometry, bgMaterial); questLogGroup.add(background); // Create title const canvas = document.createElement('canvas'); canvas.width = 512; canvas.height = 64; const context = canvas.getContext('2d'); context.fillStyle = '#ffd700'; context.font = 'bold 48px Arial'; context.textAlign = 'center'; context.fillText('QUEST LOG', canvas.width / 2, canvas.height / 2 + 16); const titleTexture = new THREE.CanvasTexture(canvas); const titleGeometry = new THREE.PlaneGeometry(2, 0.25); const titleMaterial = new THREE.MeshBasicMaterial({ map: titleTexture, transparent: true, side: THREE.DoubleSide }); const titleMesh = new THREE.Mesh(titleGeometry, titleMaterial); titleMesh.position.set(0, 1.3, 0.01); questLogGroup.add(titleMesh); // Position quest log in view questLogGroup.position.set(0, 0, -2); questLogGroup.visible = false; return questLogGroup; } // Create map UI function createMapUI() { const mapGroup = new THREE.Group(); // Create map border with frame effect const frameSize = 4.2; const frameBorder = 0.1; const frameGeometry = new THREE.PlaneGeometry(frameSize, frameSize); const frameMaterial = new THREE.MeshBasicMaterial({ color: 0x8b4513, // Wood-like color transparent: false, side: THREE.DoubleSide }); const frame = new THREE.Mesh(frameGeometry, frameMaterial); frame.position.z = -0.01; mapGroup.add(frame); // Create map background with slightly smaller size const mapSize = 4; const bgGeometry = new THREE.PlaneGeometry(mapSize, mapSize); const bgMaterial = new THREE.MeshBasicMaterial({ color: 0x000000, transparent: true, opacity: 0.9, side: THREE.DoubleSide }); const background = new THREE.Mesh(bgGeometry, bgMaterial); mapGroup.add(background); // Create map markers and regions const canvas = document.createElement('canvas'); canvas.width = 2048; // Increased resolution canvas.height = 2048; const context = canvas.getContext('2d'); // Draw map background with more dramatic gradient const gradient = context.createRadialGradient( canvas.width / 2, canvas.height / 2, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 ); gradient.addColorStop(0, '#2a3b4c'); gradient.addColorStop(0.4, '#1a2a3c'); gradient.addColorStop(1, '#0a1a2c'); context.fillStyle = gradient; context.fillRect(0, 0, canvas.width, canvas.height); // Add subtle grid pattern context.strokeStyle = 'rgba(255, 255, 255, 0.05)'; context.lineWidth = 1; const gridSize = 50; for (let i = 0; i < canvas.width; i += gridSize) { context.beginPath(); context.moveTo(i, 0); context.lineTo(i, canvas.height); context.stroke(); context.beginPath(); context.moveTo(0, i); context.lineTo(canvas.width, i); context.stroke(); } const centerX = canvas.width / 2; const centerY = canvas.height / 2; // Draw compass rose const compassSize = 100; context.save(); context.translate(100, 100); // Draw compass circle context.beginPath(); context.arc(0, 0, compassSize / 2, 0, Math.PI * 2); context.fillStyle = 'rgba(255, 255, 255, 0.1)'; context.fill(); // Draw compass points context.font = 'bold 40px Arial'; context.fillStyle = '#ffffff'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText('N', 0, -compassSize / 2 + 20); context.fillText('S', 0, compassSize / 2 - 20); context.fillText('E', compassSize / 2 - 20, 0); context.fillText('W', -compassSize / 2 + 20, 0); context.restore(); // Draw regions with borders and patterns function drawRegion(x, y, radius, color, pattern) { context.save(); // Draw main region context.beginPath(); context.arc(x, y, radius, 0, Math.PI * 2); context.fillStyle = color; context.fill(); // Add pattern context.strokeStyle = 'rgba(255, 255, 255, 0.1)'; context.lineWidth = 2; if (pattern === 'mountains') { for (let i = -radius; i < radius; i += 40) { for (let j = -radius; j < radius; j += 40) { if (Math.sqrt(i * i + j * j) < radius) { context.beginPath(); context.moveTo(x + i, y + j); context.lineTo(x + i - 10, y + j + 20); context.lineTo(x + i + 10, y + j + 20); context.closePath(); context.stroke(); } } } } else if (pattern === 'desert') { for (let i = -radius; i < radius; i += 30) { for (let j = -radius; j < radius; j += 30) { if (Math.sqrt(i * i + j * j) < radius) { context.beginPath(); context.arc(x + i, y + j, 2, 0, Math.PI * 2); context.stroke(); } } } } else if (pattern === 'forest') { for (let i = -radius; i < radius; i += 40) { for (let j = -radius; j < radius; j += 40) { if (Math.sqrt(i * i + j * j) < radius) { context.beginPath(); context.arc(x + i, y + j, 8, 0, Math.PI * 2); context.stroke(); } } } } // Add border context.strokeStyle = 'rgba(255, 255, 255, 0.3)'; context.lineWidth = 4; context.beginPath(); context.arc(x, y, radius, 0, Math.PI * 2); context.stroke(); context.restore(); } // Draw each region with its pattern drawRegion(centerX - 400, centerY + 400, 200, '#1a4731', 'forest'); drawRegion(centerX + 400, centerY + 400, 300, '#4a4a4a', 'mountains'); drawRegion(centerX - 400, centerY - 400, 250, '#c19a6b', 'desert'); // Draw village with more detail context.save(); // Village area context.beginPath(); context.arc(centerX, centerY, 100, 0, Math.PI * 2); context.fillStyle = '#a0522d'; context.fill(); context.strokeStyle = '#ffffff'; context.lineWidth = 4; context.stroke(); // Add village details (house symbols) for (let i = 0; i < 8; i++) { const angle = (i / 8) * Math.PI * 2; const x = centerX + Math.cos(angle) * 60; const y = centerY + Math.sin(angle) * 60; context.fillStyle = '#ffffff'; context.beginPath(); context.moveTo(x - 10, y - 10); context.lineTo(x + 10, y - 10); context.lineTo(x + 10, y + 10); context.lineTo(x - 10, y + 10); context.closePath(); context.fill(); // Roof context.beginPath(); context.moveTo(x - 15, y - 10); context.lineTo(x, y - 25); context.lineTo(x + 15, y - 10); context.closePath(); context.fill(); } context.restore(); // Add legend const legendX = canvas.width - 300; const legendY = 50; context.fillStyle = 'rgba(0, 0, 0, 0.7)'; context.fillRect(legendX, legendY, 250, 200); context.strokeStyle = '#ffffff'; context.strokeRect(legendX, legendY, 250, 200); context.fillStyle = '#ffffff'; context.font = 'bold 30px Arial'; context.textAlign = 'left'; context.fillText('Legend:', legendX + 20, legendY + 40); context.font = 'bold 24px Arial'; // Legend entries const entries = [{ color: '#a0522d', name: 'Village' }, { color: '#808080', name: 'Mountains' }, { color: '#f4a460', name: 'Desert' }, { color: '#228b22', name: 'Forest' }, { color: '#ff0000', name: 'You' }]; entries.forEach((entry, index) => { const y = legendY + 80 + index * 30; // Color box context.fillStyle = entry.color; context.fillRect(legendX + 20, y - 15, 20, 20); context.strokeStyle = '#ffffff'; context.strokeRect(legendX + 20, y - 15, 20, 20); // Text context.fillStyle = '#ffffff'; context.fillText(entry.name, legendX + 50, y); }); // Add region labels with shadows context.font = 'bold 48px Arial'; context.textAlign = 'center'; context.textBaseline = 'middle'; function drawTextWithShadow(text, x, y) { context.fillStyle = 'rgba(0, 0, 0, 0.5)'; context.fillText(text, x + 2, y + 2); context.fillStyle = '#ffffff'; context.fillText(text, x, y); } drawTextWithShadow('Village', centerX, centerY); drawTextWithShadow('Mountains', centerX + 400, centerY + 400); drawTextWithShadow('Desert', centerX - 400, centerY - 400); drawTextWithShadow('Forest', centerX - 400, centerY + 400); // Create map texture const mapTexture = new THREE.CanvasTexture(canvas); const mapMaterial = new THREE.MeshBasicMaterial({ map: mapTexture, transparent: true, side: THREE.DoubleSide }); const mapPlane = new THREE.Mesh(new THREE.PlaneGeometry(mapSize - 0.1, mapSize - 0.1), mapMaterial); mapPlane.position.z = 0.01; mapGroup.add(mapPlane); // Create player marker with glowing effect // Create marker shape const markerShape = new THREE.Shape(); markerShape.moveTo(0, 0.15); // Top point markerShape.lineTo(-0.08, -0.08); // Left point markerShape.lineTo(0, -0.04); // Bottom inner point markerShape.lineTo(0.08, -0.08); // Right point markerShape.lineTo(0, 0.15); // Back to top const markerGeometry = new THREE.ShapeGeometry(markerShape); const markerMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000, side: THREE.DoubleSide, transparent: true, opacity: 0.9, emissive: 0xff0000, emissiveIntensity: 0.5 }); const playerMarker = new THREE.Mesh(markerGeometry, markerMaterial); playerMarker.position.z = 0.02; mapGroup.add(playerMarker); // Store player marker reference gameState.map.playerMarker = playerMarker; // Position map UI in view mapGroup.position.set(0, 0, -2); mapGroup.visible = false; return mapGroup; } // Update player position on map function updateMapPlayerPosition() { if (characterBody && gameState.map.playerMarker && gameState.map.isOpen) { // Get world coordinates const worldX = characterBody.position.x; const worldZ = characterBody.position.z; // Map scaling constants const worldBounds = 1400; // Maximum world coordinate const mapDisplaySize = 4; // Size of the map display // Convert world coordinates to normalized coordinates (-1 to 1) const normalizedX = worldX / worldBounds; const normalizedZ = worldZ / worldBounds; // Convert to map coordinates const mapX = normalizedX * (mapDisplaySize / 2); const mapY = -normalizedZ * (mapDisplaySize / 2); // Added negative to flip vertically // Update marker position gameState.map.playerMarker.position.x = mapX; gameState.map.playerMarker.position.y = mapY; // Update marker rotation to match player facing direction if (character) { gameState.map.playerMarker.rotation.z = -Math.PI / 2; // Fixed -90 degree rotation } } } // Function to buy items from shop function buyItem(itemIndex) { const item = gameState.shop.items[itemIndex]; // Check if player has enough coins if (gameState.coins >= item.price) { // Check if inventory has space if (gameState.inventory.items.length < gameState.inventory.maxItems) { // Deduct coins gameState.coins -= item.price; // Add item to inventory gameState.inventory.items.push({ ...item, quantity: 1 }); // Update displays if (gameState.updateScore) { gameState.updateScore(); } updateInventoryDisplay(); // Show purchase notification showNotification(`Bought ${item.name} for ${item.price} coins!`, '#00ff00'); } else { showNotification('Inventory is full!', '#ff0000'); } } else { showNotification('Not enough coins!', '#ff0000'); } } // Function to update inventory display function updateInventoryDisplay() { const inventoryGroup = scene.getObjectByName('inventoryUI'); if (!inventoryGroup) return; // Update each inventory slot gameState.inventory.items.forEach((item, index) => { const slot = inventoryGroup.children[index]; if (slot) { // Update slot appearance to show item slot.material.color.setHex(0x666666); // Add or update item icon const canvas = document.createElement('canvas'); canvas.width = 128; canvas.height = 128; const context = canvas.getContext('2d'); // Draw item icon and name context.fillStyle = '#ffffff'; context.font = '48px Arial'; context.textAlign = 'center'; context.textBaseline = 'middle'; context.fillText(item.icon, 64, 44); context.font = '24px Arial'; context.fillText(item.name, 64, 84); const texture = new THREE.CanvasTexture(canvas); const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true }); // Add icon mesh if it doesn't exist if (!slot.userData.iconMesh) { const iconGeometry = new THREE.PlaneGeometry(0.45, 0.45); const iconMesh = new THREE.Mesh(iconGeometry, material); iconMesh.position.z = 0.02; slot.add(iconMesh); slot.userData.iconMesh = iconMesh; } else { slot.userData.iconMesh.material = material; } } }); } // Function to show notifications function showNotification(message, color) { const notification = document.createElement('div'); notification.style.position = 'absolute'; notification.style.top = '20px'; notification.style.left = '50%'; notification.style.transform = 'translateX(-50%)'; notification.style.backgroundColor = color; notification.style.color = 'white'; notification.style.padding = '10px 20px'; notification.style.borderRadius = '5px'; notification.style.fontFamily = 'Arial, sans-serif'; notification.style.zIndex = '1000'; notification.textContent = message; document.body.appendChild(notification); // Remove notification after 2 seconds setTimeout(() => { notification.remove(); }, 2000); } // Save and load functions function saveGame() { const saveData = { coins: gameState.coins, inventory: gameState.inventory.items, lastSaved: new Date().toISOString() }; localStorage.setItem('villageAdventureSave', JSON.stringify(saveData)); console.log('Game saved!'); } function loadGame() { const saveData = localStorage.getItem('villageAdventureSave'); if (saveData) { const data = JSON.parse(saveData); gameState.coins = data.coins; gameState.inventory.items = data.inventory; // Update displays if (gameState.updateScore) { gameState.updateScore(); } console.log('Game loaded!'); } else { console.log('No save data found!'); startNewGame(); } } function startNewGame() { // Reset game state gameState.coins = 0; gameState.inventory.items = []; // Update displays if (gameState.updateScore) { gameState.updateScore(); } // Clear old save if exists localStorage.removeItem('villageAdventureSave'); console.log('New game started!'); } // Setup auto-save function setupAutoSave() { // Auto-save every 5 minutes gameState.saveInterval = setInterval(saveGame, 5 * 60 * 1000); } // Add keyboard event listeners window.addEventListener('keydown', (event) => { if (titleScreen.style.display !== 'none') return; // Handle quest interaction with NPCs if (event.code === 'KeyQ') { if (characterBody) { const characterPos = new THREE.Vector3( characterBody.position.x, characterBody.position.y, characterBody.position.z ); // Find nearest NPC let nearestNPC = null; let nearestDistance = Infinity; const currentTime = Date.now(); gameState.enemies.forEach(npc => { const npcPos = npc.mesh.position; const distance = characterPos.distanceTo(npcPos); if (distance < 10 && distance < nearestDistance) { // Check if NPC has available quests and isn't on cooldown if (npc.availableQuests && npc.availableQuests.length > 0 && (!npc.lastQuestTime || currentTime - npc.lastQuestTime >= npc.questCooldown)) { nearestDistance = distance; nearestNPC = npc; } } }); if (nearestNPC) { gameState.activeNPC = nearestNPC; offerQuest(nearestNPC); } else { showNotification('No available quests nearby!', '#ff0000'); } } return; } // Handle quest log if (event.code === 'KeyL') { // Toggle quest log gameState.questLog.isOpen = !gameState.questLog.isOpen; if (questLogUI) { questLogUI.visible = gameState.questLog.isOpen; if (gameState.questLog.isOpen) { updateQuestLog(); } } return; } // Handle chat input if (event.code === 'KeyM') { gameState.map.isOpen = !gameState.map.isOpen; mapUI.visible = gameState.map.isOpen; updateMapPlayerPosition(); return; } else if (event.code === 'Enter') { if (!gameState.chat.isOpen) { // Open chat gameState.chat.isOpen = true; chatInput.style.display = 'block'; chatInput.focus(); // Disable movement controls Object.keys(keysPressed).forEach(key => keysPressed[key] = false); } else { // Send message const message = chatInput.value.trim(); if (message) { sendChatMessage(message); } // Close chat gameState.chat.isOpen = false; chatInput.style.display = 'none'; chatInput.value = ''; canvas.focus(); } return; } // If chat is open, don't process other keys if (gameState.chat.isOpen) return; if (event.code === 'Space') { keysPressed.space = true; } else if (event.code === 'KeyI') { gameState.inventory.isOpen = !gameState.inventory.isOpen; if (inventoryUI) { inventoryUI.visible = gameState.inventory.isOpen; } } else if (event.code.startsWith('Digit')) { const number = parseInt(event.code.replace('Digit', '')); if (gameState.shop.isOpen && number >= 1 && number <= gameState.shop.items.length) { buyItem(number - 1); } } else if (keysPressed.hasOwnProperty(event.key.toLowerCase())) { keysPressed[event.key.toLowerCase()] = true; } }); // Add save on ESC or P window.addEventListener('keyup', (event) => { if (event.code === 'Escape' || event.code === 'KeyP') { saveGame(); // Show save notification const notification = document.createElement('div'); notification.style.position = 'absolute'; notification.style.top = '20px'; notification.style.left = '50%'; notification.style.transform = 'translateX(-50%)'; notification.style.backgroundColor = 'rgba(0, 255, 0, 0.8)'; notification.style.color = 'white'; notification.style.padding = '10px 20px'; notification.style.borderRadius = '5px'; notification.style.fontFamily = 'Arial, sans-serif'; notification.style.zIndex = '1000'; notification.textContent = 'Game Saved!'; document.body.appendChild(notification); // Remove notification after 2 seconds setTimeout(() => { notification.remove(); }, 2000); return; } if (event.code === 'Space') { keysPressed.space = false; } else if (event.code === 'KeyE') { if (!gameState.diceRolling && characterBody) { const characterPos = new THREE.Vector3( characterBody.position.x, characterBody.position.y, characterBody.position.z ); // Check if near shop const shopDistance = Math.sqrt( Math.pow(characterPos.x - gameState.shop.position.x, 2) + Math.pow(characterPos.z - gameState.shop.position.z, 2) ); if (shopDistance < 15) { // Toggle shop UI gameState.shop.isOpen = !gameState.shop.isOpen; shopUI.visible = gameState.shop.isOpen; return; } // Find nearest enemy let nearestEnemy = null; let nearestDistance = Infinity; const currentTime = Date.now(); gameState.enemies.forEach(enemy => { // Check if enough time has passed since last game if (currentTime - enemy.lastGameTime >= enemy.cooldownTime) { const enemyPos = enemy.mesh.position; const distance = characterPos.distanceTo(enemyPos); if (distance < 10 && distance < nearestDistance) { nearestDistance = distance; nearestEnemy = enemy; // Determine region for quest tracking const enemyX = enemyPos.x; const enemyZ = enemyPos.z; let region = 'village'; if (Math.abs(enemyX) > 100 || Math.abs(enemyZ) > 100) { if (enemyX > 400 && enemyZ > 400) { region = 'mountain'; } else if (enemyX < -400 && enemyZ < -400) { region = 'desert'; } else if (enemyX < -400 && enemyZ > 400) { region = 'forest'; } } // Update quest progress for defeating enemies updateQuestProgress('defeat', 'enemies', region); } } }); if (nearestEnemy) { gameState.activeEnemy = nearestEnemy; startDiceGame(); } } } else if (keysPressed.hasOwnProperty(event.key.toLowerCase())) { keysPressed[event.key.toLowerCase()] = false; } }); // Load the character model const characterUrl = 'https://play.rosebud.ai/assets/3D_playground_character.glb?hb5J'; gltfLoader.load(characterUrl, (gltf) => { const model = gltf.scene; // Make the model invisible for first person view model.visible = false; model.scale.set( characterConfig.scale, characterConfig.scale, characterConfig.scale ); // Apply rotation correction if needed model.rotation.y = Math.PI; // Correcting the model's rotation // Adjust model's position so feet are on the ground model.position.set(0, 0, 0); model.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; child.material.envMapIntensity = 1.0; } }); // Create character physics body characterBody = new CANNON.Body({ mass: characterConfig.mass, material: characterPhysMaterial, linearDamping: characterConfig.linearDamping, angularDamping: characterConfig.angularDamping, fixedRotation: true, type: CANNON.Body.DYNAMIC, }); const characterShape = new CANNON.Cylinder( characterConfig.radius, characterConfig.radius, characterConfig.height, 8 ); // Adjust shapeOffset to align collision shape with the character model const shapeOffset = new CANNON.Vec3(0, characterConfig.height / 2, 0); characterBody.addShape(characterShape, shapeOffset); characterBody.position.set(0, characterConfig.startHeight, 0); world.addBody(characterBody); // Reset contact tracking isGrounded = false; let groundContactCount = 0; characterBody.addEventListener('collide', (event) => { const contact = event.contact; let otherBody; if (event.contact.bi === characterBody) { otherBody = event.contact.bj; contact.ni.negate(contactNormal); } else { otherBody = event.contact.bi; contactNormal.copy(contact.ni); } if (contactNormal.dot(upAxis) > 0.5) { groundContactCount++; isGrounded = true; currentJumps = 0; // Reset animations for ground state if (fallAction) { fallAction.stop(); fallAction.setEffectiveWeight(0); } if (jumpAction) { jumpAction.stop(); jumpAction.setEffectiveWeight(0); } } }); characterBody.addEventListener('endContact', (event) => { let otherBody; if (event.contact.bi === characterBody) { otherBody = event.contact.bj; event.contact.ni.negate(contactNormal); } else { otherBody = event.contact.bi; contactNormal.copy(event.contact.ni); } if (contactNormal.dot(upAxis) > 0.5) { groundContactCount = Math.max(0, groundContactCount - 1); if (groundContactCount === 0) { isGrounded = false; } } }); // Setup animations mixer = new THREE.AnimationMixer(model); const idleClip = gltf.animations.find((clip) => clip.name.toLowerCase().includes('idle')); const walkClip = gltf.animations.find((clip) => clip.name.toLowerCase().includes('walk')); const jumpClip = gltf.animations.find((clip) => clip.name.toLowerCase().includes('jump')); const fallClip = gltf.animations.find((clip) => clip.name.toLowerCase().includes('fall')); if (idleClip) { idleAction = mixer.clipAction(idleClip); idleAction.play(); idleAction.setEffectiveWeight(1); } if (walkClip) { walkAction = mixer.clipAction(walkClip); walkAction.play(); walkAction.setEffectiveWeight(0); } if (jumpClip) { jumpAction = mixer.clipAction(jumpClip); jumpAction.setLoop(THREE.LoopOnce); jumpAction.clampWhenFinished = true; jumpAction.setEffectiveWeight(0); } if (fallClip) { fallAction = mixer.clipAction(fallClip); fallAction.setLoop(THREE.LoopRepeat); fallAction.setEffectiveWeight(0); } character = model; scene.add(model); }); // Update character movement function updateCharacterMovement(deltaTime) { if (!character || !characterBody) return; // Get camera's forward and right vectors const cameraForward = new THREE.Vector3(); const cameraRight = new THREE.Vector3(); camera.getWorldDirection(cameraForward); cameraForward.y = 0; cameraForward.normalize(); cameraRight.crossVectors(new THREE.Vector3(0, 1, 0), cameraForward).normalize(); // Calculate move direction relative to camera moveDirection.set(0, 0, 0); // Add movement input if (keysPressed.w) moveDirection.add(cameraForward); if (keysPressed.s) moveDirection.sub(cameraForward); if (keysPressed.a) moveDirection.add(cameraRight); if (keysPressed.d) moveDirection.sub(cameraRight); // Normalize movement direction if it exists if (moveDirection.length() > 0) { moveDirection.normalize(); } // Get current horizontal velocity const currentVelocity = new THREE.Vector2(characterBody.velocity.x, characterBody.velocity.z); // Different handling for ground vs air movement if (isGrounded) { // Ground movement if (moveDirection.length() > 0) { // Calculate target velocity const targetVelocity = new THREE.Vector2( moveDirection.x * characterConfig.groundSpeed, moveDirection.z * characterConfig.groundSpeed ); // Interpolate current velocity towards target currentVelocity.lerp(targetVelocity, characterConfig.acceleration * deltaTime); // Update character rotation const targetAngle = Math.atan2(moveDirection.x, moveDirection.z); let currentAngle = character.rotation.y; // Calculate shortest rotation distance let angleDiff = targetAngle - currentAngle; if (angleDiff > Math.PI) angleDiff -= Math.PI * 2; if (angleDiff < -Math.PI) angleDiff += Math.PI * 2; // Smoothly rotate character character.rotation.y += angleDiff * characterConfig.turnSpeed * deltaTime; characterBody.quaternion.setFromEuler(0, character.rotation.y, 0); } else { // Apply ground damping when no input currentVelocity.multiplyScalar(1 - characterConfig.groundDamping * deltaTime); } } else { // Air movement if (moveDirection.length() > 0) { const airVelocity = new THREE.Vector2( moveDirection.x * characterConfig.airSpeed * deltaTime, moveDirection.z * characterConfig.airSpeed * deltaTime ); currentVelocity.add(airVelocity); // Clamp air speed const maxAirSpeed = characterConfig.airSpeed; if (currentVelocity.length() > maxAirSpeed) { currentVelocity.normalize().multiplyScalar(maxAirSpeed); } } else { // Apply air damping when no input currentVelocity.multiplyScalar(1 - characterConfig.airDamping * deltaTime); } } // Apply calculated velocity characterBody.velocity.x = currentVelocity.x; characterBody.velocity.z = currentVelocity.y; // Handle jumping if (keysPressed.space && isGrounded && currentJumps < characterConfig.maxJumps) { const now = performance.now(); if (now - lastJumpTime > characterConfig.jumpCooldown * 1000) { characterBody.velocity.y = characterConfig.jumpForce; currentJumps++; lastJumpTime = now; isGrounded = false; if (jumpAction) { jumpAction.reset(); jumpAction.setEffectiveWeight(1); jumpAction.play(); } } } // Update animations if (mixer && walkAction && idleAction && jumpAction && fallAction) { const verticalVelocity = characterBody.velocity.y; const horizontalSpeed = new THREE.Vector2(characterBody.velocity.x, characterBody.velocity.z).length(); if (!isGrounded) { // Air state walkAction.stop(); idleAction.stop(); if (verticalVelocity > 1) { // Rising fallAction.stop(); jumpAction.play(); jumpAction.setEffectiveWeight(1); } else { // Falling jumpAction.stop(); fallAction.play(); fallAction.setEffectiveWeight(1); } } else { // Ground state jumpAction.stop(); fallAction.stop(); if (horizontalSpeed > 0.1) { idleAction.stop(); walkAction.play(); walkAction.setEffectiveWeight(1); } else { walkAction.stop(); idleAction.play(); idleAction.setEffectiveWeight(1); } } } // Update animation mixer if (mixer) { mixer.update(deltaTime); } } // Update camera for first person view function updateCamera() { if (!characterBody) return; // Calculate camera position at character's eye level const eyePosition = new THREE.Vector3( characterBody.position.x, characterBody.position.y + cameraSettings.height, characterBody.position.z ); // Update camera position camera.position.copy(eyePosition); // Update camera rotation camera.rotation.order = 'YXZ'; // This order prevents gimbal lock camera.rotation.y = yaw; camera.rotation.x = pitch; } // ========================= // End of Character Integration // ========================= // Create initial scene // Create world objects function createWorld() { const worldGroup = new THREE.Group(); // Add ground const ground = createGround(); worldGroup.add(ground); // Create multiple biomes and villages const biomes = [{ type: 'mountain', center: new THREE.Vector2(800, 800), radius: 600, villages: [{ x: 600, z: 600, size: 0.8 }] }, { type: 'desert', center: new THREE.Vector2(-800, -800), radius: 500, villages: [{ x: -600, z: -600, size: 0.7 }] }, { type: 'forest', center: new THREE.Vector2(-800, 800), radius: 400, villages: [{ x: -600, z: 600, size: 0.6 }] }, { type: 'village', center: new THREE.Vector2(0, 0), radius: 100, villages: [{ x: 0, z: 0, size: 1 }] // Main village }]; // Add mountain ranges const numMountains = 30; const mountainBiome = biomes.find(b => b.type === 'mountain'); for (let i = 0; i < numMountains; i++) { const radius = randomBetween(0, mountainBiome.radius); const angle = randomBetween(0, Math.PI * 2); const x = mountainBiome.center.x + Math.cos(angle) * radius; const z = mountainBiome.center.y + Math.sin(angle) * radius; const height = randomBetween(50, 150); const mountainRadius = randomBetween(30, 60); const mountain = createMountain(x, z, height, mountainRadius); worldGroup.add(mountain); } // Add desert area with dunes const numDunes = 40; const desertBiome = biomes.find(b => b.type === 'desert'); for (let i = 0; i < numDunes; i++) { const radius = randomBetween(0, desertBiome.radius); const angle = randomBetween(0, Math.PI * 2); const x = desertBiome.center.x + Math.cos(angle) * radius; const z = desertBiome.center.y + Math.sin(angle) * radius; const size = randomBetween(10, 30); const dune = createDune(x, z, size); worldGroup.add(dune); } // Add dense forest const numForestTrees = 1000; const forestBiome = biomes.find(b => b.type === 'forest'); for (let i = 0; i < numForestTrees; i++) { const radius = randomBetween(0, forestBiome.radius); const angle = randomBetween(0, Math.PI * 2); const x = forestBiome.center.x + Math.cos(angle) * radius; const z = forestBiome.center.y + Math.sin(angle) * radius; const tree = createTree(x, z); worldGroup.add(tree); } // Add scattered rocks throughout the world const numRocks = 200; for (let i = 0; i < numRocks; i++) { const x = randomBetween(-1400, 1400); const z = randomBetween(-1400, 1400); // Don't place rocks in village area const distanceToCenter = Math.sqrt(x * x + z * z); if (distanceToCenter > 100) { const rock = createRock(x, z); worldGroup.add(rock); } } // Add NPCs with specific placements and types const npcPlacements = [ // Village NPCs { x: 20, z: 20, type: 'merchant' }, { x: -20, z: 20, type: 'elder' }, { x: 20, z: -20, type: 'wizard' }, { x: -20, z: -20, type: 'warrior' }, // Forest NPCs { x: -600, z: 700, type: 'wizard' }, { x: -700, z: 800, type: 'warrior' }, { x: -800, z: 900, type: 'merchant' }, // Mountain NPCs { x: 700, z: 700, type: 'warrior' }, { x: 800, z: 800, type: 'elder' }, { x: 900, z: 900, type: 'wizard' }, // Desert NPCs { x: -700, z: -700, type: 'merchant' }, { x: -800, z: -800, type: 'wizard' }, { x: -900, z: -900, type: 'warrior' } ]; // Place specific NPCs and quest givers npcPlacements.forEach(placement => { if (placement.type === 'elder') { // Create quest giver const questGiver = createQuestGiver(placement.x, placement.z); worldGroup.add(questGiver); // Store quest giver reference gameState.quests.questGivers.push({ mesh: questGiver, position: new THREE.Vector3(placement.x, 0, placement.z), quests: gameState.quests.availableQuests.filter(q => q.region === placement.region) }); } else { const enemy = createEnemy(placement.x, placement.z, placement.type); worldGroup.add(enemy); } }); // Add random additional NPCs throughout the world const numRandomNPCs = 20; const npcTypes = ['merchant', 'warrior', 'wizard', 'elder']; for (let i = 0; i < numRandomNPCs; i++) { const x = randomBetween(-1400, 1400); const z = randomBetween(-1400, 1400); const distanceToCenter = Math.sqrt(x * x + z * z); // Don't place NPCs in immediate village area if (distanceToCenter > 150) { const randomType = npcTypes[Math.floor(Math.random() * npcTypes.length)]; const enemy = createEnemy(x, z, randomType); worldGroup.add(enemy); } } // Add all villages biomes.forEach(biome => { biome.villages.forEach(villageData => { const village = createVillage(villageData.x, villageData.z, villageData.size); worldGroup.add(village); }); }); return worldGroup; } // Create and add world to scene const world3D = createWorld(); scene.add(world3D); // Add coin display to camera const coinDisplayMesh = coinDisplay(); camera.add(coinDisplayMesh); // Create and add UI elements to camera const inventoryUI = createInventoryUI(); const shopUI = createShopUI(); const mapUI = createMapUI(); const questLogUI = createQuestLogUI(); camera.add(inventoryUI); camera.add(shopUI); camera.add(mapUI); camera.add(questLogUI); scene.add(camera); // Create dice for the game const gameDice = createDice(); scene.add(gameDice); gameDice.visible = false; function animate() { requestAnimationFrame(animate); const deltaTime = Math.min(clock.getDelta(), 0.1); if (assetsLoaded) { // Check for region exploration if (characterBody) { const playerPos = characterBody.position; const distance = Math.sqrt(playerPos.x * playerPos.x + playerPos.z * playerPos.z); let currentRegion = 'village'; if (distance > 100) { if (playerPos.x > 400 && playerPos.z > 400) { currentRegion = 'mountain'; } else if (playerPos.x < -400 && playerPos.z < -400) { currentRegion = 'desert'; } else if (playerPos.x < -400 && playerPos.z > 400) { currentRegion = 'forest'; } // Check if player has entered a new region if (currentRegion !== gameState.lastRegion) { updateQuestProgress('explore', 'regions', currentRegion); gameState.lastRegion = currentRegion; } } } // Update map if open if (gameState.map.isOpen) { updateMapPlayerPosition(); } world.step(deltaTime); updateCharacterMovement(deltaTime); // Update character movement updateCamera(); // Update camera to follow character // Update dice game if (gameState.diceRolling) { // Smooth dice rolling animation const rollSpeed = Math.max(0, 1 - (Date.now() - gameState.diceRollTime) / 2000); gameDice.rotation.x += (15 * rollSpeed) * deltaTime; gameDice.rotation.y += (12 * rollSpeed) * deltaTime; gameDice.rotation.z += (18 * rollSpeed) * deltaTime; // Stop rolling after 2 seconds if (gameState.diceRollTime && (Date.now() - gameState.diceRollTime > 2000)) { const result = Math.floor(Math.random() * 6) + 1; // Set final rotation to show correct face const rotations = { 1: [0, 0, 0], // Front face (1) 2: [0, Math.PI / 2, 0], // Right face (2) 3: [Math.PI / 2, 0, 0], // Top face (3) 4: [-Math.PI / 2, 0, 0], // Bottom face (4) 5: [0, -Math.PI / 2, 0], // Left face (5) 6: [Math.PI, 0, 0] // Back face (6) }; const finalRotation = rotations[result]; gameDice.rotation.set(finalRotation[0], finalRotation[1], finalRotation[2]); endDiceRoll(result); } } if (character && characterBody) { // Adjust the character model's position based on the physics body character.position.copy(characterBody.position); } // No need to call controls.update() here as it's called in updateCamera() } composer.render(); } // Handle window resize function onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; // Update camera camera.aspect = width / height; camera.updateProjectionMatrix(); // Update renderer and composer renderer.setSize(width, height); composer.setSize(width, height); // Update post-processing passes bloomPass.resolution.set(width, height); smaaPass.setSize(width, height); } // Add event listeners window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); // Dice game functions function startDiceGame() { if (gameState.activeEnemy) { gameState.diceRolling = true; gameState.diceRollTime = Date.now(); // Position dice in front of camera const cameraDir = new THREE.Vector3(); camera.getWorldDirection(cameraDir); // Position dice slightly lower and closer to the camera const dicePos = camera.position.clone() .add(cameraDir.multiplyScalar(4)) // Closer to camera .sub(new THREE.Vector3(0, 0.5, 0)); // Slightly lower gameDice.position.copy(dicePos); // Add a spotlight to illuminate the dice // Create a more dramatic lighting setup for the dice const diceLight = new THREE.SpotLight(0xffffff, 3); diceLight.position.copy(camera.position).add(new THREE.Vector3(0, 2, 0)); diceLight.target = gameDice; diceLight.angle = Math.PI / 4; diceLight.distance = 15; diceLight.decay = 1; diceLight.penumbra = 0.2; // Add a second, softer light for better visibility const fillLight = new THREE.PointLight(0xffffff, 1); fillLight.position.copy(camera.position).add(new THREE.Vector3(-2, 0, -2)); fillLight.distance = 10; fillLight.decay = 2; // Store both lights gameDice.userData.spotlight = diceLight; gameDice.userData.fillLight = fillLight; scene.add(diceLight); scene.add(fillLight); // Store the light in the dice object for later removal gameDice.userData.spotlight = diceLight; scene.add(diceLight); gameDice.visible = true; } } function endDiceRoll(result) { gameState.diceRolling = false; gameDice.visible = false; // Get player position for region detection const playerPos = characterBody.position; let currentRegion = 'village'; // Determine current region based on position const distance = Math.sqrt(playerPos.x * playerPos.x + playerPos.z * playerPos.z); if (distance > 100) { if (playerPos.x > 400 && playerPos.z > 400) { currentRegion = 'mountain'; } else if (playerPos.x < -400 && playerPos.z < -400) { currentRegion = 'desert'; } else if (playerPos.x < -400 && playerPos.z > 400) { currentRegion = 'forest'; } } // Remove the spotlight // Remove both lights if (gameDice.userData.spotlight) { scene.remove(gameDice.userData.spotlight); gameDice.userData.spotlight = null; } if (gameDice.userData.fillLight) { scene.remove(gameDice.userData.fillLight); gameDice.userData.fillLight = null; } if (gameState.activeEnemy) { // Update quest progress if player wins if (result > 3) { updateQuestProgress('win', 'dice', currentRegion); } // Update last game time gameState.activeEnemy.lastGameTime = Date.now(); // Get NPC type reward multiplier const npcType = gameState.activeEnemy.mesh.userData.type || 'default'; const rewardMultiplier = npcTypes[npcType]?.reward || 1; // Calculate coins won based on dice roll and NPC type const coinsWon = result * 5 * rewardMultiplier; gameState.coins += coinsWon; // Show reward notification showNotification(`Won ${coinsWon} coins from ${npcType}!`, '#ffd700'); // Update coin display if (gameState.displayCoins) { // Update score display if (gameState.updateScore) { gameState.updateScore(); } } gameState.activeEnemy = null; } } // Chat functions function sendChatMessage(message) { // Don't process empty messages if (!message.trim()) return; // Add player message addChatMessage('You', message, '#ffffff'); // Easter egg responses const easterEggs = { 'who are you': "I'm Rosie, your friendly AI assistant! I was created by Rosebud AI to help you on your adventure!", 'what can you do': "I can help you with information about the game, give directions, and keep you company on your journey!", 'thank you': ["You're welcome! 😊", "Anytime! Happy to help! 💫", "My pleasure! 🌟"], 'bye': ["Goodbye! Come back soon! 👋", "See you later! Stay safe! 🌟", "Until next time! 💫"] }; // Check for easter eggs const lowerMessage = message.toLowerCase(); for (const [trigger, response] of Object.entries(easterEggs)) { if (lowerMessage.includes(trigger)) { if (Array.isArray(response)) { const randomResponse = response[Math.floor(Math.random() * response.length)]; setTimeout(() => addChatMessage('Rosie', randomResponse, '#00ffff'), 500); } else { setTimeout(() => addChatMessage('Rosie', response, '#00ffff'), 500); } return; } } // Process command or get AI response if (message.startsWith('/')) { processCommand(message); } else { // Get AI response getAIResponse(message); } } function addChatMessage(sender, message, color = '#ffffff') { const messageElement = document.createElement('div'); messageElement.style.marginBottom = '5px'; messageElement.style.wordWrap = 'break-word'; const timestamp = new Date().toLocaleTimeString(); messageElement.innerHTML = `[${timestamp}] ${sender}: ${message}`; chatMessages.appendChild(messageElement); chatMessages.scrollTop = chatMessages.scrollHeight; // Limit number of messages while (chatMessages.children.length > gameState.chat.maxMessages) { chatMessages.removeChild(chatMessages.firstChild); } } function processCommand(command) { const args = command.slice(1).split(' '); const cmd = args[0].toLowerCase(); switch (cmd) { case 'help': addChatMessage('System', '=== Available Commands ===', '#00ff00'); addChatMessage('System', '/help - Show this help message', '#00ff00'); addChatMessage('System', '/coins - Show your current coins', '#00ff00'); addChatMessage('System', '/location - Show your current coordinates', '#00ff00'); addChatMessage('System', '/clear - Clear chat messages', '#00ff00'); addChatMessage('System', '=== Game Tips ===', '#00ff00'); addChatMessage('System', '• Talk to NPCs with Q to get quests', '#00ff00'); addChatMessage('System', '• Press E near enemies to play dice game', '#00ff00'); addChatMessage('System', '• Use M to open the world map', '#00ff00'); addChatMessage('System', '• Check L for your quest log', '#00ff00'); break; case 'coins': addChatMessage('System', `You have ${gameState.coins} coins`, '#00ff00'); break; case 'location': if (characterBody) { const pos = characterBody.position; addChatMessage('System', `Your location: x=${pos.x.toFixed(2)}, y=${pos.y.toFixed(2)}, z=${pos.z.toFixed(2)}`, '#00ff00'); } break; case 'clear': chatMessages.innerHTML = ''; break; default: addChatMessage('System', 'Unknown command. Type /help for available commands', '#ff0000'); } } // Quest system functions function createQuestGiver(x, z) { const questGiver = new THREE.Group(); // Create quest giver model const bodyGeometry = new THREE.BoxGeometry(3, 6, 3); const bodyMaterial = new THREE.MeshStandardMaterial({ color: 0xdaa520, roughness: 0.7, metalness: 0.3 }); const bodyMesh = new THREE.Mesh(bodyGeometry, bodyMaterial); bodyMesh.position.y = 3; bodyMesh.castShadow = true; // Add quest indicator const indicatorGeometry = new THREE.SphereGeometry(0.5, 8, 8); const indicatorMaterial = new THREE.MeshStandardMaterial({ color: 0xffd700, emissive: 0xffd700, emissiveIntensity: 0.5 }); const indicator = new THREE.Mesh(indicatorGeometry, indicatorMaterial); indicator.position.y = 7; questGiver.add(bodyMesh, indicator); questGiver.position.set(x, 0, z); // Add physics const shape = new CANNON.Box(new CANNON.Vec3(1.5, 3, 1.5)); const physicsBody = new CANNON.Body({ mass: 0, material: groundPhysMaterial }); physicsBody.addShape(shape); physicsBody.position.set(x, 3, z); world.addBody(physicsBody); return questGiver; } function checkQuestCompletion(quest) { if (quest.progress >= quest.requirement.count) { // Complete quest gameState.coins += quest.reward.coins; gameState.quests.completed.push(quest); gameState.quests.active = gameState.quests.active.filter(q => q.id !== quest.id); // Show completion notification showNotification(`Quest Complete: ${quest.title}! Earned ${quest.reward.coins} coins!`, '#00ff00'); // Update displays if (gameState.updateScore) { gameState.updateScore(); } } } // Function to update quest log display function updateQuestLog() { if (!questLogUI || !gameState.questLog.isOpen) return; // Remove old quest entries questLogUI.children.forEach(child => { if (child.userData.questEntry) { questLogUI.remove(child); } }); // Create entries for active quests gameState.quests.active.forEach((quest, index) => { const canvas = document.createElement('canvas'); canvas.width = 512; canvas.height = 64; const context = canvas.getContext('2d'); // Draw quest information context.fillStyle = '#ffffff'; context.font = '24px Arial'; context.textAlign = 'left'; context.fillText(`${quest.title}`, 10, 25); context.font = '18px Arial'; context.fillStyle = '#cccccc'; context.fillText(`Progress: ${quest.progress}/${quest.requirement.count}`, 10, 50); const texture = new THREE.CanvasTexture(canvas); const geometry = new THREE.PlaneGeometry(3.5, 0.4); const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true, side: THREE.DoubleSide }); const questEntry = new THREE.Mesh(geometry, material); questEntry.position.set(0, 0.8 - (index * 0.5), 0.02); questEntry.userData.questEntry = true; questLogUI.add(questEntry); }); // Add "No Active Quests" message if there are no quests if (gameState.quests.active.length === 0) { const canvas = document.createElement('canvas'); canvas.width = 512; canvas.height = 64; const context = canvas.getContext('2d'); context.fillStyle = '#cccccc'; context.font = '24px Arial'; context.textAlign = 'center'; context.fillText('No Active Quests', canvas.width / 2, canvas.height / 2); const texture = new THREE.CanvasTexture(canvas); const geometry = new THREE.PlaneGeometry(3.5, 0.4); const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true, side: THREE.DoubleSide }); const noQuestsMessage = new THREE.Mesh(geometry, material); noQuestsMessage.position.set(0, 0.8, 0.02); noQuestsMessage.userData.questEntry = true; questLogUI.add(noQuestsMessage); } } function acceptQuest(quest) { if (gameState.quests.active.length < gameState.quests.maxActive) { gameState.quests.active.push({ ...quest, progress: 0 }); showNotification(`New Quest: ${quest.title}`, '#ffd700'); } else { showNotification('Cannot accept more quests. Complete some first!', '#ff0000'); } } function offerQuest(npc) { if (!npc.availableQuests || npc.availableQuests.length === 0) { showNotification('This NPC has no quests available!', '#ff0000'); return; } if (gameState.quests.active.length >= gameState.quests.maxActive) { showNotification('Cannot accept more quests. Complete some first!', '#ff0000'); return; } // Get a random quest from the NPC's available quests const questIndex = Math.floor(Math.random() * npc.availableQuests.length); const quest = npc.availableQuests[questIndex]; // Add quest to active quests const newQuest = { ...quest, progress: 0, npcType: npc.type }; gameState.quests.active.push(newQuest); // Remove the quest from available quests npc.availableQuests.splice(questIndex, 1); // Set quest cooldown npc.lastQuestTime = Date.now(); // Show notification showNotification(`New Quest from ${npc.type}: ${quest.title}`, '#ffd700'); // Update quest log if it's open if (gameState.questLog.isOpen) { updateQuestLog(); } } function updateQuestProgress(type, target, region) { gameState.quests.active.forEach(quest => { if (quest.requirement.type === type && quest.requirement.target === target && (!quest.requirement.region || quest.requirement.region === region)) { quest.progress++; showNotification(`Quest Progress: ${quest.progress}/${quest.requirement.count}`, '#ffd700'); checkQuestCompletion(quest); } }); } function getAIResponse(message) { // Keywords and their responses const keywords = { 'hello': ['Hi there! How can I help you today?', 'Hello! Welcome to our village!'], 'help': ['What kind of help do you need?', 'I can tell you about the village, monsters, or the shop.'], 'shop': ['The shop sells useful items. You can buy them using coins from dice games.', 'Visit the shop to spend your hard-earned coins!'], 'dice': ['The dice game is a great way to earn coins. Find enemies and press E to play!', 'Each pip on the dice is worth 5 coins!'], 'village': ['Our village is peaceful but surrounded by different regions.', 'The village is the safest place to start your adventure.'], 'mountain': ['The mountains are dangerous but rewarding to explore.', 'Be careful in the mountain region, it\'s quite treacherous!'], 'desert': ['The desert holds many secrets. Stay hydrated!', 'Many adventurers get lost in the vast desert...'], 'forest': ['The forest is home to many creatures.', 'Watch out for enemies hiding in the forest!'], 'coin': ['You can earn coins by playing the dice game with enemies.', 'Spend your coins wisely at the shop!'], 'inventory': ['Press I to check your inventory.', 'The inventory can hold up to 12 items.'], 'enemy': ['Enemies can be challenged to a dice game.', 'Press E near an enemy to start a dice game!'], 'save': ['Remember to save your game with P or ESC!', 'Your game auto-saves every 5 minutes.'] }; // Function to find most relevant keyword function findRelevantKeyword(msg) { const words = msg.toLowerCase().split(' '); for (const word of words) { for (const key in keywords) { if (word.includes(key) || key.includes(word)) { return key; } } } return null; } // Default responses for when no keyword is found const defaultResponses = [ "Hmm, that's interesting! Tell me more.", "I'm here to help if you need any information about the game.", "You can ask me about the village, mountains, desert, forest, or the dice game!", "Need help with something specific? Try asking about the shop or enemies.", "Remember, type /help to see available commands!" ]; // Find relevant keyword and get response const keyword = findRelevantKeyword(message); const responses = keyword ? keywords[keyword] : defaultResponses; // Add typing indicator addChatMessage('System', '🤖 Rosie is typing...', '#888888'); // Remove typing indicator and add response after delay setTimeout(() => { // Remove typing indicator chatMessages.removeChild(chatMessages.lastChild); // Select and send response const response = responses[Math.floor(Math.random() * responses.length)]; addChatMessage('Rosie', response, '#00ffff'); // Add follow-up if appropriate if (Math.random() < 0.3) { // 30% chance for follow-up setTimeout(() => { const followUps = [ "Is there anything else you'd like to know?", "Feel free to ask more questions!", "Let me know if you need more help.", "What else would you like to explore?" ]; const followUp = followUps[Math.floor(Math.random() * followUps.length)]; addChatMessage('Rosie', followUp, '#00ffff'); }, 1000); } }, 1500); } // Start animation and setup auto-save animate(); setupAutoSave();