A fun, mobile-first drag-and-drop game that introduces programming concepts through interactive puzzle-solving. Perfect as an entry-level challenge for coding bootcamp candidates!
- Mobile-First Design - Fully touch-enabled with drag-and-drop controls
- No Keyboard Required - Pure visual programming with arrow commands
- Progressive Difficulty - 6 levels from beginner to challenging
- Visual Feedback - Animations, color coding, and clear success/failure messages
- Educational - Teaches sequencing, planning, and algorithmic thinking
Guide a robot through a grid to reach the goal by dragging arrow commands (⬆️⬇️⬅️➡️) into instruction slots. Plan your sequence, run the program, and watch the robot execute your commands!
- ✅ Sequencing - Commands execute in order
- ✅ Planning - Think ahead to reach the goal
- ✅ Debugging - Iterate when your program doesn't work
- ✅ Problem Solving - Navigate obstacles and constraints
- Level 1 - First Steps - Simple 3-move introduction
- Level 2 - Turn Around - Learn to change direction
- Level 3 - Wall Blocker - Avoid obstacles
- Level 4 - Maze Runner - Navigate complex paths
- Level 5 - Danger Zone - Avoid traps
- Level 6 - Complex Path - The ultimate challenge!
- Drag arrows (⬆️⬇️⬅️➡️) into the instruction slots
- Plan your sequence to guide the robot to the goal 🎯
- Press "Run Program" to execute your commands
- Watch the robot move according to your instructions
- Iterate if you don't reach the goal - try again!
- Drag & Drop - Move arrows to instruction slots
- Run Program - Execute your sequence
- Reset - Restart the current level
- Clear - Remove all instructions
- × on slots - Remove individual commands
- Vanilla JavaScript (ES6 modules)
- Modern CSS (CSS Variables, nesting, animations)
- Mobile-first responsive design
- No frameworks - Pure web standards
- Clone the repository:
git clone https://github.com/yourusername/proj-robot-move.git
cd proj-robot-move- Open
index.htmlin your browser or use a local server:
# Python
python -m http.server 8000
# Node.js
npx http-server
# VS Code Live Server extension
# Right-click index.html → "Open with Live Server"- Navigate to
http://localhost:8000
proj-robot-move/
├── index.html # Main HTML file
├── styles.css # All styles with CSS nesting
├── js/
│ ├── main.js # Entry point & game initialization
│ ├── state.js # Game state management
│ ├── levels.js # Level definitions
│ ├── ui.js # UI rendering & updates
│ ├── dragdrop.js # Drag & drop functionality
│ └── game.js # Game logic & execution
└── README.md
- Dark theme with vibrant gradients
- Smooth animations for robot movement
- Responsive layout - Works on phones, tablets, and desktops
- Visual feedback - Green glow when dragging over valid drop zones
- Color coding - Robots (blue), goals (green), walls (gray), traps (red)
This game is designed as a pre-assessment tool for coding bootcamps to:
- Gauge logical thinking skills
- Assess problem-solving ability
- Introduce programming concepts without syntax
- Motivate candidates with a fun, achievable challenge
- Not too hard - Early levels with 2-4 moves, clear paths
- Not too easy - Progressive challenges requiring strategy
- Just right - Builds confidence while testing ability
Feel free to submit issues or pull requests to improve the game!
MIT License - Feel free to use for educational purposes
Created as an entry challenge for coding bootcamp candidates to test algorithmic thinking in a fun, gamified way.
Ready to test your programming skills? Play Robot Quest Now! 🚀