Run through the 5 layers of the network stack as Packy the data packet. Answer real EC 441 midterm questions mid-jump, correct answers earn networking-themed power-ups, wrong ones trigger penalties.
1. ⬇️ Download the DMG from the latest release
2. 📂 Open it, drag Packet Quest to your Desktop or Applications
3. 🖱️ Right-click the app → Open the first time (Gatekeeper bypass)
4. 🚀 Done, runs fully offline
⬇️ Download the latest DMG
⚠️ Apple Silicon (M-series) Macs only, not Apple-signed because this is a class project.
You play Packy, a tiny data packet running across 5 hand-designed levels, one per layer of the network stack. Each level has its own visual identity tied to the layer:
| # | Layer | 🎨 Theme | 🌟 Visual concept | 📚 Topics |
|---|---|---|---|---|
| 1️⃣ | Physical | 🟠 Amber | Sine cables with bits flowing along them | CSMA/CD · backoff · Manchester |
| 2️⃣ | Link | 🟢 Green | PCB circuit board with MAC bus traces | MAC · CRC · Ethernet · switches |
| 3️⃣ | Network | 🔵 Cyan | 5-router mesh with TTL-labeled packets | IP · CIDR · routing · NAT |
| 4️⃣ | Transport | 🟣 Magenta | TCP segment pills with field text | TCP · UDP · ports · congestion |
| 5️⃣ | Application | 🟡 Gold | Cityscape + HTTP/DNS/TLS request cards | HTTP · DNS · TLS · DHCP |
Level 1 - Physical layer. Bits flow on amber sine cables. The Network Stack sidebar tracks your position. The Wireshark ticker shows real tshark-style packet captures.
Mid-level you'll run into glowing ? blocks that trigger real EC 441 questions, the Intermediate tier is pulled from Midterms 1 and 2.
Hit a glowing ? block, gameplay freezes, and a question pops up. Answer with the mouse or 1 / 2 / 3 / 4.
| ⚡ Bandwidth Boost +55% run speed · 8s |
🛡️ Firewall Absorbs one hit · 12s |
🦘 Multipath Routing Three air jumps · 10s |
| 🐢 Lagging −50% run speed · 6s |
🐛 Malware 7 enemies appear nearby |
🔄 Buffer Overflow Controls inverted · 2s |
 |
 |
| ✅ Right answer → networking power-up | ❌ Wrong answer → penalty + correct answer + explanation |
Same 15 question slots — three pools depending on tier:
| 🟢 | Beginner | Fundamentals — "What does this layer do?" |
| 🟡 | Intermediate | Midterm-level — pulled verbatim from EC 441 MT1 + MT2 |
| 🔴 | Advanced | Expert-level — Shannon, BGP, AIMD, CUBIC, TLS 1.3, HTTP/3 |
Letter grade A+ down to F, topic-mastery bars per layer, and you sign the report card to save your run to the leaderboard.
Per-difficulty rankings, filtered tabs, and gold/silver/bronze styling for the top 3. Persisted to disk between sessions.
A button on the title screen reveals the entire question bank, all 45 questions with correct answers highlighted and one-sentence explanations.
All 45 questions, grouped by tier and layer, correct answers highlighted in green.
| Action | Keys |
|---|---|
| 🏃 Move | A / D or ← / → |
| 🦘 Jump | W · Space · ↑ (hold for higher · tap mid-air for double-jump) |
| ❓ Answer | Click · 1 / 2 / 3 / 4 · A / B / C / D |
| ⏸️ Pause | Esc |
| 🔇 Mute | M |
| 🐚 Native shell | Electron 28 (Chromium 120 + Node.js 18) |
| 🎨 Rendering | HTML5 Canvas 2D — no game engine, no WebGL |
| 💻 Game logic | Vanilla JavaScript — no React, no TypeScript, no jQuery |
| 🔊 Audio | Web Audio API — every SFX and music note synthesized at runtime |
| 💾 Persistence | localStorage + Electron IPC → JSON file in userData |
| 📏 Size | ~5,500 lines of JS across 13 source files |
| 🌐 Network | None — connect-src 'none' enforced via CSP |
The Content-Security-Policy in
index.htmldeclaresconnect-src 'none', so the renderer literally can't make network requests. Combined with procedural audio and local-only persistence, the app is provably offline by construction.
If you want to hack on the code rather than just play:
git clone https://github.com/halkuwaiti/EC-441-PacketQuest.git
cd EC-441-PacketQuest
npm install
npm startTo rebuild the DMG yourself:
npm run dist # Apple Silicon (default)
npm run dist:intel # Intel Mac
npm run dist:all # Both architectures.
├── 🚀 main.js Electron main process
├── 🌉 preload.js IPC bridge for leaderboard
├── 🌐 index.html Single-page DOM shell
├── 🎨 styles.css All visual design (~1,400 lines)
├── 🖼️ build/icon.png Custom 1024×1024 app icon
├── 📦 src/
│ ├── 🛠️ utils.js rng, math, AABB, helpers
│ ├── ❓ questions.js 45 EC 441 questions × 3 difficulties
│ ├── 🔊 audio.js Procedural Web Audio synthesis
│ ├── ✨ particles.js Particle system
│ ├── 💥 effects.js Screen shake, flash, glitch
│ ├── ⌨️ input.js Keyboard state
│ ├── 🦸 player.js Packy: physics + power-ups
│ ├── 🐛 enemies.js BugWalker, Spike, Packet, etc.
│ ├── 🏗️ levels.js 5 hand-crafted levels
│ ├── 🪟 ui.js All overlay logic
│ └── 🎮 game.js Main orchestrator
├── 📖 DEMO_GUIDE.md Demo-day reference for the team
└── 📄 DEMO_GUIDE.pdf Polished printable version
- 🎨 Design & Engineering - Hamad Al-Kuwaiti , Deniz Oge, Arav Tyagi
- 🎓 Course - EC 441 Computer Networking, Boston University, Spring 2026
Every networking question is sourced from the actual EC 441 midterms or course material
CC BY-NC 4.0 - see LICENSE. Free to fork, study, and adapt for personal or educational use.
Made with ⚡ at Boston University · 🎓 Spring 2026