import * as THREE from 'three'; import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; function reportError(error) { console.error(error); if (window.parent !== window) { window.parent.postMessage({ type: 'iframeError', message: error.message || String(error), error: error.stack || null }, '*'); } } class CryptoRunner { constructor(options = {}) { // Get container or canvas from options or use defaults this.containerId = options.containerId || 'renderDiv'; this.canvasId = options.canvasId || 'threeRenderCanvas'; this.container = document.getElementById(this.containerId); this.canvas = document.getElementById(this.canvasId); if (!this.container) { console.error(`Container #${this.containerId} not found!`); return; } this.scene = null; this.camera = null; this.renderer = null; this.character = null; this.obstacles = []; this.coins = []; this.tunnelSegments = []; this.particles = null; this.clock = new THREE.Clock(); this.gameSpeed = 12; this.score = 0; this.isGameOver = false; this.targetPosition = new THREE.Vector3(0, 0, 50); this.cameraTarget = new THREE.Vector3(); this.tunnelRadius = 10; this.characterRadius = 1.2; this.maxDistance = this.tunnelRadius - this.characterRadius; // Initialize background music this.bgMusic = new Audio('https://dgljnasyossjmcqpzzny.supabase.co/storage/v1/object/sign/assets/a7022881-0a2b-48a3-bdbd-fbc3ce4d38b8/e72d32ee-cb74-4630-92ff-17ee357e56e7/bgmusic.mp3?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJhc3NldHMvYTcwMjI4ODEtMGEyYi00OGEzLWJkYmQtZmJjM2NlNGQzOGI4L2U3MmQzMmVlLWNiNzQtNDYzMC05MmZmLTE3ZWUzNTdlNTZlNy9iZ211c2ljLm1wMyIsImlhdCI6MTczODE2NDU5OCwiZXhwIjoxNzY5NzAwNTk4fQ.jQFvqUlV0DKJ7wBAFHGW_aHNyx8Gw1K1zt87n24xpN4'); this.bgMusic.loop = true; this.bgMusic.volume = 0.7; // DOM element for score this.scoreElement = document.createElement('div'); this.scoreElement.style.position = 'absolute'; this.scoreElement.style.top = '20px'; this.scoreElement.style.left = '20px'; this.scoreElement.style.transform = 'none'; this.scoreElement.style.color = 'white'; this.scoreElement.style.fontSize = '36px'; this.scoreElement.style.fontFamily = 'Arial, sans-serif'; this.scoreElement.style.fontWeight = 'bold'; this.scoreElement.style.zIndex = '10'; this.scoreElement.style.textShadow = '-2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000'; this.container.appendChild(this.scoreElement); // Add Game Over message element this.gameOverElement = document.createElement('div'); this.gameOverElement.style.position = 'absolute'; this.gameOverElement.style.top = '50%'; this.gameOverElement.style.left = '50%'; this.gameOverElement.style.transform = 'translate(-50%, -50%)'; this.gameOverElement.style.color = 'white'; this.gameOverElement.style.fontSize = '48px'; this.gameOverElement.style.fontFamily = 'Arial, sans-serif'; this.gameOverElement.style.fontWeight = 'bold'; this.gameOverElement.style.textAlign = 'center'; this.gameOverElement.style.zIndex = '20'; this.gameOverElement.style.textShadow = '-2px -2px 0 #000, 2px -2px 0 #000, -2px 2px 0 #000, 2px 2px 0 #000'; this.gameOverElement.style.display = 'none'; this.gameOverElement.textContent = 'LIQUIDATED!\nRestarting in 5s'; this.container.appendChild(this.gameOverElement); this.init(); } init() { this.scene = new THREE.Scene(); this.scene.background = new THREE.Color(0xffffff); // Start playing background music this.playBackgroundMusic(); this.scene.fog = new THREE.Fog(0xffffff, 80, 300); // Get container dimensions const width = this.container.clientWidth; const height = this.container.clientHeight; this.camera = new THREE.PerspectiveCamera(75, width / height, 1, 500); // Use the provided canvas if available if (this.canvas) { this.renderer = new THREE.WebGLRenderer({ canvas: this.canvas, antialias: true }); } else { this.renderer = new THREE.WebGLRenderer({ antialias: true }); this.container.appendChild(this.renderer.domElement); } this.renderer.setSize(width, height); const ambientLight = new THREE.AmbientLight(0xe0e8ff, 3.5); this.scene.add(ambientLight); const pointLight = new THREE.PointLight(0xffffff, 4.0, 200); pointLight.position.set(0, 0, 60); this.scene.add(pointLight); const secondLight = new THREE.PointLight(0x4488ff, 3.0, 150); secondLight.position.set(0, 5, 40); this.scene.add(secondLight); const blueLight1 = new THREE.PointLight(0x0066ff, 2.0, 30); blueLight1.position.set(5, 5, 30); this.scene.add(blueLight1); const blueLight2 = new THREE.PointLight(0x00aaff, 2.0, 30); blueLight2.position.set(-5, -5, 70); this.scene.add(blueLight2); this.tunnelLight = new THREE.PointLight(0xaaddff, 2.0, 30); this.scene.add(this.tunnelLight); this.createParticles(); this.createTunnel(); this.loadCharacter(); this.setupObstacles(); this.setupCoins(); this.setupControls(); this.animate(); this.updateScoreDisplay(); window.addEventListener('resize', this.onWindowResize.bind(this)); } createTunnel() { const segmentLength = 150; const segmentCount = 8; // Create a bright white futuristic lab texture const canvas = document.createElement('canvas'); canvas.width = 1024; canvas.height = 1024; const context = canvas.getContext('2d'); // White base background context.fillStyle = '#ffffff'; context.fillRect(0, 0, 1024, 1024); // Draw grid lines for a lab/tech feel context.strokeStyle = '#e0e0e0'; context.lineWidth = 2; // Horizontal grid lines for (let i = 0; i < 20; i++) { const y = i * 50; context.beginPath(); context.moveTo(0, y); context.lineTo(1024, y); context.stroke(); } // Vertical grid lines for (let i = 0; i < 20; i++) { const x = i * 50; context.beginPath(); context.moveTo(x, 0); context.lineTo(x, 1024); context.stroke(); } const texture = new THREE.CanvasTexture(canvas); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(4, 1); // Bright tunnel material with subtle blue emission const tunnelMaterial = new THREE.MeshPhongMaterial({ map: texture, side: THREE.BackSide, color: 0xffffff, specular: 0x6688ff, shininess: 90, emissive: 0x334455, emissiveIntensity: 0.3 }); for (let i = 0; i < segmentCount; i++) { const tunnelGeometry = new THREE.CylinderGeometry( this.tunnelRadius, this.tunnelRadius, segmentLength, 32, 1, true ); const segment = new THREE.Mesh(tunnelGeometry, tunnelMaterial); segment.rotation.x = Math.PI / 2; // More overlap between segments segment.position.z = -i * (segmentLength - 25); this.scene.add(segment); this.tunnelSegments.push(segment); } // Add glowing blue light strips along the tunnel // Create 8 light strips for more even lighting for (let i = 0; i < 8; i++) { const angle = (Math.PI / 4) * i; const x = Math.cos(angle) * (this.tunnelRadius - 0.2); const y = Math.sin(angle) * (this.tunnelRadius - 0.2); // Brighter blue strip with glow const stripGeometry = new THREE.BoxGeometry(0.4, 0.4, segmentLength * segmentCount); const stripMaterial = new THREE.MeshBasicMaterial({ color: 0x00aaff, emissive: 0x0088ff, emissiveIntensity: 1.0 }); const strip = new THREE.Mesh(stripGeometry, stripMaterial); strip.position.set(x, y, 0); this.scene.add(strip); } // Add some cross-connecting light strips for (let i = 0; i < 20; i++) { const z = -150 - i * 60; const ringGeometry = new THREE.TorusGeometry(this.tunnelRadius - 0.3, 0.15, 16, 32); const ringMaterial = new THREE.MeshBasicMaterial({ color: 0x00aaff }); const ring = new THREE.Mesh(ringGeometry, ringMaterial); ring.rotation.x = Math.PI / 2; ring.position.z = z; this.scene.add(ring); } } createParticles() { const particleGeometry = new THREE.BufferGeometry(); const particleCount = 300; const positions = new Float32Array(particleCount * 3); for (let i = 0; i < particleCount * 3; i += 3) { positions[i] = (Math.random() - 0.5) * 20; positions[i + 1] = (Math.random() - 0.5) * 20; positions[i + 2] = (Math.random() - 1) * 100; } particleGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3)); const particleMaterial = new THREE.PointsMaterial({ color: 0x00ffff, size: 0.1, transparent: true, opacity: 0.5 }); this.particles = new THREE.Points(particleGeometry, particleMaterial); this.scene.add(this.particles); } loadCharacter() { const loader = new GLTFLoader(); const robotModelUrl = 'https://dgljnasyossjmcqpzzny.supabase.co/storage/v1/object/public/public_assets//robot%20with%20legs.glb'; // Create a temporary sphere for positioning until the model loads const tempGeometry = new THREE.SphereGeometry(this.characterRadius, 32, 32); const tempMaterial = new THREE.MeshPhongMaterial({ color: 0xff4444, opacity: 0, transparent: true }); this.character = new THREE.Mesh(tempGeometry, tempMaterial); this.character.position.set(0, 0, 50); this.scene.add(this.character); // Load the flying robot model loader.load(robotModelUrl, (gltf) => { // Remove the temporary sphere this.scene.remove(this.character); // Set the loaded model as the character this.character = gltf.scene; // Scale the model appropriately - increased from 0.9 to 1.3 to make it even bigger this.character.scale.set(1, 1, 1); // Position the model this.character.position.set(0, 0, 50); // Flip the character 180 degrees on Y axis this.character.rotation.y = Math.PI; // Tilt the robot backward instead of forward this.character.rotation.x = 0.15; // Tilt backward by ~27 degrees // Add a proper collision offset based on the model's actual dimensions this.collisionOffsetY = -0.3; // Changed from -0.5 to better match model height const collisionGeometry = new THREE.SphereGeometry(this.characterRadius, 8, 8); const collisionMaterial = new THREE.MeshBasicMaterial({ visible: false }); this.collisionSphere = new THREE.Mesh(collisionGeometry, collisionMaterial); this.collisionSphere.position.y = this.collisionOffsetY; // Position the collision sphere properly this.character.add(this.collisionSphere); // Add the character to the scene this.scene.add(this.character); }, // Handle loading progress (xhr) => { console.log((xhr.loaded / xhr.total * 100) + '% loaded'); }, // Handle errors (error) => { console.error('An error happened loading the robot model', error); }); this.cameraTarget.set(0, 0, 60); this.camera.position.copy(this.cameraTarget); this.camera.lookAt(0, 0, 50); } setupObstacles() { // Create obstacles with proper spacing const minDistance = 120; let lastPosition = -200; // Clear existing obstacles if any this.obstacles.forEach(obstacle => { this.scene.remove(obstacle); }); this.obstacles = []; for (let i = 0; i < 8; i++) { const typeIndex = Math.floor(Math.random() * 4); const obstacle = this.createObstacle(typeIndex); // Position with proper spacing lastPosition -= minDistance + Math.floor(Math.random() * 40); obstacle.position.z = lastPosition; this.scene.add(obstacle); this.obstacles.push(obstacle); } } setupCoins() { const loader = new GLTFLoader(); const lanes = [-5, 0, 5]; const ethModelUrl = 'https://dgljnasyossjmcqpzzny.supabase.co/storage/v1/object/public/public_assets//ethereum_3d_logo.glb'; // Load the Ethereum 3D model loader.load(ethModelUrl, (gltf) => { // Create a template model that we'll clone const ethModel = gltf.scene; // Scale the model appropriately - reduced from 0.5 to 0.15 for much smaller size ethModel.scale.set(0.005, 0.005, 0.005); // Create instances for each coin position for (let i = 0; i < 8; i++) { const coin = ethModel.clone(); const laneIndex = Math.floor(Math.random() * 3); coin.position.set( lanes[laneIndex], (Math.random() - 0.5) * 4, -100 - i * 60 ); // Add to scene and store reference this.scene.add(coin); this.coins.push(coin); } }, // Handle loading progress (xhr) => { console.log((xhr.loaded / xhr.total * 100) + '% loaded'); }, // Handle errors (error) => { console.error('An error happened loading the Ethereum model', error); }); } setupControls() { // Add smoothing for mouse movement this.mousePosition = new THREE.Vector2(0, 0); this.smoothedMousePosition = new THREE.Vector2(0, 0); const handleMouseMove = (event) => { if (this.isGameOver) return; // Get container bounds - works in both iframe and direct const rect = this.container.getBoundingClientRect(); // Store raw mouse position this.mousePosition.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; this.mousePosition.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; }; // Use container for event listening to ensure correct coordinate space this.container.addEventListener('mousemove', handleMouseMove); // Also listen on document for better responsiveness document.addEventListener('mousemove', (event) => { // Ignore if cursor is outside container const rect = this.container.getBoundingClientRect(); if ( event.clientX < rect.left || event.clientX > rect.right || event.clientY < rect.top || event.clientY > rect.bottom ) return; handleMouseMove(event); }); } updateScoreDisplay() { this.scoreElement.textContent = `ETH Price: $${this.score}`; } restartGame() { // Clear any pending timeouts if (this.restartTimeout) { clearTimeout(this.restartTimeout); this.restartTimeout = null; } // Hide game over message this.gameOverElement.style.display = 'none'; // Resume background music this.resumeBackgroundMusic(); this.score = 0; this.isGameOver = false; this.gameSpeed = 12; this.updateScoreDisplay(); // Reset character position if (this.character) { this.character.position.set(0, 0, 50); // Reset character rotation if needed if (this.character.rotation) { this.character.rotation.z = 0; } } this.cameraTarget.set(0, 0, 60); this.camera.position.copy(this.cameraTarget); this.camera.lookAt(new THREE.Vector3(0, 0, 50)); // Completely reset all obstacles - recreate them this.setupObstacles(); // Reset coins const lanes = [-5, 0, 5]; this.coins.forEach(coin => { const laneIndex = Math.floor(Math.random() * 3); coin.position.set( lanes[laneIndex], (Math.random() - 0.5) * 4, -100 - Math.random() * 400 ); }); } animate() { try { requestAnimationFrame(() => this.animate()); if (this.isGameOver) return; const delta = this.clock.getDelta(); // Smooth the mouse input this.smoothedMousePosition.lerp(this.mousePosition, 0.05); // Lower value = smoother but less responsive // Use the smoothed mouse position to calculate target const vector = new THREE.Vector3(this.smoothedMousePosition.x, this.smoothedMousePosition.y, 0.5); vector.unproject(this.camera); const dir = vector.sub(this.camera.position).normalize(); const distance = (this.character.position.z - this.camera.position.z) / dir.z; const pos = this.camera.position.clone().add(dir.multiplyScalar(distance)); // Strictly enforce movement boundary at calculation time const posDistance = Math.sqrt(pos.x * pos.x + pos.y * pos.y); if (posDistance > this.maxDistance) { const scale = this.maxDistance / posDistance; pos.x *= scale; pos.y *= scale; } this.targetPosition.set(pos.x, pos.y, this.character.position.z); // Smoother character movement this.character.position.lerp(this.targetPosition, 0.08); // Secondary boundary check to ensure character stays within bounds const charDistance = Math.sqrt(this.character.position.x * this.character.position.x + this.character.position.y * this.character.position.y); if (charDistance > this.maxDistance) { const scale = this.maxDistance / charDistance; this.character.position.x *= scale; this.character.position.y *= scale; } // Add a slight offset to camera to prevent seeing outside when at edges const cameraOffset = new THREE.Vector3( -this.character.position.x * 0.1, -this.character.position.y * 0.1, 10 ); this.cameraTarget.copy(this.character.position).add(cameraOffset); this.camera.position.lerp(this.cameraTarget, 0.05); // Decreased from 0.15 for smoother camera movement this.camera.lookAt(this.character.position); this.gameSpeed = Math.min(this.gameSpeed + delta * 0.5, 40); this.obstacles.forEach(obstacle => { obstacle.position.z += this.gameSpeed * delta; // Only check when very close to the obstacle const zDistance = Math.abs(obstacle.position.z - this.character.position.z); if (zDistance < 0.75 && !this.isGameOver) { const x = this.character.position.x; const y = this.character.position.y + (this.collisionOffsetY || 0); const type = obstacle.userData.type; // Log the position for debugging console.log(`Near ${obstacle.userData.typeName} at x:${x.toFixed(2)}, y:${y.toFixed(2)}`); // Remove the distance check to detect collisions everywhere in the blocked section let shouldCollide = false; // Check if player is in the blocked section switch(type) { case 0: // TOP half shouldCollide = y > 0; // Positive Y is top console.log(`TOP check: ${shouldCollide}, y=${y.toFixed(2)}`); break; case 1: // BOTTOM half shouldCollide = y < 0; // Negative Y is bottom console.log(`BOTTOM check: ${shouldCollide}, y=${y.toFixed(2)}`); break; case 2: // LEFT half shouldCollide = x < 0; // Negative X is left console.log(`LEFT check: ${shouldCollide}, x=${x.toFixed(2)}`); break; case 3: // RIGHT half shouldCollide = x > 0; // Positive X is right console.log(`RIGHT check: ${shouldCollide}, x=${x.toFixed(2)}`); break; } if (shouldCollide) { console.log(`COLLISION with ${obstacle.userData.typeName} barrier at x:${x.toFixed(2)}, y:${y.toFixed(2)}`); this.isGameOver = true; this.gameOverElement.style.display = 'block'; // Show game over message this.pauseBackgroundMusic(); // Pause music on game over this.restartTimeout = setTimeout(() => this.restartGame(), 5000); return; } } // Reset obstacle when it passes player view if (obstacle.position.z > 100) { // Find furthest back obstacle const minZ = Math.min(...this.obstacles.map(o => o.position.z)); const minDistance = 120; // Create a brand new obstacle rather than trying to modify the existing one const typeIndex = Math.floor(Math.random() * 4); const newObstacle = this.createObstacle(typeIndex); // Position the new obstacle newObstacle.position.z = minZ - minDistance - Math.floor(Math.random() * 20); this.scene.add(newObstacle); // Remove the old obstacle this.scene.remove(obstacle); // Replace in array const index = this.obstacles.indexOf(obstacle); if (index !== -1) { this.obstacles[index] = newObstacle; } // Skip further processing for this obstacle return; } }); this.coins.forEach(coin => { coin.position.z += this.gameSpeed * delta; coin.rotation.y += 0.05; if (coin.position.z > 80) { const laneIndex = Math.floor(Math.random() * 3); coin.position.set( [-5, 0, 5][laneIndex], (Math.random() - 0.5) * 4, -400 ); } if (this.character && Math.abs(coin.position.x - this.character.position.x) < 2.5 && Math.abs(coin.position.y - this.character.position.y) < 2.5 && Math.abs(coin.position.z - this.character.position.z) < 2.5) { coin.position.z = -400; const laneIndex = Math.floor(Math.random() * 3); coin.position.x = [-5, 0, 5][laneIndex]; coin.position.y = (Math.random() - 0.5) * 4; this.score += Math.floor(Math.random() * 31) + 20; // Random value between 20-50 this.updateScoreDisplay(); } }); this.tunnelSegments.forEach(segment => { segment.position.z += this.gameSpeed * delta; // Adjust when segments are repositioned to ensure no gaps if (segment.position.z > 170) { // Find the furthest back segment let minZ = Infinity; let backSegment = null; this.tunnelSegments.forEach(s => { if (s.position.z < minZ) { minZ = s.position.z; backSegment = s; } }); // Position this segment behind the furthest back segment with increased overlap if (backSegment && backSegment !== segment) { segment.position.z = backSegment.position.z - (150 - 25); // More overlap (25 instead of 20) } else { segment.position.z -= 150 * 8; } } }); const positions = this.particles.geometry.attributes.position.array; for (let i = 2; i < positions.length; i += 3) { positions[i] += this.gameSpeed * delta; if (positions[i] > 80) positions[i] = -100; } this.particles.geometry.attributes.position.needsUpdate = true; // Update tunnel light position to follow the character with slight offset for better lighting if (this.tunnelLight) { const lightOffset = new THREE.Vector3(0, 0, -3); this.tunnelLight.position.copy(this.character.position).add(lightOffset); // Pulsate the character light slightly for a tech effect const pulseFactor = 0.2 * Math.sin(this.clock.elapsedTime * 3.0) + 1.0; this.tunnelLight.intensity = 2.0 * pulseFactor; } // Position and rotate score display to face camera if (this.scoreGroup) { // Position the score above and in front of the player const scorePosition = new THREE.Vector3( this.character.position.x, this.character.position.y + 4, this.character.position.z - 8 ); this.scoreGroup.position.copy(scorePosition); // Make score always face the camera this.scoreGroup.lookAt(this.camera.position); } this.renderer.render(this.scene, this.camera); } catch (error) { reportError(error); } } onWindowResize() { const width = this.container.clientWidth; const height = this.container.clientHeight; this.camera.aspect = width / height; this.camera.updateProjectionMatrix(); this.renderer.setSize(width, height); } updateObstacleAppearance(obstacle, typeIndex) { // Remove any existing geometry if (obstacle.geometry) { obstacle.geometry.dispose(); } // Create new geometry based on type let geometry; let material; switch(typeIndex) { case 0: // Top half geometry = new THREE.CylinderGeometry( this.tunnelRadius, this.tunnelRadius, 0.5, 32, 1, false, 0, Math.PI ); material = new THREE.MeshBasicMaterial({ color: 0xff4400, side: THREE.DoubleSide }); break; case 1: // Bottom half geometry = new THREE.CylinderGeometry( this.tunnelRadius, this.tunnelRadius, 0.5, 32, 1, false, Math.PI, Math.PI ); material = new THREE.MeshBasicMaterial({ color: 0x0088ff, side: THREE.DoubleSide }); break; case 2: // Left half geometry = new THREE.CylinderGeometry( this.tunnelRadius, this.tunnelRadius, 0.5, 32, 1, false, Math.PI * 1.5, Math.PI ); material = new THREE.MeshBasicMaterial({ color: 0x66cc00, side: THREE.DoubleSide }); break; case 3: // Right half geometry = new THREE.CylinderGeometry( this.tunnelRadius, this.tunnelRadius, 0.5, 32, 1, false, Math.PI * 0.5, Math.PI ); material = new THREE.MeshBasicMaterial({ color: 0xcc3300, side: THREE.DoubleSide }); break; } // Update the mesh with new geometry and material obstacle.geometry = geometry; obstacle.material = material; obstacle.rotation.x = Math.PI / 2; } createObstacle(typeIndex) { // Define colors for clear visual identification const colors = [ 0xff2200, // TOP = red 0x0088ff, // BOTTOM = blue 0x00cc00, // LEFT = green 0xff8800 // RIGHT = orange ]; // Create flat disc geometry const discGeometry = new THREE.CylinderGeometry( this.tunnelRadius - 0.1, this.tunnelRadius - 0.1, 2, // Thicker for visibility 32, 1, false ); // Create a standard material with emissive properties const material = new THREE.MeshStandardMaterial({ color: colors[typeIndex], emissive: colors[typeIndex], emissiveIntensity: 0.3, side: THREE.DoubleSide, transparent: true, opacity: 0.8 // Semi-transparent to see what's behind }); // Create the obstacle as a Group const obstacle = new THREE.Group(); // Create different obstacle shapes based on type switch(typeIndex) { case 0: // TOP half // Create a custom shape that only covers the top half const topGeometry = new THREE.BoxGeometry( this.tunnelRadius * 2, // width this.tunnelRadius, // height (half of tunnel) 2 // depth ); const topMesh = new THREE.Mesh(topGeometry, material); topMesh.position.y = this.tunnelRadius / 2; // Position at top half obstacle.add(topMesh); break; case 1: // BOTTOM half // Create a custom shape that only covers the bottom half const bottomGeometry = new THREE.BoxGeometry( this.tunnelRadius * 2, // width this.tunnelRadius, // height (half of tunnel) 2 // depth ); const bottomMesh = new THREE.Mesh(bottomGeometry, material); bottomMesh.position.y = -this.tunnelRadius / 2; // Position at bottom half obstacle.add(bottomMesh); break; case 2: // LEFT half // Create a custom shape that only covers the left half const leftGeometry = new THREE.BoxGeometry( this.tunnelRadius, // width (half of tunnel) this.tunnelRadius * 2, // height 2 // depth ); const leftMesh = new THREE.Mesh(leftGeometry, material); leftMesh.position.x = -this.tunnelRadius / 2; // Position at left half obstacle.add(leftMesh); break; case 3: // RIGHT half // Create a custom shape that only covers the right half const rightGeometry = new THREE.BoxGeometry( this.tunnelRadius, // width (half of tunnel) this.tunnelRadius * 2, // height 2 // depth ); const rightMesh = new THREE.Mesh(rightGeometry, material); rightMesh.position.x = this.tunnelRadius / 2; // Position at right half obstacle.add(rightMesh); break; } // Add a text label for debugging const labelNames = ['TOP', 'BOTTOM', 'LEFT', 'RIGHT']; // Store type for collision detection obstacle.userData = { type: typeIndex, typeName: labelNames[typeIndex] }; // Create a debug sphere that shows the exact collision point const debugSphere = new THREE.Mesh( new THREE.SphereGeometry(0.5, 8, 8), new THREE.MeshBasicMaterial({ color: 0xffff00 }) ); debugSphere.visible = false; // Hide by default, can enable for debugging obstacle.add(debugSphere); return obstacle; } playBackgroundMusic() { // Try to play background music without creating a button fallback const attemptPlay = () => { this.bgMusic.play().catch(error => { console.warn("Couldn't autoplay background music:", error); // Try again after a short delay setTimeout(attemptPlay, 1000); }); }; // Initial attempt attemptPlay(); // Also set up event listeners to try playing on user interaction with the page const tryPlayOnInteraction = () => { this.bgMusic.play().catch(e => console.warn("Still couldn't play music after interaction:", e)); // Remove these listeners after first attempt document.removeEventListener('click', tryPlayOnInteraction); document.removeEventListener('keydown', tryPlayOnInteraction); }; document.addEventListener('click', tryPlayOnInteraction); document.addEventListener('keydown', tryPlayOnInteraction); } pauseBackgroundMusic() { if (this.bgMusic) { this.bgMusic.pause(); } } resumeBackgroundMusic() { if (this.bgMusic && this.bgMusic.paused) { this.bgMusic.play().catch(e => console.warn("Couldn't resume music:", e)); } } } function startGame() { try { // Wait for DOM to be completely loaded if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', () => { const game = new CryptoRunner(); window.gameInstance = game; // Save reference for debugging }); } else { const game = new CryptoRunner(); window.gameInstance = game; } } catch (error) { reportError(error); } } // Start the game startGame(); // Helper function for checking if an angle is between two other angles function isAngleBetween(angle, start, end) { // Normalize all angles to 0-2π range const normAngle = ((angle % (Math.PI * 2)) + Math.PI * 2) % (Math.PI * 2); const normStart = ((start % (Math.PI * 2)) + Math.PI * 2) % (Math.PI * 2); let normEnd = ((end % (Math.PI * 2)) + Math.PI * 2) % (Math.PI * 2); // Handle cases where end is less than start (crossing 0/2π boundary) if (normEnd < normStart) { normEnd += Math.PI * 2; } // Check if angle is between start and end return normAngle >= normStart && normAngle <= normEnd; }