Xion Nexus - RoboCraft Challenge

Project Overview

Goal: Create a web app simulating a robot navigating a 2D environment with obstacles.

Tasks:

• Add the p5.js library via CDN in the HTML tab.
• Draw a robot (e.g., rectangle) and obstacles (e.g., walls) using p5.js in the JavaScript tab.
• Implement arrow key controls to move the robot.
• Add collision detection to prevent the robot from passing through obstacles.
• Ensure the robot stays within canvas boundaries.

Skills Learned: JavaScript (movement logic), p5.js (graphics, input handling), simulation (collision detection, boundaries).

Get Started

Follow these steps to build your robot navigator:

1. Plan: Sketch the environment (robot, obstacles, canvas size).
2. Code: Use the OneCompiler editor below, starting from scratch.
3. Add p5.js: In the OneCompiler HTML tab, add the p5.js library to enable canvas and drawing:

   <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.2/p5.min.js"></script>

4. Draw: In the JavaScript tab, create a canvas and draw a robot and obstacles.
5. Move: Add arrow key controls and collision detection.
6. Learn: Visit the RoboCraft course on Xion Apex Academy for tutorials.
7. Submit: Share your simulation URL for feedback.

Code Workspace

Write your robot navigator from scratch in the editor below. Use the HTML tab for the p5.js CDN and the JavaScript tab for simulation logic.

Prefer coding externally? Use Replit or Download Starter Files (includes empty HTML/JS files).