Doodlebot Educational Platform

A browser-based multiplayer game that teaches kids pathfinding and autonomous navigation algorithms through a virtual grid game.

What it does

Players join a shared room and each controls a bot on a 16×16 grid. They progress through a guided tutorial that introduces four movement algorithms in increasing sophistication:

1. Random — the bot picks a random valid move each turn
2. Euclidean distance — the bot greedily moves toward the closest target
3. Manhattan distance — same idea, different distance metric
4. Dijkstra — full shortest-path that navigates around obstacles

Each player assigns their bot a policy (collect coins, follow another bot, or run away from a bot) and a movement type, then watches all bots execute simultaneously. The player who collects the most items wins.

Themes

Four visual themes change sprites and backgrounds: None (plain robots), City (cars, pizza), School (buses, bicycles), Pacman (ghosts, maze).

Getting started

No installation or build step required. Serve the root directory with any static file server:

python3 -m http.server 8080

Then open:

http://localhost:8080/virtual-board/doodlebotGame.html

Or open virtual-board/doodlebotGame.html directly in your browser. The app is also live at the GitHub Pages URL for this repo.

Game flow

doodlebotGame.html       splash screen
  └─> rooms.html         create or join a multiplayer room
      └─> tutorial1      watch: Random navigation
          └─> game1      play: Random bots
              └─> tutorial2  watch: Euclidean distance
                  └─> game2  play: Euclidean bots
                      └─> tutorial3  watch: Manhattan distance
                          └─> game3  play: Manhattan bots + obstacles
                              └─> tutorial4  watch: Dijkstra
                                  └─> game4  play: Dijkstra bots
                                      └─> tutorial5
                                          └─> free play (choose theme)

The tutor (room creator) controls page progression. All players are automatically navigated together when the tutor advances.

Tech stack

• Vanilla HTML/CSS/JS — no framework, no bundler
• Firebase Realtime Database + Auth — multiplayer sync and anonymous player identity
• Bootstrap 5 — UI layout and modals
• interact.js — drag-and-drop for placing bots, obstacles, and coins

Project structure

ralcant.github.io/
├── virtual-board/        # All game HTML, JS, and CSS
│   ├── grid.js           # Core grid state machine and movement algorithms
│   ├── grid-graph.js     # Graph + Dijkstra implementation
│   ├── game-assets.js    # Static asset and object-size data
│   ├── game-setup.js     # Grid construction and Firebase callback bridge
│   ├── bot-movement.js   # Bot start/stop movement lifecycle
│   ├── grid-render.js    # DOM drawing functions
│   ├── phase-manager.js  # Tutorial phase and countdown logic
│   └── test-index.js     # Entry point: URL params, theme, event wiring
├── assets/               # Sprites and backgrounds per theme
├── firebase-handler.js   # Firebase bootstrap shim
├── firebase-init.js      # Firebase app init and anonymous auth
├── firebase-sync.js      # RealtimeUpdates class — all Realtime Database calls
└── firebase-game-flow.js # Game flow helpers (phase transitions)

Browser requirements

Any modern browser (Chrome, Firefox, Safari, Edge) works for virtual mode.