Crossy Road Clone

{"name":"Crossy Road Clone","description":"Dive into the thrilling world of traffic dodging with your very own Crossy Road-inspired game! Use simple controls to guide your character across bustling roads and treacherous rivers. With vibrant visuals and engaging mechanics, each level offers new challenges and fun. Embrace the excitement and learn programming as you build this endless adventure with p5.js.","photo":"https://res.cloudinary.com/dzv7hjwfn/image/upload/e32aiiguuunar7inpsbf","view_count":13,"fork_count":0,"expires_at":null,"created_at":"2025-05-29T19:34:48.605618Z","updated_at":"2025-05-29T19:34:48.605619Z","user_id":640,"status":"PUBLIC","parent_id":null,"id":8090,"user":{"photo":null,"email":"branson.pfiester@alpha.school","recess_id":null,"created_at":"2025-04-29T00:58:12.437570Z","reset_token":null,"stripe_customer_id":null,"seats":0,"username":"bransonpfiester","id":640,"password_hash":"$2b$12$PqjqTnWcDjzO2YvrkMWIK.osF6xnhW4ja/LXoD.lO3zpbMcYwsw4K","updated_at":"2025-04-29T00:58:12.437577Z","reset_token_expiry":null,"subscription_status":null},"code":{"script.js":"let gameStarted = false;\n\nlet player;\n\nlet obstacles = [];\n\nlet obstacleCount = 60;\n\nlet screenSpeed = 4.2;\n\nconst lanePositions = [40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880, 940, 1000];\n\nlet score = 0;\n\nfunction setup() {\n createCanvas(windowWidth, windowHeight);\n background(135, 206, 235); // Sky blue background\n player = {\n x: width / 1.2,\n y: height - 50,\n size: 20\n };\n // Create obstacles, spaced out across different lanes\n for (let i = 0; i < obstacleCount; i++) {\n obstacles.push({\n x: random(lanePositions), // Random x position in the defined lanes\n y: random(-height, -45), // Start above the visible area\n size: 30\n });\n }\n}\n\nfunction draw() {\n background(135, 206, 235); // Clear the background each frame\n drawTrafficLines(); // Draw traffic lines\n moveObstacles();\n drawObstacles();\n drawPlayer();\n handlePlayerMovement(); // Call this function to enable player movement\n checkCollisions();\n displayScore(); // Call function to display score\n}\n\nfunction drawTrafficLines() {\n stroke(255); // White color for traffic lines\n strokeWeight(5); // Line thickness\n for (let i = 0; i < height; i += 40) { // Draw lines every 40 pixels vertically\n for (let j = 0; j < lanePositions.length; j++) {\n line(lanePositions[j], i, lanePositions[j], i + 20); // Draw traffic lines at each lane position\n }\n }\n}\n\nfunction handlePlayerMovement() {\n if (keyIsDown(LEFT_ARROW)) {\n player.x -= 5; // Move player left\n }\n if (keyIsDown(RIGHT_ARROW)) {\n player.x += 5; // Move player right\n }\n // Constrain player to stay within canvas\n player.x = constrain(player.x, 0, width);\n}\n\nfunction moveObstacles() {\n for (let obstacle of obstacles) {\n obstacle.y += screenSpeed; // Move obstacles down\n // Reset obstacle position if it goes off the bottom of the canvas\n if (obstacle.y > height) {\n obstacle.y = random(-height * 2, -50); // Reset above the screen\n obstacle.x = random(lanePositions); // Randomize x position in the defined lanes\n score++; // Increment score when an obstacle successfully moves off screen\n }\n }\n}\n\nfunction drawPlayer() {\n fill(255, 0, 0); // Red color\n ellipse(player.x, player.y, player.size); // Draw player\n}\n\nfunction drawObstacles() {\n fill(0, 0, 255); // Blue color\n for (let obstacle of obstacles) {\n ellipse(obstacle.x, obstacle.y, obstacle.size); // Draw obstacles\n }\n}\n\nfunction checkCollisions() {\n for (let obstacle of obstacles) {\n // Simple collision detection\n if (dist(player.x, player.y, obstacle.x, obstacle.y) < (player.size / 2 + obstacle.size / 2)) {\n // Reset player position if there's a collision\n player.x = width / 2;\n player.y = height - 50; // Reset to starting position\n score = 0; // Reset score on collision\n }\n }\n}\n\nfunction displayScore() {\n fill(0); // Set text color to black\n textSize(32); // Set text size\n text('Score: ' + score, 10, 30); // Display score at the top left\n}\n\n","style.css":"body { margin: 0; } canvas { display: block; }","index.html":"\n\n\n \n \n Crossy Road Clone\n \n \n \n\n\n \n\n"},"chat_history":[{"message":"where can i change out spaced out the obstacles are\n","project_id":8090,"created_at":"2025-06-03T19:23:24.626604Z","output_tokens":null,"sender":"human","code_id":247894,"deleted":0,"input_tokens":null,"id":146179},{"message":"

\n# Reasoning\nTo adjust the spacing of obstacles, we need to change their initial `y` positions when they are created. The obstacles are currently initialized with random `y` positions between `-height` and `-50`. By adjusting these values, you can change how far apart the obstacles are initially placed.\n

\n\n

\n# Answer:\n

\n\nYou can change how spaced out the obstacles are by adjusting the `random(-height, -50)` part in the `setup()` function where the obstacles are created. This line determines the initial vertical spacing of obstacles.","project_id":8090,"created_at":"2025-06-03T19:23:25.143234Z","output_tokens":150,"sender":"ai","code_id":247894,"deleted":0,"input_tokens":3378,"id":146180},{"message":"what happens if i increase it","project_id":8090,"created_at":"2025-06-03T19:24:02.002599Z","output_tokens":null,"sender":"human","code_id":247894,"deleted":0,"input_tokens":null,"id":146181},{"message":"

\n# Reasoning\nIncreasing the range in `random(-height, -50)` will result in obstacles being initially placed further apart vertically. This means there will be larger gaps between obstacles as they first appear on the screen.\n

\n\n

\n# Answer:\n

\n\nIf you increase the range in `random(-height, -50)` (for example, `random(-height * 2, -50)`), the obstacles will be spaced out more, appearing less frequently as they enter the visible area.","project_id":8090,"created_at":"2025-06-03T19:24:02.410711Z","output_tokens":124,"sender":"ai","code_id":247894,"deleted":0,"input_tokens":3373,"id":146182},{"message":"what can i change to make the blue dots not stay on the white traffic lines","project_id":8090,"created_at":"2025-06-03T19:25:24.380060Z","output_tokens":null,"sender":"human","code_id":247915,"deleted":0,"input_tokens":null,"id":146187},{"message":"

\n# Reasoning\nThe blue dots (obstacles) are positioned based on the `lanePositions` array, which aligns them with the white traffic lines. To make the blue dots not stay on the white traffic lines, we need to adjust their `x` positions slightly. This can be done by adding a small random offset to their `x` positions when they are created.\n

\n\n

\n# Answer:\n

\n\nTo make the blue dots not stay on the white traffic lines, you can add a slight random offset to their `x` positions when creating them. This will ensure they don't align perfectly with the traffic lines.","project_id":8090,"created_at":"2025-06-03T19:25:24.793595Z","output_tokens":156,"sender":"ai","code_id":247915,"deleted":0,"input_tokens":3383,"id":146188}],"assets":[{"project_id":8090,"creator":null,"cloudinary_id":"e32aiiguuunar7inpsbf","deleted":false,"id":75038,"created_at":"2025-05-29T19:34:30.887658Z","name":"CROSSY_ROAD","resource_type":"image","tags":null}],"messages_sent":41,"comments":[],"steps":[]}