Lap Racer

{"name":"Lap Racer","description":"Get ready to race in 'Lap Racer'! Drive your car around a track, complete laps, and strive for the best time. Can you cross the finish line and beat your own record?","photo":null,"view_count":2,"fork_count":0,"expires_at":null,"created_at":"2024-09-18T21:19:40.580170Z","updated_at":"2024-09-18T21:19:40.580173Z","user_id":119,"status":"PRIVATE","parent_id":3261,"id":3264,"user":{"photo":null,"email":null,"recess_id":"f4737c87-29cc-445a-8c68-a81290c17cc3","created_at":"2024-06-24T22:27:17.750758Z","reset_token":null,"stripe_customer_id":null,"seats":null,"username":"alex","id":119,"password_hash":null,"updated_at":"2024-06-24T22:27:17.750761Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"function keyPressed() {\n if (keyIsDown(SHIFT)) {\n if (key === 'W') {\n gear++;\n if (gear > 5) {\n gear = 5;\n }\n } else if (key === 'S') {\n gear--;\n if (gear < 1) {\n gear = 1;\n }\n }\n }\n}\n\nlet car;\nlet carX, carY;\nlet speed = 0;\nlet gear = 1;\nlet carAngle = 0; // Initial direction of the car (in radians)\nlet carSprite;\nlet trackPoints;\nlet trackwidth = 200;\n\nconst gears = [\n { maxSpeed: 2, acceleration: 0.2 },\n { maxSpeed: 4, acceleration: 0.15 },\n { maxSpeed: 6, acceleration: 0.1 },\n { maxSpeed: 8, acceleration: 0.05 },\n { maxSpeed: 10, acceleration: 0.025 }\n];\n\nlet laps = 0;\nlet startLineX, startLineY;\nlet carPassedStartLine = false;\nlet lastLapTime = 0;\nconst LAP_DELAY = 15000;\n\nfunction drawCar(x, y, angle, sprite) {\n push();\n translate(x, y);\n rotate(angle + PI / 2);\n scale(0.15);\n imageMode(CENTER);\n image(sprite, 0, 0);\n pop();\n}\n\nfunction updateCarPosition() {\n // ... existing code for updating the first car ...\n if (keyIsDown(87)) { // 'W' key\n speed += gears[gear - 1].acceleration;\n if (speed > gears[gear - 1].maxSpeed) {\n speed = gears[gear - 1].maxSpeed;\n }\n } else {\n speed *= 0.99; // Slow down gradually\n }\n\n if (keyIsDown(65)) { // 'A' key\n carAngle -= 0.05;\n }\n if (keyIsDown(68)) { // 'D' key\n carAngle += 0.05;\n }\n\n carX += speed * cos(carAngle);\n carY += speed * sin(carAngle);\n}\n\nfunction updateCarPosition2() {\n if (keyIsDown(UP_ARROW)) {\n speed2 += gears[gear2 - 1].acceleration;\n if (speed2 > gears[gear2 - 1].maxSpeed) {\n speed2 = gears[gear2 - 1].maxSpeed;\n }\n } else {\n speed2 *= 0.99;\n }\n\n if (keyIsDown(LEFT_ARROW)) {\n carAngle2 -= 0.05;\n }\n if (keyIsDown(RIGHT_ARROW)) {\n carAngle2 += 0.05;\n }\n\n carX2 += speed2 * cos(carAngle2);\n carY2 += speed2 * sin(carAngle2);\n}\n\nfunction displayInfo() {\n fill(0);\n textAlign(RIGHT, BOTTOM);\n let speedMPH = speed * 10;\n text(`Speed: ${speedMPH.toFixed(2)} MPH`, width / 2 - 10, height - 10);\n text(`Gear: ${gear}`, width / 2 - 10, height - 40);\n text(`Laps: ${laps}`, 10, 10);\n\n let speedMPH2 = speed2 * 10;\n text(`Speed: ${speedMPH2.toFixed(2)} MPH`, width - 10, height - 10);\n text(`Gear: ${gear2}`, width - 10, height - 40);\n text(`Laps: ${laps2}`, width / 2 + 10, 10);\n}\n\nlet car2;\nlet carX2, carY2;\nlet speed2 = 0;\nlet gear2 = 1;\nlet carAngle2 = 0; // Initial direction of the second car (in radians)\nlet carSprite2;\nlet laps2 = 0;\nlet carPassedStartLine2 = false;\nlet lastLapTime2 = 0;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(200);\n\n carX = width / 4;\n carY = height / 2;\n\n carX2 = (3 * width) / 4;\n carY2 = height / 2;\n\n textSize(32);\n textAlign(CENTER, CENTER);\n\n // Define the track points\n trackPoints = [];\n let centerX = width / 2;\n let centerY = height / 2;\n let radiusX = 2400;\n let radiusY = 1200;\n let numPoints = 150;\n\n for (let i = 0; i < numPoints; i++) {\n let angle = TWO_PI / numPoints * i;\n let x = centerX + radiusX * cos(angle);\n let y = centerY + radiusY * sin(angle);\n trackPoints.push([x, y]);\n }\n\n // Identify the topmost point for the starting line\n let topmostPoint = trackPoints.reduce((topmost, point) => point[1] < topmost[1] ? point : topmost, trackPoints[0]);\n startLineX = topmostPoint[0];\n startLineY = topmostPoint[1];\n\n // Initialize car position just behind the starting line\n carX = startLineX;\n carY = startLineY + 100; // Spawn the car farther behind the line\n carX2 = startLineX + width / 2;\n carY2 = startLineY + 100;\n}\n\nfunction preload() {\n carSprite = loadImage(\"@asset('Car')\");\n carSprite2 = loadImage(\"@asset('Car')\");\n}\n\nfunction drawTrack() {\n noFill();\n stroke(0); // Track boundary color\n strokeWeight(trackwidth); // Track width\n\n beginShape();\n for (let point of trackPoints) {\n vertex(point[0], point[1]);\n }\n endShape(CLOSE);\n\n // Draw the start/finish line\n stroke(255, 0, 0); // Red color for the start/finish line\n strokeWeight(10);\n line(startLineX - trackwidth / 2, startLineY, startLineX + trackwidth / 2, startLineY);\n}\n\nlet lineOffset = 0;\nlet lineOffset2 = 0;\n\nfunction draw() {\n background(200);\n\n // Dimensions for the roads\n let roadWidth = 300;\n let roadHeight = height;\n\n // Update the line offsets based on the car speeds\n lineOffset += speed;\n lineOffset2 += speed2;\n\n // Ensure the offset wraps around to create a continuous effect\n if (lineOffset > 40) {\n lineOffset -= 40;\n }\n if (lineOffset2 > 40) {\n lineOffset2 -= 40;\n }\n\n // Draw the road for the first car\n drawRoad(0, 0, roadWidth, roadHeight, lineOffset);\n\n // Draw the road for the second car\n drawRoad(width / 2, 0, roadWidth, roadHeight, lineOffset2);\n\n // Vertical bar separating the screens\n stroke(0);\n strokeWeight(4);\n line(width / 2, 0, width / 2, height);\n\n // Draw the track for both sides\n drawTrack();\n\n // Draw the first car\n push();\n translate(-carX + width / 4, -carY + height / 2);\n drawCar(carX, carY, carAngle, carSprite);\n pop();\n\n // Draw the second car\n push();\n translate(-carX2 + (3 * width) / 4, -carY2 + height / 2);\n drawCar(carX2, carY2, carAngle2, carSprite2);\n pop();\n\n // Update and display information for both cars\n updateCarPosition();\n updateCarPosition2();\n displayInfo();\n}\n\nfunction drawRoad(x, y, width, height, offset) {\n // Draw the gray road\n fill(128);\n noStroke();\n rect(x, y, width, height);\n\n // Draw the dashed white lines with the provided offset\n stroke(255);\n strokeWeight(4);\n let dashLength = 20;\n let gapLength = 20;\n for (let i = y + offset; i < y + height; i += dashLength + gapLength) {\n line(x + width / 2, i, x + width / 2, i + dashLength);\n }\n}\n","style.css":"body { margin: 0; background-color: #f0f0f0; font-family: Arial, sans-serif; }\ncanvas { display: block; margin: 0 auto; }","index.html":"\n\n\n\n \n \n Lap Racer\n \n \n \n\n\n\n\n\n"},"chat_history":[{"project_id":3264,"sender":"human","message":"Let's get started!","deleted":0,"created_at":"2024-09-18T21:19:43.487164Z","output_tokens":null,"code_id":151863,"input_tokens":null,"id":74210},{"project_id":3264,"sender":"ai","message":"Awesome! 🎉 Let's dive into making \"Lap Racer\" even more exciting. Here are a few features we can consider adding to enhance the game:\n\n1. **Lap Time Tracking**: Record the time it takes to complete each lap and display it.\n2. **Collision Detection**: Detect when cars go off the track and reset their positions.\n3. **Boost Zones**: Add special zones on the track that temporarily increase the car's speed.\n4. **Sound Effects**: Add sound effects for accelerating, braking, and crossing the finish line.\n5. **Customizable Cars**: Allow players to choose different car colors or designs.\n\nWhich ones would you like to implement first? Feel free to suggest any other cool ideas you have in mind! 🚗💨","deleted":0,"created_at":"2024-09-18T21:19:43.494532Z","output_tokens":null,"code_id":151863,"input_tokens":null,"id":74211},{"project_id":3264,"sender":"human","message":"Add a identical road on both sides. The road should be a long skinny gray rectangle, with dahed white lines in the middle.","deleted":0,"created_at":"2024-09-18T21:22:10.540556Z","output_tokens":null,"code_id":151873,"input_tokens":null,"id":74218},{"project_id":3264,"sender":"ai","message":"Got it! Let's add a road on both sides of the screen. We'll create a long, skinny gray rectangle with dashed white lines in the middle. This will give the appearance of a road for each car.\n\nHere's how we can do it:\n\n1. Create a function to draw the road.\n2. Call this function in the `draw()` function so that the roads are drawn every frame.\n\nLet's start by creating the function to draw the road.\n\n```javascript\nfunction drawRoad(x, y, width, height) {\n // Draw the gray road\n fill(128);\n noStroke();\n rect(x, y, width, height);\n\n // Draw the dashed white lines\n stroke(255);\n strokeWeight(4);\n let dashLength = 20;\n let gapLength = 20;\n for (let i = y; i < y + height; i += dashLength + gapLength) {\n line(x + width / 2, i, x + width / 2, i + dashLength);\n }\n}\n```\n\nNext, let's update the `draw()` function to call this new `drawRoad()` function.\n\n```javascript\nfunction draw() {\n background(200);\n\n // Dimensions for the roads\n let roadWidth = 300;\n let roadHeight = height;\n\n // Draw the road for the first car\n drawRoad(0, 0, roadWidth, roadHeight);\n\n // Draw the road for the second car\n drawRoad(width / 2, 0, roadWidth, roadHeight);\n\n // Vertical bar separating the screens\n stroke(0);\n strokeWeight(4);\n line(width / 2, 0, width / 2, height);\n\n // Draw the track for both sides\n drawTrack();\n\n // Draw the first car\n push();\n translate(-carX + width / 4, -carY + height / 2);\n drawCar(carX, carY, carAngle, carSprite);\n pop();\n\n // Draw the second car\n push();\n translate(-carX2 + (3 * width) / 4, -carY2 + height / 2);\n drawCar(carX2, carY2, carAngle2, carSprite2);\n pop();\n\n // Update and display information for both cars\n updateCarPosition();\n updateCarPosition2();\n displayInfo();\n}\n```\n\n### Explanation:\n- The `drawRoad()` function draws a gray rectangle to represent the road and dashed white lines in the middle.\n- In the `draw()` function, we call `drawRoad()` twice to draw the roads on both sides of the screen.\n\nGo ahead and add these changes to your `script.js` file. Let me know if you need any help! 🚗🏁","deleted":0,"created_at":"2024-09-18T21:22:10.548199Z","output_tokens":null,"code_id":151873,"input_tokens":null,"id":74219},{"project_id":3264,"sender":"human","message":"When I drive past the white lines, they should scroll past you to simulate relative motion","deleted":0,"created_at":"2024-09-18T21:27:21.268435Z","output_tokens":null,"code_id":151899,"input_tokens":null,"id":74224},{"project_id":3264,"sender":"ai","message":"Great idea! Let's make the dashed white lines on the road scroll past the player to give a sense of motion. We'll achieve this by updating the position of the dashed lines each frame based on the car's speed.\n\nHere are the steps:\n1. Add a variable to track the offset of the dashed lines.\n2. Update this offset in the `draw()` function based on the car's speed.\n3. Adjust the `drawRoad()` function to use this offset when drawing the dashed lines.\n\nLet's start by adding the variable to track the dashed lines' offset.\n\n### Add the Variable for Line Offset\n\nAdd this code at the top of your `script.js` file where other global variables are defined:\n\n```javascript\nlet lineOffset = 0;\nlet lineOffset2 = 0;\n```\n\n### Update the Line Offset in `draw()`\n\nNext, update the `draw()` function to modify the `lineOffset` and `lineOffset2` based on the car's speed.\n\n```javascript\nfunction draw() {\n background(200);\n\n // Dimensions for the roads\n let roadWidth = 300;\n let roadHeight = height;\n\n // Update the line offsets based on the car speeds\n lineOffset += speed;\n lineOffset2 += speed2;\n\n // Ensure the offset wraps around to create a continuous effect\n if (lineOffset > 40) {\n lineOffset -= 40;\n }\n if (lineOffset2 > 40) {\n lineOffset2 -= 40;\n }\n\n // Draw the road for the first car\n drawRoad(0, 0, roadWidth, roadHeight, lineOffset);\n\n // Draw the road for the second car\n drawRoad(width / 2, 0, roadWidth, roadHeight, lineOffset2);\n\n // Vertical bar separating the screens\n stroke(0);\n strokeWeight(4);\n line(width / 2, 0, width / 2, height);\n\n // Draw the track for both sides\n drawTrack();\n\n // Draw the first car\n push();\n translate(-carX + width / 4, -carY + height / 2);\n drawCar(carX, carY, carAngle, carSprite);\n pop();\n\n // Draw the second car\n push();\n translate(-carX2 + (3 * width) / 4, -carY2 + height / 2);\n drawCar(carX2, carY2, carAngle2, carSprite2);\n pop();\n\n // Update and display information for both cars\n updateCarPosition();\n updateCarPosition2();\n displayInfo();\n}\n```\n\n### Adjust the `drawRoad()` Function\n\nFinally, update the `drawRoad()` function to accept an offset parameter and use it when drawing the dashed lines.\n\n```javascript\nfunction drawRoad(x, y, width, height, offset) {\n // Draw the gray road\n fill(128);\n noStroke();\n rect(x, y, width, height);\n\n // Draw the dashed white lines with the provided offset\n stroke(255);\n strokeWeight(4);\n let dashLength = 20;\n let gapLength = 20;\n for (let i = y + offset; i < y + height; i += dashLength + gapLength) {\n line(x + width / 2, i, x + width / 2, i + dashLength);\n }\n}\n```\n\n### Explanation:\n- **Global Variables**: `lineOffset` and `lineOffset2` track the position of the dashed lines for each road.\n- **`draw()` Function**: Updates the offset based on the car's speed and ensures it wraps around to create a continuous effect.\n- **`drawRoad()` Function**: Uses the offset when drawing the dashed white lines to simulate motion.\n\nGo ahead and add these changes to your `script.js` file. Let me know if you need any help or if something isn't working as expected! 🏎️🚧","deleted":0,"created_at":"2024-09-18T21:27:21.275573Z","output_tokens":null,"code_id":151899,"input_tokens":null,"id":74225}],"assets":[{"cloudinary_id":"eibhqsjlif1vxciko0qg","name":"Car","deleted":false,"id":20123,"created_at":"2024-09-18T21:19:40.598863Z","project_id":3264,"resource_type":"image"}],"messages_sent":3,"comments":[],"steps":[]}