import * as THREE from 'three'; import { OrbitControls } from 'three/addons/controls/OrbitControls.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'; // ==================== // ASSET LOADING & UI // ==================== // Initialize loading manager const loadingManager = new THREE.LoadingManager(); const textureLoader = new THREE.TextureLoader(loadingManager); const gltfLoader = new GLTFLoader(loadingManager); let treeModel = null; let assetsLoaded = false; let raceStarted = false; let countdownActive = false; let raceFinished = false; let lapCount = 0; let raceStartTime = 0; let lastLapTime = 0; let lapCooldown = 5000; // 5 seconds cooldown between lap counts let currentLapTime = 0; let bestLapTime = Infinity; // Create background music const bgMusic = new Audio('https://play.rosebud.ai/assets/MAIRIO CIRCUIT.mp3?pnbN'); bgMusic.loop = true; // Create countdown display const countdownDisplay = document.createElement('div'); countdownDisplay.style.position = 'absolute'; countdownDisplay.style.top = '50%'; countdownDisplay.style.left = '50%'; countdownDisplay.style.transform = 'translate(-50%, -50%)'; countdownDisplay.style.fontSize = '100px'; countdownDisplay.style.color = 'white'; countdownDisplay.style.textShadow = '2px 2px 4px rgba(0,0,0,0.5)'; countdownDisplay.style.display = 'none'; countdownDisplay.style.zIndex = '1000'; const parentDiv = document.getElementById('renderDiv'); parentDiv.appendChild(countdownDisplay); // Create timer display const timerDisplay = document.createElement('div'); timerDisplay.style.position = 'fixed'; timerDisplay.style.top = '20px'; timerDisplay.style.right = '20px'; timerDisplay.style.padding = '10px'; timerDisplay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; timerDisplay.style.color = '#fff'; timerDisplay.style.borderRadius = '5px'; timerDisplay.style.fontFamily = 'Arial, sans-serif'; timerDisplay.style.fontSize = '18px'; timerDisplay.style.zIndex = '1000'; document.body.appendChild(timerDisplay); let canvas = document.getElementById('threeRenderCanvas'); if (!canvas) { canvas = document.createElement('canvas'); canvas.id = 'threeRenderCanvas'; parentDiv.appendChild(canvas); } // Create a 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); 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'; }; // ==================== // SCENE, CAMERA & RENDERER // ==================== const scene = new THREE.Scene(); const clock = new THREE.Clock(); const camera = new THREE.PerspectiveCamera( 75, canvas.offsetWidth / canvas.offsetHeight, 0.1, 1000 ); camera.position.set(0, 50, 100); 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; // ==================== // POST-PROCESSING // ==================== const composer = new EffectComposer(renderer); const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); const bloomPass = new UnrealBloomPass( new THREE.Vector2(window.innerWidth, window.innerHeight), 0.2, 0.4, 0.9 ); composer.addPass(bloomPass); const smaaPass = new SMAAPass( window.innerWidth * renderer.getPixelRatio(), window.innerHeight * renderer.getPixelRatio() ); composer.addPass(smaaPass); composer.setSize(parentDiv.clientWidth, parentDiv.clientHeight); // ==================== // ENVIRONMENT & LIGHTING // ==================== const skyColor = new THREE.Color(0x87ceeb); const groundColor = new THREE.Color(0xffffff); 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(500, 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); const sunLight = new THREE.DirectionalLight(skyColor, 2.0); sunLight.position.set(-50, 100, -50); sunLight.castShadow = true; sunLight.shadow.mapSize.width = 2048; sunLight.shadow.mapSize.height = 2048; sunLight.shadow.camera.near = 10; sunLight.shadow.camera.far = 400; sunLight.shadow.camera.left = -100; sunLight.shadow.camera.right = 100; sunLight.shadow.camera.top = 100; sunLight.shadow.camera.bottom = -100; sunLight.shadow.bias = -0.001; scene.add(sunLight); const hemiLight = new THREE.HemisphereLight(skyColor, groundColor, 0.6); scene.add(hemiLight); // ==================== // TRACK & TERRAIN // ==================== const straightLength = 240; // Increased from 180 const cornerRadius = 60; // Increased proportionally const trackWidth = 50; // Track width function createTerrain() { const size = 600; const geometry = new THREE.PlaneGeometry(size, size); const texture = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_diffuse.png?iLH8'); const normalMap = textureLoader.load('https://play.rosebud.ai/assets/3D_playground_grass_normal.png?xJeT'); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set(20, 20); texture.encoding = THREE.sRGBEncoding; normalMap.wrapS = normalMap.wrapT = THREE.RepeatWrapping; normalMap.repeat.set(20, 20); const material = new THREE.MeshStandardMaterial({ map: texture, normalMap: normalMap, normalScale: new THREE.Vector2(2, 2), roughness: 0.8, metalness: 0.1, envMapIntensity: 1.0, }); const terrain = new THREE.Mesh(geometry, material); terrain.rotation.x = -Math.PI / 2; terrain.receiveShadow = true; scene.add(terrain); } createTerrain(); // Function to place trees around the track function createTrees() { // Load the tree model gltfLoader.load('https://play.rosebud.ai/assets/tree.glb?UdaB', (gltf) => { treeModel = gltf.scene; treeModel.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); // Define tree positions around the track const treePositions = [{ x: -straightLength - 40, z: -cornerRadius - 40, scale: 7.5 }, { x: straightLength + 40, z: -cornerRadius - 40, scale: 7.2 }, { x: -straightLength - 40, z: cornerRadius + 40, scale: 7.8 }, { x: straightLength + 40, z: cornerRadius + 40, scale: 7.4 }, { x: -straightLength / 2 - 60, z: 0, scale: 8.0 }, { x: straightLength / 2 + 60, z: 0, scale: 7.6 }, { x: 0, z: -cornerRadius - 45, scale: 7.7 }, { x: 0, z: cornerRadius + 45, scale: 7.5 }, { x: -straightLength - 30, z: -cornerRadius / 2 - 35, scale: 7.3 }, { x: straightLength + 30, z: cornerRadius / 2 + 35, scale: 7.9 }, { x: -straightLength / 2 - 50, z: cornerRadius + 45, scale: 7.4 }, { x: straightLength / 2 + 50, z: -cornerRadius - 45, scale: 7.6 }]; // Place trees at defined positions treePositions.forEach(pos => { const tree = treeModel.clone(); tree.position.set(pos.x, 8, pos.z); tree.scale.set(pos.scale, pos.scale, pos.scale); // Add slight random variation to height and rotation tree.rotation.y = Math.random() * Math.PI * 2; scene.add(tree); }); }); } createTrees(); // Global variable to store the track shape (defines the allowed track area) let globalTrackShape; // Create a donut–shaped track using a ring geometry. function createTrack() { globalTrackShape = new THREE.Shape(); globalTrackShape.moveTo(-straightLength / 2, -cornerRadius); globalTrackShape.lineTo(straightLength / 2, -cornerRadius); globalTrackShape.absarc(straightLength / 2, 0, cornerRadius, -Math.PI / 2, Math.PI / 2, false); globalTrackShape.lineTo(-straightLength / 2, cornerRadius); globalTrackShape.absarc(-straightLength / 2, 0, cornerRadius, Math.PI / 2, -Math.PI / 2, false); // Create the inner hole. const hole = new THREE.Path(); const innerStraightLength = straightLength - trackWidth; const innerCornerRadius = cornerRadius - trackWidth; hole.moveTo(-innerStraightLength / 2, -innerCornerRadius); hole.lineTo(innerStraightLength / 2, -innerCornerRadius); hole.absarc(innerStraightLength / 2, 0, innerCornerRadius, -Math.PI / 2, Math.PI / 2, false); hole.lineTo(-innerStraightLength / 2, innerCornerRadius); hole.absarc(-innerStraightLength / 2, 0, innerCornerRadius, Math.PI / 2, -Math.PI / 2, false); globalTrackShape.holes.push(hole); const geometry = new THREE.ShapeGeometry(globalTrackShape); geometry.rotateX(-Math.PI / 2); const material = new THREE.MeshStandardMaterial({ color: 0x333333, side: THREE.DoubleSide }); const track = new THREE.Mesh(geometry, material); track.position.y = 0.1; track.receiveShadow = true; track.castShadow = false; scene.add(track); } createTrack(); // ==================== // NEW APPROACH: ENFORCE TRACK BOUNDARY // ==================== function pointIsOnTrack(point2D) { let inside = false; const polygon = globalTrackShape.getPoints(50); for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) { const xi = polygon[i].x, yi = polygon[i].y; const xj = polygon[j].x, yj = polygon[j].y; const intersect = ((yi > point2D.y) !== (yj > point2D.y)) && (point2D.x < (xj - xi) * (point2D.y - yi) / (yj - yi) + xi); if (intersect) inside = !inside; } let inHole = false; if (globalTrackShape.holes.length > 0) { const holePolygon = globalTrackShape.holes[0].getPoints(50); inHole = false; for (let i = 0, j = holePolygon.length - 1; i < holePolygon.length; j = i++) { const xi = holePolygon[i].x, yi = holePolygon[i].y; const xj = holePolygon[j].x, yj = holePolygon[j].y; const intersect = ((yi > point2D.y) !== (yj > point2D.y)) && (point2D.x < (xj - xi) * (point2D.y - yi) / (yj - yi) + xi); if (intersect) inHole = !inHole; } } return inside && !inHole; } // ==================== // RACING VEHICLE CLASSES & LOGIC // ==================== class Kart { constructor(isPlayer, color, startPosition, startRotation) { this.trackOuterRadius = straightLength / 2 + cornerRadius; this.trackInnerRadius = this.trackOuterRadius - trackWidth; this.isPlayer = isPlayer; this.speed = 0; this.prevPosition = new THREE.Vector3(); this.hasGun = false; // Particle system for drift effect const particleCount = 100; const particles = new Float32Array(particleCount * 3); const particleGeometry = new THREE.BufferGeometry(); particleGeometry.setAttribute('position', new THREE.Float32BufferAttribute(particles, 3)); const particleMaterial = new THREE.PointsMaterial({ color: 0x888888, size: 0.5, transparent: true, opacity: 0.6, sizeAttenuation: true }); this.particles = new THREE.Points(particleGeometry, particleMaterial); this.particles.visible = false; scene.add(this.particles); this.particlePool = []; for (let i = 0; i < particleCount; i++) { this.particlePool.push({ position: new THREE.Vector3(), velocity: new THREE.Vector3(), life: 0 }); } this.maxSpeed = 1.5; this.acceleration = 0.006; this.friction = 0.982; this.turnSpeed = 0.04; this.drifting = false; this.driftingTurnMultiplier = 1.5; this.driftingFriction = 0.995; if (isPlayer) { const spriteMap = textureLoader.load('https://play.rosebud.ai/assets/mario driving kart from behind.png?eMDQ'); const spriteMaterial = new THREE.SpriteMaterial({ map: spriteMap, sizeAttenuation: true }); this.mesh = new THREE.Sprite(spriteMaterial); this.mesh.scale.set(7, 7, 1); this.mesh.position.copy(startPosition); this.mesh.rotation.y = startRotation; this.mesh.material.rotation = 0; } else if (color === 0x00ff00) { const spriteMap = textureLoader.load('https://play.rosebud.ai/assets/luigi driving kart from behind.png?Z23z'); const spriteMaterial = new THREE.SpriteMaterial({ map: spriteMap, sizeAttenuation: true }); this.mesh = new THREE.Sprite(spriteMaterial); this.mesh.scale.set(7, 7, 1); this.mesh.position.copy(startPosition); this.mesh.rotation.y = startRotation; this.mesh.material.rotation = 0; } else if (color === 0xffff00) { const spriteMap = textureLoader.load('https://play.rosebud.ai/assets/princess peach driving kart from behind.png?q08M'); const spriteMaterial = new THREE.SpriteMaterial({ map: spriteMap, sizeAttenuation: true }); this.mesh = new THREE.Sprite(spriteMaterial); this.mesh.scale.set(7, 7, 1); this.mesh.position.copy(startPosition); this.mesh.rotation.y = startRotation; this.mesh.material.rotation = 0; } else if (color === 0x0000ff) { const spriteMap = textureLoader.load('https://play.rosebud.ai/assets/donkey kong driving kart from behind.png?X7Kz'); const spriteMaterial = new THREE.SpriteMaterial({ map: spriteMap, sizeAttenuation: true }); this.mesh = new THREE.Sprite(spriteMaterial); this.mesh.scale.set(7, 7, 1); this.mesh.position.copy(startPosition); this.mesh.rotation.y = startRotation; this.mesh.material.rotation = 0; } else { const geometry = new THREE.BoxGeometry(4, 2, 6); const material = new THREE.MeshStandardMaterial({ color: color, metalness: 0, roughness: 0 }); this.mesh = new THREE.Mesh(geometry, material); this.mesh.castShadow = true; this.mesh.receiveShadow = true; this.mesh.position.copy(startPosition); this.mesh.rotation.y = startRotation; } this.waypoints = []; this.targetWaypointIndex = 0; } isOnTrack() { const pos2D = new THREE.Vector2(this.mesh.position.x, this.mesh.position.z); return pointIsOnTrack(pos2D); } update(deltaTime) { if (!raceStarted) return; this.prevPosition.copy(this.mesh.position); // ----- PLAYER CONTROL ----- if (this.isPlayer) { if (keysPressed.up) { this.speed += this.acceleration * deltaTime * 60; } else if (keysPressed.down) { this.speed -= this.acceleration * deltaTime * 60; } else { this.speed *= this.friction; } if (Math.abs(this.speed) > 0.001) { if (keysPressed.jump && (keysPressed.left || keysPressed.right)) { if (!this.drifting) { // Play drift sound when starting to drift const driftSound = new Audio('https://play.rosebud.ai/assets/drift.mp3?d5Dr'); driftSound.play().catch(error => { console.log("Drift sound playback failed:", error); }); } this.drifting = true; this.particles.visible = true; this.emitDriftParticles(); } else { this.drifting = false; this.particles.visible = false; } const currentTurnSpeed = this.turnSpeed * (this.drifting ? this.driftingTurnMultiplier : 1); if (keysPressed.left) { this.mesh.rotation.y += currentTurnSpeed * deltaTime * 60 * (this.speed > 0 ? 1 : -1); } if (keysPressed.right) { this.mesh.rotation.y -= currentTurnSpeed * deltaTime * 60 * (this.speed > 0 ? 1 : -1); } } this.speed *= this.drifting ? this.driftingFriction : this.friction; this.speed = THREE.MathUtils.clamp(this.speed, -this.maxSpeed, this.maxSpeed); } // ----- AI CONTROL ----- else { if (this.waypoints.length > 0) { const target = this.waypoints[this.targetWaypointIndex]; const directionToTarget = new THREE.Vector3().subVectors(target, this.mesh.position); const desiredAngle = Math.atan2(directionToTarget.x, directionToTarget.z); let currentAngle = this.mesh.rotation.y; let angleDiff = desiredAngle - currentAngle; angleDiff = Math.atan2(Math.sin(angleDiff), Math.cos(angleDiff)); if (angleDiff > 0.05) { this.mesh.rotation.y += this.turnSpeed * deltaTime * 60; } else if (angleDiff < -0.05) { this.mesh.rotation.y -= this.turnSpeed * deltaTime * 60; } this.speed += this.acceleration * deltaTime * 60; this.speed = Math.min(this.speed, this.maxSpeed * 0.9); if (directionToTarget.length() < 5) { this.targetWaypointIndex = (this.targetWaypointIndex + 1) % this.waypoints.length; } } this.speed *= this.friction; } // ----- MOVE THE KART ----- this.mesh.position.x += Math.sin(this.mesh.rotation.y) * this.speed * deltaTime * 60; this.mesh.position.z += Math.cos(this.mesh.rotation.y) * this.speed * deltaTime * 60; // Enforce track boundary: if off track, revert position and stop. if (!this.isOnTrack()) { this.mesh.position.copy(this.prevPosition); this.speed = 0; } if (this.drifting) { const positions = this.particles.geometry.attributes.position.array; for (let i = 0; i < this.particlePool.length; i++) { const particle = this.particlePool[i]; if (particle.life > 0) { particle.position.add(particle.velocity); particle.life -= deltaTime; positions[i * 3] = particle.position.x; positions[i * 3 + 1] = particle.position.y; positions[i * 3 + 2] = particle.position.z; } } this.particles.geometry.attributes.position.needsUpdate = true; } } emitDriftParticles() { const spawnPoint = new THREE.Vector3( this.mesh.position.x - Math.sin(this.mesh.rotation.y) * 3, this.mesh.position.y, this.mesh.position.z - Math.cos(this.mesh.rotation.y) * 3 ); for (const particle of this.particlePool) { if (particle.life <= 0) { particle.position.copy(spawnPoint); particle.velocity.set( (Math.random() - 0.5) * 0.2, 0.1, (Math.random() - 0.5) * 0.2 ); particle.life = 0.5; break; } } } } // ==================== // WAYPOINTS & KARTS SETUP // ==================== const waypoints = []; // Calculate waypoints along the centerline of the track. const centerOffset = trackWidth / 2; function addStraightWaypoints(startX, endX, y, numPoints) { for (let i = 0; i <= numPoints; i++) { const t = i / numPoints; const x = startX + (endX - startX) * t; waypoints.push(new THREE.Vector3(x, 1, y)); } } function addCurveWaypoints(centerX, centerZ, radius, startAngle, endAngle, numPoints) { for (let i = 0; i <= numPoints; i++) { const t = i / numPoints; const angle = startAngle + (endAngle - startAngle) * t; const x = centerX + Math.cos(angle) * radius; const z = centerZ + Math.sin(angle) * radius; waypoints.push(new THREE.Vector3(x, 1, z)); } } // Bottom straight addStraightWaypoints(-straightLength / 2, straightLength / 2, -cornerRadius + centerOffset, 8); // Right curve addCurveWaypoints(straightLength / 2, 0, cornerRadius - centerOffset, -Math.PI / 2, Math.PI / 2, 6); // Top straight addStraightWaypoints(straightLength / 2, -straightLength / 2, cornerRadius - centerOffset, 8); // Left curve addCurveWaypoints(-straightLength / 2, 0, cornerRadius - centerOffset, Math.PI / 2, -Math.PI / 2, 6); // ------------------------- // START LINE & LAP DETECTION // ------------------------- // Define start line for lap detection const startLine = { x: 0, // Centered on x-axis z: -cornerRadius + trackWidth / 4, // Match the player start position length: trackWidth }; // ------------------------- // CREATE PLAYER & AI KARTS // ------------------------- // Create the player kart const startPosition = new THREE.Vector3(0, 2.8, -cornerRadius + trackWidth / 4); let playerKart = new Kart(true, 0xff0000, startPosition, -Math.PI / 2); scene.add(playerKart.mesh); // Create AI karts const aiColors = [0x0000ff, 0x00ff00, 0xffff00]; const aiKarts = []; for (let i = 0; i < aiColors.length; i++) { const offset = (i + 1) * 5 - 7.5; const aiStartPos = new THREE.Vector3(offset, 2.8, -cornerRadius + trackWidth / 4); const aiKart = new Kart(false, aiColors[i], aiStartPos, -Math.PI / 2); aiKart.waypoints = waypoints; aiKarts.push(aiKart); scene.add(aiKart.mesh); } const karts = [playerKart, ...aiKarts]; // For lap detection, store the previous player position. let lastPlayerPos = playerKart.mesh.position.clone(); // ==================== // ITEM BOX & GUN/BULLET LOGIC // ==================== let itemBox = null; function createItemBox() { return new Promise((resolve) => { gltfLoader.load('https://play.rosebud.ai/assets/blue shiny cube.glb?89BV', (gltf) => { const box = gltf.scene; box.scale.set(4, 4, 4); box.position.set(0, 2, -cornerRadius / 2); box.traverse((child) => { if (child.isMesh) { child.castShadow = true; child.receiveShadow = true; } }); scene.add(box); resolve(box); }); }); } createItemBox().then(box => { itemBox = box; }); class Bullet { constructor(position, direction) { const geometry = new THREE.SphereGeometry(0.5, 8, 8); const material = new THREE.MeshBasicMaterial({ color: 0xffff00 }); this.mesh = new THREE.Mesh(geometry, material); this.mesh.position.copy(position); this.direction = direction.clone().normalize(); this.speed = 75; this.lifetime = 3; scene.add(this.mesh); } update(delta) { const displacement = this.direction.clone().multiplyScalar(this.speed * delta); this.mesh.position.add(displacement); this.lifetime -= delta; return this.lifetime > 0; } } const bullets = []; function fireBullet() { // Play gun sound const gunSound = new Audio('https://play.rosebud.ai/assets/gun.mp3?QBYx'); gunSound.play().catch(error => { console.log("Gun sound playback failed:", error); }); const direction = new THREE.Vector3( Math.sin(playerKart.mesh.rotation.y), 0, Math.cos(playerKart.mesh.rotation.y) ); const bulletPosition = playerKart.mesh.position.clone().add(direction.clone().multiplyScalar(5)); const bullet = new Bullet(bulletPosition, direction); bullets.push(bullet); } // ==================== // MOBILE & KEYBOARD CONTROLS // ==================== const keysPressed = { up: false, down: false, left: false, right: false, jump: false, }; function addButtonListeners(buttonId, key) { const button = document.getElementById(buttonId); if (!button) return; button.addEventListener('touchstart', (event) => { event.preventDefault(); keysPressed[key] = true; }, { passive: false }); button.addEventListener('touchend', (event) => { event.preventDefault(); keysPressed[key] = false; }, { passive: false }); button.addEventListener('mousedown', (event) => { event.preventDefault(); keysPressed[key] = true; }); button.addEventListener('mouseup', (event) => { event.preventDefault(); keysPressed[key] = false; }); button.addEventListener('mouseleave', (event) => { event.preventDefault(); keysPressed[key] = false; }); } const dpadContainer = document.createElement('div'); dpadContainer.id = 'dpadContainer'; document.body.appendChild(dpadContainer); ['up', 'down', 'left', 'right'].forEach(direction => { const button = document.createElement('button'); button.id = `${direction}Button`; button.classList.add('dpad-button'); let iconUrl = ''; switch (direction) { case 'up': iconUrl = 'https://play.rosebud.ai/assets/up_chevron.png?ABwZ'; break; case 'down': iconUrl = 'https://play.rosebud.ai/assets/down_chevron.png?JyeS'; break; case 'left': iconUrl = 'https://play.rosebud.ai/assets/left_chevron.png?lrRZ'; break; case 'right': iconUrl = 'https://play.rosebud.ai/assets/right_chevron.png?X09I'; break; } button.style.backgroundImage = `url('${iconUrl}')`; dpadContainer.appendChild(button); }); const jumpContainer = document.createElement('div'); jumpContainer.id = 'jumpContainer'; document.body.appendChild(jumpContainer); const shootIndicator = document.createElement('div'); shootIndicator.style.position = 'fixed'; shootIndicator.style.top = '20px'; shootIndicator.style.left = '50%'; shootIndicator.style.transform = 'translateX(-50%)'; shootIndicator.style.padding = '10px 20px'; shootIndicator.style.backgroundColor = 'rgba(0, 0, 0, 0.7)'; shootIndicator.style.color = '#fff'; shootIndicator.style.borderRadius = '5px'; shootIndicator.style.fontFamily = 'Arial, sans-serif'; shootIndicator.style.fontSize = '18px'; shootIndicator.style.display = 'none'; shootIndicator.style.zIndex = '1000'; shootIndicator.textContent = 'Press F to shoot!'; document.body.appendChild(shootIndicator); const jumpButton = document.createElement('button'); jumpButton.id = 'jumpButton'; jumpButton.classList.add('jump-button'); jumpButton.style.backgroundImage = `url('https://play.rosebud.ai/assets/Up-Arrow.png?vg11')`; jumpContainer.appendChild(jumpButton); addButtonListeners('upButton', 'up'); addButtonListeners('downButton', 'down'); addButtonListeners('leftButton', 'left'); addButtonListeners('rightButton', 'right'); addButtonListeners('jumpButton', 'jump'); window.addEventListener('keydown', (event) => { switch (event.code) { case 'ArrowUp': case 'KeyW': keysPressed.up = true; break; case 'ArrowDown': case 'KeyS': keysPressed.down = true; break; case 'ArrowLeft': case 'KeyA': keysPressed.left = true; break; case 'ArrowRight': case 'KeyD': keysPressed.right = true; break; case 'Space': keysPressed.jump = true; break; case 'KeyF': if (playerKart.hasGun) { fireBullet(); } break; default: break; } }); window.addEventListener('keyup', (event) => { switch (event.code) { case 'ArrowUp': case 'KeyW': keysPressed.up = false; break; case 'ArrowDown': case 'KeyS': keysPressed.down = false; break; case 'ArrowLeft': case 'KeyA': keysPressed.left = false; break; case 'ArrowRight': case 'KeyD': keysPressed.right = false; break; case 'Space': keysPressed.jump = false; break; default: break; } }); const styles = ` /* D-Pad Container */ #dpadContainer { position: fixed; bottom: 150px; left: 30px; width: 150px; height: 150px; display: grid; grid-template-areas: ". up ." "left . right" ". down ."; grid-gap: 10px; z-index: 1000; } #upButton { grid-area: up; } #downButton { grid-area: down; } #leftButton { grid-area: left; } #rightButton { grid-area: right; } .dpad-button { width: 50px; height: 50px; margin: 0; background-color: rgba(0, 0, 0, 0.5); background-size: 60%; background-repeat: no-repeat; background-position: center; border: none; border-radius: 12px; opacity: 0.9; transition: opacity 0.2s, transform 0.1s, box-shadow 0.2s, filter 0.2s; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); } .dpad-button:active { opacity: 1; transform: scale(0.95); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); filter: brightness(1.1); } #jumpContainer { position: fixed; bottom: 150px; right: 30px; width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; z-index: 1000; } .jump-button { width: 70px; height: 70px; background-color: rgba(0, 0, 0, 0.5); background-size: 60%; background-repeat: no-repeat; background-position: center; border: none; border-radius: 35px; opacity: 0.9; transition: opacity 0.2s, transform 0.1s, box-shadow 0.2s, filter 0.2s; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); background-image: url('https://play.rosebud.ai/assets/Up-Arrow.png?vg11'); } .jump-button:active { opacity: 1; transform: scale(0.95); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); filter: brightness(1.1); } @media (max-width: 600px) { #dpadContainer { bottom: 120px; left: 25px; width: 120px; height: 120px; } .dpad-button { width: 40px; height: 40px; background-size: 60%; } #jumpContainer { bottom: 120px; right: 25px; width: 60px; height: 60px; } .jump-button { width: 60px; height: 60px; background-size: 60%; } } `; const styleSheet = document.createElement("style"); styleSheet.type = "text/css"; styleSheet.innerText = styles; document.head.appendChild(styleSheet); // ==================== // CAMERA FOLLOW LOGIC // ==================== const controls = new OrbitControls(camera, renderer.domElement); controls.enabled = false; function updateCamera() { const cameraOffset = new THREE.Vector3(0, 12, -20); const offsetRotated = cameraOffset.clone().applyAxisAngle(new THREE.Vector3(0, 1, 0), playerKart.mesh.rotation.y); camera.position.copy(playerKart.mesh.position).add(offsetRotated); camera.lookAt(playerKart.mesh.position); } // ==================== // HANDLE WINDOW RESIZE // ==================== function onWindowResize() { const width = parentDiv.clientWidth; const height = parentDiv.clientHeight; camera.aspect = width / height; camera.updateProjectionMatrix(); renderer.setSize(width, height); composer.setSize(width, height); bloomPass.resolution.set(width, height); smaaPass.setSize(width, height); } window.addEventListener('resize', onWindowResize); const resizeObserver = new ResizeObserver(onWindowResize); resizeObserver.observe(parentDiv); // ==================== // MAIN ANIMATION LOOP // ==================== function startCountdown() { if (countdownActive) return; countdownActive = true; countdownDisplay.style.display = 'block'; // Play countdown sound const countdownSound = new Audio('https://play.rosebud.ai/assets/countdown.mp3?u0tk'); countdownSound.play().catch(error => { console.log("Countdown audio playback failed:", error); }); const countdown = (number) => { if (number > 0) { countdownDisplay.textContent = number; setTimeout(() => countdown(number - 1), 1000); } else if (number === 0) { countdownDisplay.textContent = 'GO!'; raceStarted = true; raceStartTime = Date.now(); lastPlayerPos.copy(playerKart.mesh.position); // Start playing background music when race starts bgMusic.play().catch(error => { console.log("Audio playback failed:", error); }); setTimeout(() => { countdownDisplay.style.display = 'none'; }, 1000); } }; countdown(3); } function animate() { requestAnimationFrame(animate); const delta = clock.getDelta(); if (assetsLoaded && !countdownActive && !raceStarted) { startCountdown(); } if (assetsLoaded) { if (raceStarted && !raceFinished) { const currentTime = Date.now(); if (raceStartTime === 0) { raceStartTime = currentTime; } currentLapTime = (currentTime - raceStartTime) / 1000; if (!raceFinished) { // LAP DETECTION: check if player crosses start area const playerPos = playerKart.mesh.position; const atStartArea = playerPos.z < (-cornerRadius + trackWidth / 2); const withinTrackWidth = Math.abs(playerPos.x) < (trackWidth / 2); const timeSinceLastLap = currentTime - lastLapTime; // Check if player is in start area and enough time has passed if (atStartArea && withinTrackWidth && timeSinceLastLap > lapCooldown) { lapCount++; lastLapTime = currentTime; if (lapCount === 3) { const totalTime = currentTime - raceStartTime; if (totalTime < bestLapTime || bestLapTime === Infinity) { bestLapTime = totalTime; } raceFinished = true; // Stop the kart when race is finished playerKart.speed = 0; countdownDisplay.style.display = 'block'; countdownDisplay.textContent = 'FINISHED!'; // Stop background music and play win sound bgMusic.pause(); bgMusic.currentTime = 0; const winSound = new Audio('https://play.rosebud.ai/assets/win.mp3?sLs1'); winSound.play().catch(error => { console.log("Win sound playback failed:", error); }); } } } lastPlayerPos.copy(playerKart.mesh.position); const minutes = Math.floor(currentLapTime / 60); const seconds = Math.floor(currentLapTime % 60); const milliseconds = Math.floor((currentLapTime * 100) % 100); const bestMinutes = Math.floor(bestLapTime / 60); const bestSeconds = Math.floor(bestLapTime % 60); const bestMilliseconds = Math.floor((bestLapTime * 100) % 100); timerDisplay.innerHTML = `Lap ${lapCount}/3
` + `Current Total: ${minutes}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(2, '0')}
` + `Best Total: ${bestLapTime === Infinity ? '-:--.--' : `${bestMinutes}:${bestSeconds.toString().padStart(2, '0')}.${bestMilliseconds.toString().padStart(2, '0')}`}`; } if (!playerKart.hasGun && itemBox) { const distance = playerKart.mesh.position.distanceTo(itemBox.position); if (distance < 5) { playerKart.hasGun = true; console.log("Gun collected!"); // Play item box collection sound const itemBoxSound = new Audio('https://play.rosebud.ai/assets/item box.mp3?fqrA'); itemBoxSound.play().catch(error => { console.log("Item box sound playback failed:", error); }); scene.remove(itemBox); itemBox = null; shootIndicator.style.display = 'block'; } } if (!raceFinished) { karts.forEach(kart => kart.update(delta)); } updateCamera(); if (itemBox) { itemBox.rotation.y += delta * 3; itemBox.position.y = 2 + Math.sin(clock.elapsedTime * 2) * 0.5; } for (let i = bullets.length - 1; i >= 0; i--) { if (!bullets[i].update(delta)) { scene.remove(bullets[i].mesh); bullets.splice(i, 1); } else { for (let j = aiKarts.length - 1; j >= 0; j--) { if (bullets[i] && bullets[i].mesh.position.distanceTo(aiKarts[j].mesh.position) < 3) { scene.remove(aiKarts[j].mesh); aiKarts.splice(j, 1); console.log("Enemy hit!"); // Play kill sound when enemy is hit const killSound = new Audio('https://play.rosebud.ai/assets/kill.mp3?fI0s'); killSound.play().catch(error => { console.log("Kill sound playback failed:", error); }); scene.remove(bullets[i].mesh); bullets.splice(i, 1); break; } } } } } composer.render(); } animate();

Other games like this

About MAIRIO KART