Custom Car Track Challenge

{"name":"Custom Car Track Challenge","description":"Get ready to rev your engines in the Custom Car Track Challenge! Players can design their own unique tracks and put their driving skills to the test. With easy controls and engaging gameplay, this project is perfect for aspiring game developers looking to learn programming while having fun!","photo":null,"view_count":0,"fork_count":0,"expires_at":null,"created_at":"2025-03-21T20:39:52.409067Z","updated_at":"2025-03-21T20:39:52.409071Z","user_id":119,"status":"PRIVATE","parent_id":6448,"id":6449,"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":"let carImage;\n\nlet car;\n\nlet selectedTrack = null;\n\nlet grid = [];\n\nconst gridSize = 200;\n\nlet currentMode = 'straight';\n\nlet lastPlacedTrackPosition = null;\n\nfunction preload() {\n carImage = loadImage(\"@asset('Car_3')\");\n}\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235);\n car = new Car(width / 2, height / 2, carImage);\n\n // Initialize grid\n for (let x = 0; x < width / gridSize; x++) {\n grid[x] = [];\n for (let y = 0; y < height / gridSize; y++) {\n grid[x][y] = null;\n }\n }\n}\n\nfunction draw() {\n background(135, 206, 235);\n drawGrid();\n car.update();\n car.display();\n drawRoadPieces(); // Call the function to draw road pieces on the grid\n}\n\nclass Car {\n constructor(x, y, img) {\n this.x = x;\n this.y = y;\n this.angle = 0; // Start facing right\n this.img = img;\n this.speed = 0;\n this.acceleration = 0.122225; // Acceleration rate\n this.deceleration = 0.05; // Deceleration rate\n this.friction = 0.01; // Frictional force\n this.maxSpeed = 5; // Maximum speed\n }\n\n update() {\n if (keyIsDown(87)) { // W key for acceleration\n this.speed += this.acceleration;\n if (this.speed > this.maxSpeed) {\n this.speed = this.maxSpeed; // Limit to max speed\n }\n } else {\n this.speed -= this.deceleration; // Deceleration when not accelerating\n if (this.speed < 0) {\n this.speed = 0; // Prevent going backward\n }\n }\n\n // Apply friction\n this.speed -= this.friction;\n if (this.speed < 0) {\n this.speed = 0; // Speed can't be negative\n }\n\n if (keyIsDown(65)) { // A key\n this.angle -= 0.1; // Rotate left\n }\n\n if (keyIsDown(68)) { // D key\n this.angle += 0.1; // Rotate right\n }\n\n // Calculate the new position\n let newX = this.x + this.speed * cos(this.angle);\n let newY = this.y + this.speed * sin(this.angle);\n\n // Check boundaries to prevent the car from going off-screen\n if (newX > this.img.width / 20 / 2 && newX < width - this.img.width / 20 / 2) {\n this.x = newX; // Update x only if within bounds\n }\n if (newY > this.img.height / 20 / 2 && newY < height - this.img.height / 20 / 2) {\n this.y = newY; // Update y only if within bounds\n }\n }\n\n display() {\n push();\n translate(this.x, this.y);\n rotate(this.angle + PI / 2); // Rotate the car based on its angle\n imageMode(CENTER);\n image(this.img, 0, 0, this.img.width / 20, this.img.height / 20); // Scaling down the car size\n pop();\n }\n}\n\nfunction mouseClicked() {\n if (selectedTrack) {\n // Draw the selected track piece at the mouse position\n drawTrackPiece(mouseX, mouseY, selectedTrack);\n selectedTrack = null; // Reset after placing the track\n }\n}\n\nfunction drawGrid() {\n stroke(200); // Light gray for grid lines\n for (let x = 0; x < width; x += gridSize) {\n line(x, 0, x, height);\n }\n for (let y = 0; y < height; y += gridSize) {\n line(0, y, width, y);\n }\n}\n\nfunction drawRoadPieces() {\n for (let x = 0; x < grid.length; x++) {\n for (let y = 0; y < grid[x].length; y++) {\n if (grid[x][y]) {\n // Draw the track piece at the grid position\n drawTrackPiece(x * gridSize, y * gridSize, grid[x][y].type);\n }\n }\n }\n}\n\nfunction drawTrackPiece(x, y, type) {\n push();\n translate(x, y);\n noFill();\n stroke(0);\n strokeWeight(2);\n\n if (type === 'straight') {\n rect(0, gridSize / 2 - gridSize / 10, gridSize, gridSize / 5); // Centered straight track\n } else if (type === 'curved') {\n arc(0, 0, gridSize, gridSize, 0, PI / 2); // Draw curved track as a quarter circle\n }\n\n pop();\n}\n\nfunction mousePressed() {\n let x = floor(mouseX / gridSize);\n let y = floor(mouseY / gridSize);\n\n if (currentMode === 'straight' || currentMode === 'curved') {\n grid[x][y] = {\n type: currentMode,\n rotation: 0\n };\n lastPlacedTrackPosition = { x: x, y: y }; // Update the last placed track position\n } else if (currentMode === 'delete' && grid[x][y]) {\n grid[x][y] = null;\n }\n}\n\nfunction keyPressed() {\n if (key === '1') {\n currentMode = 'straight';\n } else if (key === '2') {\n currentMode = 'curved';\n } else if (key === '3') {\n currentMode = 'delete';\n } else if (key === 'r' && lastPlacedTrackPosition) {\n let { x, y } = lastPlacedTrackPosition;\n if (grid[x][y]) {\n grid[x][y].rotation = (grid[x][y].rotation + HALF_PI) % TWO_PI;\n }\n }\n}\n\n","style.css":"body {\n margin: 0;\n}\n\ncanvas {\n display: block;\n}","index.html":"\n\n\n\n \n \n Custom Car Track Challenge\n \n \n\n\n\n\n \n\n\n"},"chat_history":[{"project_id":6449,"sender":"human","message":"make it so that when I press r it rotates the track piece 90˚","deleted":0,"created_at":"2025-03-21T20:55:43.911582Z","output_tokens":null,"code_id":219002,"input_tokens":null,"id":119505},{"project_id":6449,"sender":"ai","message":"

\n# Reasoning\nThe student wants to rotate a track piece on the grid by 90 degrees when pressing the 'r' key. The existing code already handles key presses for different modes, but the logic for rotating a track piece is missing. We need to modify the `keyPressed` function to implement this functionality.\n

\n\n

\n# Answer: \n

\n\nIt's possible to rotate the track piece by 90 degrees when the 'r' key is pressed. \n\nCan you tell me more about how you want this to work? Should it rotate the last placed track piece, or should it rotate any piece that the mouse is currently over?","deleted":0,"created_at":"2025-03-21T20:55:43.919645Z","output_tokens":159,"code_id":219002,"input_tokens":3952,"id":119506},{"project_id":6449,"sender":"human","message":"rotate the last placed track piece","deleted":0,"created_at":"2025-03-21T20:57:00.791629Z","output_tokens":null,"code_id":219002,"input_tokens":null,"id":119507},{"project_id":6449,"sender":"ai","message":"

\n# Reasoning\nThe student wants to rotate the last placed track piece by 90 degrees when pressing the 'r' key. We need to track the position where the last track piece was placed and adjust the `keyPressed` function to rotate that specific piece.\n

\n\n

\n# Answer: \n

\n\nWe can modify the code to rotate the last placed track piece when the 'r' key is pressed. Let's update the code to keep track of the last placed piece and allow it to be rotated.\n\nHere’s how you can do it:\n\n1. Create a global variable to store the position of the last placed track piece.\n2. Modify the `mousePressed` function to update this position when a track piece is placed.\n3. Adjust the `keyPressed` function to rotate the track piece at this position.\n\nLet's update the code:\n\n```javascript\n// script.js\nlet lastPlacedTrackPosition = null; // Add this global variable\n```\n\n```javascript\n// script.js\nfunction mousePressed() {\n let x = floor(mouseX / gridSize);\n let y = floor(mouseY / gridSize);\n\n if (currentMode === 'straight' || currentMode === 'curved') {\n grid[x][y] = {\n type: currentMode,\n rotation: 0\n };\n lastPlacedTrackPosition = { x: x, y: y }; // Update the last placed track position\n } else if (currentMode === 'delete' && grid[x][y]) {\n grid[x][y] = null;\n }\n}\n```\n\n```javascript\n// script.js\nfunction keyPressed() {\n if (key === '1') {\n currentMode = 'straight';\n } else if (key === '2') {\n currentMode = 'curved';\n } else if (key === '3') {\n currentMode = 'delete';\n } else if (key === 'r' && lastPlacedTrackPosition) {\n let { x, y } = lastPlacedTrackPosition;\n if (grid[x][y]) {\n grid[x][y].rotation = (grid[x][y].rotation + HALF_PI) % TWO_PI;\n }\n }\n}\n```\n\n### How it works:\n- A new global variable `lastPlacedTrackPosition` keeps track of the last placed track piece's position.\n- The `mousePressed` function updates `lastPlacedTrackPosition` whenever a new track piece is placed.\n- The `keyPressed` function rotates the track piece at `lastPlacedTrackPosition` by 90 degrees when 'r' is pressed.","deleted":0,"created_at":"2025-03-21T20:57:00.798340Z","output_tokens":546,"code_id":219002,"input_tokens":3941,"id":119508}],"assets":[{"cloudinary_id":"li877t4vl7a7ytfofdci","name":"Car_3","deleted":false,"id":62263,"created_at":"2025-03-21T20:39:52.465806Z","project_id":6449,"resource_type":"image"}],"messages_sent":4,"comments":[],"steps":[]}