Dev Quest Runner

A gamified series of coding challenges built on the GameEngine framework. Each quest teaches a core developer skill — file structure, Makefiles, merge conflicts, and debugging. Complete quests in order to unlock the next one, earn points, and level up.

How it works:

  • Each quest is a standalone game level with its own objectives
  • Players interact with the game world to complete tasks
  • Points and XP are awarded on completion
  • Quests must be completed in order

Challenge

Quest 1 - File Structure 101. Walk up to the NPCs to learn about project structure. Use WASD or arrow keys to move.

Lines: 1 Characters: 0
Game Status: Not Started

Quest 1: File Structure 101

Learn how to navigate a project’s directory structure. Walk through the game world and interact with files and folders to build a proper project layout.

// GAME_RUNNER: Quest 1 - File Structure 101. Navigate the world and interact with folders to build a proper project layout. Use WASD to move.

import GameControl from '/assets/js/GameEnginev1/essentials/GameControl.js';
import GameEnvBackground from '/assets/js/GameEnginev1/essentials/GameEnvBackground.js';
import Player from '/assets/js/GameEnginev1/essentials/Player.js';
import Npc from '/assets/js/GameEnginev1/essentials/Npc.js';

class QuestFileStructure {
  constructor(gameEnv) {
    const path = gameEnv.path;
    const width = gameEnv.innerWidth;
    const height = gameEnv.innerHeight;

    const bgData = {
      name: 'quest1_bg',
      src: path + '/images/gamify-tools/clouds.jpg',
      pixels: { height: 720, width: 1280 }
    };

    const playerData = {
      id: 'DevHero',
      src: path + '/images/gamify-tools/chillguy.png',
      SCALE_FACTOR: 5,
      STEP_FACTOR: 1000,
      ANIMATION_RATE: 50,
      INIT_POSITION: { x: 50, y: height / 2 },
      pixels: { height: 532, width: 532 },
      orientation: { rows: 1, columns: 1 },
      down: { row: 0, start: 0, columns: 1 },
      downRight: { row: 0, start: 0, columns: 1, rotate: Math.PI / 16 },
      downLeft: { row: 0, start: 0, columns: 1, rotate: -Math.PI / 16 },
      right: { row: 0, start: 0, columns: 1, mirror: true },
      left: { row: 0, start: 0, columns: 1 },
      up: { row: 0, start: 0, columns: 1 },
      upRight: { row: 0, start: 0, columns: 1, rotate: -Math.PI / 16 },
      upLeft: { row: 0, start: 0, columns: 1, rotate: Math.PI / 16 },
      hitbox: { widthPercentage: 0.45, heightPercentage: 0.2 },
      keypress: { up: 87, left: 65, down: 83, right: 68 }
    };

    // NPC representing the src/ folder
    const srcFolderNpc = {
      id: 'src_folder',
      src: path + '/images/gamify-tools/robot.png',
      SCALE_FACTOR: 5,
      ANIMATION_RATE: 100,
      INIT_POSITION: { x: width * 0.3, y: height / 2 },
      pixels: { height: 532, width: 532 },
      orientation: { rows: 1, columns: 1 },
      down: { row: 0, start: 0, columns: 1 },
      hitbox: { widthPercentage: 0.5, heightPercentage: 0.5 },
      dialogues: [
        'I am the src/ folder! Source code lives here.',
        'Put your .js, .py, or .java files inside me.',
        'Objective complete: src/ folder found! +50 pts'
      ]
    };

    // NPC representing the README
    const readmeNpc = {
      id: 'readme_file',
      src: path + '/images/gamify-tools/robot.png',
      SCALE_FACTOR: 5,
      ANIMATION_RATE: 100,
      INIT_POSITION: { x: width * 0.6, y: height / 2 },
      pixels: { height: 256, width: 256 },
      orientation: { rows: 1, columns: 1 },
      down: { row: 0, start: 0, columns: 1 },
      hitbox: { widthPercentage: 0.5, heightPercentage: 0.5 },
      dialogues: [
        'I am README.md! Every project needs one.',
        'Describe your project, how to install it, and how to run it.',
        'Objective complete: README.md found! +50 pts'
      ]
    };

    this.classes = [
      { class: GameEnvBackground, data: bgData },
      { class: Player, data: playerData },
      { class: Npc, data: srcFolderNpc },
      { class: Npc, data: readmeNpc },
    ];
  }
}

export const gameLevelClasses = [QuestFileStructure];
export { GameControl };

<IPython.core.display.Javascript object>

All Quests Combined

Play through all four quests in sequence using the level selector. Complete them in order to unlock the full Dev Quest experience.

Challenge

Quest 1 - File Structure 101. Navigate the world and interact with folders to build a proper project layout. Use WASD to move.

Lines: 1 Characters: 0
Game Status: Not Started

Quest Design Guide

Each quest follows the same pattern:

  • Background: Sets the visual scene for the quest
  • Player: The Dev Hero the student controls with WASD
  • NPCs: Characters that represent concepts (files, errors, targets) and deliver dialogue when approached
  • Dialogues: Step through lesson content by walking up to NPCs and pressing the interact key

Adding a New Quest

  1. Create a new %%js code cell
  2. Add // GAME_RUNNER: <your challenge description>
  3. Define a new level class with the concept NPCs
  4. Export gameLevelClasses and GameControl
  5. Run make to convert and test on the web

Scoring Ideas

Embed point values in NPC dialogue lines so students know what each interaction is worth:

dialogues: [
  'I am the Makefile!',
  'Objective complete: +80 pts'
]
Game Status: Not Started