Tool Request: call_WggpKbrAx5ktlRbsigenTt3u - create_file
{"content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <title>3D Go-Cart Racing Game</title>\n <style>\n body { margin: 0; overflow: hidden; }\n #info { position: absolute; top: 10px; width: 100%; text-align: center; color: white; font-family: sans-serif; z-index: 1; }\n </style>\n</head>\n<body>\n <div id=\"info\">Use Arrow Keys (WASD also supported) to Control the Go-Cart</div>\n <!-- Include Three.js from CDN -->\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js\"></script>\n <script>\n let scene, camera, renderer;\n let goKart, track;\n let keys = {};\n let speed = 0;\n let maxSpeed = 0.5;\n let acceleration = 0.01;\n let friction = 0.005;\n let rotationSpeed = 0.03;\n\n function init() {\n // Create scene and camera\n scene = new THREE.Scene();\n scene.background = new THREE.Color(0x87CEEB); // Light blue sky\n\n camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);\n camera.position.set(0, 5, -10);\n camera.lookAt(0, 0, 0);\n\n renderer = new THREE.WebGLRenderer({ antialias: true });\n renderer.setSize(window.innerWidth, window.innerHeight);\n document.body.appendChild(renderer.domElement);\n\n // Lighting\n const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);\n scene.add(ambientLight);\n const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);\n directionalLight.position.set(5, 10, 7.5);\n scene.add(directionalLight);\n\n // Create ground\n const groundGeometry = new THREE.PlaneGeometry(200, 200);\n const groundMaterial = new THREE.MeshPhongMaterial({ color: 0x228B22 }); // green\n const ground = new THREE.Mesh(groundGeometry, groundMaterial);\n ground.rotation.x = -Math.PI / 2;\n scene.add(ground);\n\n // Create a simple track using lines (a rectangular track)\n const trackShape = new THREE.Shape();\n trackShape.moveTo(-50, -30);\n trackShape.lineTo(50, -30);\n trackShape.lineTo(50, 30);\n trackShape.lineTo(-50, 30);\n trackShape.lineTo(-50, -30);\n \n const trackGeometry = new THREE.ShapeGeometry(trackShape);\n const trackMaterial = new THREE.MeshBasicMaterial({ color: 0x808080, side: THREE.DoubleSide });\n track = new THREE.Mesh(trackGeometry, trackMaterial);\n track.rotation.x = -Math.PI / 2;\n track.position.y = 0.01; // slight offset above ground\n scene.add(track);\n\n // Create the go-cart (simple box representation)\n const goKartGeometry = new THREE.BoxGeometry(1, 0.5, 2);\n const goKartMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 });\n goKart = new THREE.Mesh(goKartGeometry, goKartMaterial);\n goKart.position.y = 0.25;\n scene.add(goKart);\n\n // Camera follows goKart\n updateCamera();\n \n // Event listeners for keys\n window.addEventListener('keydown', onKeyDown);\n window.addEventListener('keyup', onKeyUp);\n window.addEventListener('resize', onWindowResize, false);\n }\n\n function onWindowResize() {\n camera.aspect = window.innerWidth / window.innerHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(window.innerWidth, window.innerHeight);\n }\n\n function onKeyDown(event) {\n keys[event.key.toLowerCase()] = true;\n }\n\n function onKeyUp(event) {\n keys[event.key.toLowerCase()] = false;\n }\n\n function updateCamera() {\n // Set camera behind the goKart.\n const relativeCameraOffset = new THREE.Vector3(0, 5, -10);\n const cameraOffset = relativeCameraOffset.applyMatrix4(goKart.matrixWorld);\n camera.position.lerp(cameraOffset, 0.05);\n camera.lookAt(goKart.position);\n }\n\n function animate() {\n requestAnimationFrame(animate);\n updateGame();\n renderer.render(scene, camera);\n }\n\n function updateGame() {\n // Handle keyboard input\n // Forward movement: arrow up or 'w'\n if (keys['arrowup'] || keys['w']) {\n speed = Math.min(speed + acceleration, maxSpeed);\n } else if (keys['arrowdown'] || keys['s']) { // reverse control\n speed = Math.max(speed - acceleration, -maxSpeed/2);\n } else {\n // apply friction on no accelerator\n if (speed > 0) {\n speed = Math.max(speed - friction, 0);\n } else if (speed < 0) {\n speed = Math.min(speed + friction, 0);\n }\n }\n\n // Rotation: left/right arrow keys or A/D\n if ((keys['arrowleft'] || keys['a'])) {\n goKart.rotation.y += rotationSpeed * (speed >= 0 ? 1 : -1);\n }\n if ((keys['arrowright'] || keys['d'])) {\n goKart.rotation.y -= rotationSpeed * (speed >= 0 ? 1 : -1);\n }\n\n // Update goKart position based on its facing\n let forward = new THREE.Vector3(0, 0, 1);\n forward.applyAxisAngle(new THREE.Vector3(0,1,0), goKart.rotation.y);\n goKart.position.add(forward.multiplyScalar(speed));\n\n // Optional: Boundaries for the track (simple collision with the rectangular track boundaries)\n if (goKart.position.x < -49) { goKart.position.x = -49; speed = 0; }\n if (goKart.position.x > 49) { goKart.position.x = 49; speed = 0; }\n if (goKart.position.z < -29) { goKart.position.z = -29; speed = 0; }\n if (goKart.position.z > 29) { goKart.position.z = 29; speed = 0; }\n\n // Update camera to follow the goKart\n updateCamera();\n }\n\n init();\n animate();\n </script>\n</body>\n</html>\n","file_name": "index.html"}