✕

Submit Feedback

Computer Science & Software Engineering

Course Progress 0/0
Back to Timeline View
Week 7 Game Runner Examples

Game Runner Examples

4 min read

Define Game Runner in a Lesson

Game Runner integrates your GameEngine framework for teaching game development. Define challenge and code variables, then pass them to the include with a unique runner_id.

{% capture challenge1 %}
Create a basic game level with a player character. Use the GameEngine to set up the desert background and Chill Guy player!
{% endcapture %}

{% capture code1 %}
// Import GameEngine modules
import GameControl from '{{site.baseurl}}/assets/js/adventureGame/GameEngine/GameControl.js';
import GameLevelBasic from '{{site.baseurl}}/assets/js/adventureGame/GameLevelBasic.js';
// Export for game runner
export { GameControl };
export const gameLevelClasses = [GameLevelBasic];
{% endcapture %}

{% include game-runner.html 
   runner_id="game1"
   challenge=challenge1
   code=code1
   height="200px"
%}

Parameters

  • runner_id (required): Unique ID for each runner on the page (e.g., “game1”, “game2”)
  • challenge: Variable containing the challenge/instruction text
  • code: Variable containing the game setup JavaScript code
  • height (optional): Editor height (defaults to “300px”)

Game Runner Architecture

HTML Component

  • File: _includes/game-runner.html
  • Reusable component for GameEngine integration
  • Automatically creates gameContainer and gameCanvas
  • Provides game controls: Start, Pause/Resume, Stop, Reset
  • Level selector dropdown for switching between game levels

SCSS Styling

  • Main file: _sass/open-coding/forms/game-runner.scss
  • Uses runner-base mixin for consistency
  • Game output constrained to 400-600px height for education
  • Canvas automatically sized and centered
  • Color-coded buttons: Green (Start), Yellow (Pause), Red (Stop)

Game Output Area

The game renders in a constrained canvas for educational purposes:

  • Min height: 400px
  • Max height: 600px
  • Canvas max height: 580px
  • Black background with accent-colored border
  • Automatically centers the canvas
  • Scrollable if content exceeds container

Controls

  • ▶ Start: Runs the game code and starts the game engine
  • ⏸ Pause / ▶ Resume: Pauses and resumes game execution
  • ■ Stop: Stops the game and clears the canvas
  • ↻ Reset: Resets code to original and stops the game
  • Level Selector: Dropdown to switch between game levels
  • 📋 Copy: Copy code to clipboard
  • 🗑️ Clear: Clear the editor

Code Structure

Your game code must export two things:

  1. GameControl: Your GameControl class (usually imported)
  2. gameLevelClasses: Array of game level classes
import GameControl from '/assets/js/adventureGame/GameEngine/GameControl.js';
import GameLevelBasic from '/assets/js/adventureGame/GameLevelBasic.js';

export const GameControl = GameControl;
export const gameLevelClasses = [GameLevelBasic];

Basic Game: Desert Adventure

Challenge

Run the basic desert adventure game. Use WASD or arrow keys to move Chill Guy around the desert. Walk up to R2D2 to trigger a mini-game!

Lines: 1 Characters: 0
Game Status: Not Started

Multi-Level Game: Desert and Water

Challenge

Create a multi-level game! Start in the desert, then switch to the water level using the level selector dropdown. Try both environments!

Lines: 1 Characters: 0
Game Status: Not Started

Custom Game Level (Advanced)

Challenge

Create your own custom game level! This example shows how to define a simple level with a player and background. Modify the code to add your own characters and items!

Lines: 1 Characters: 0
Game Status: Not Started

Best Practices

Import Structure

Always import necessary GameEngine modules:

import GameControl from '/assets/js/adventureGame/GameEngine/GameControl.js';
import GameLevelBasic from '/assets/js/adventureGame/GameLevelBasic.js';

Export Requirements

Your code must export:

export { GameControl };
export const gameLevelClasses = [GameLevelBasic, GameLevelWater];

Level Class Structure

Each level class needs a constructor that defines:

  • Background data
  • Player/character data
  • NPC data
  • Collectible items
  • The this.classes array with all game objects

Game Controls

  • WASD or Arrow Keys: Move the player
  • Space: Jump (if implemented in level)
  • E or Enter: Interact with NPCs
  • Esc: Pause menu (if implemented)

Debugging

Use the game controls to debug:

  • Pause: Stop to examine game state
  • Stop: Clear and restart fresh
  • Reset: Restore original code
  • Console: Check browser console (F12) for errors

Teaching Tips

Progressive Learning Path

  1. Run Existing Levels: Start with GameLevelBasic
  2. Multi-Level Games: Add multiple levels with selector
  3. Modify Levels: Change player position, speed, sprites
  4. Custom Levels: Create entirely new levels
  5. Add Interactions: Add NPCs with dialogue
  6. Game Mechanics: Implement collectibles, enemies, physics

Common Modifications

Change Player Start Position:

INIT_POSITION: { x: 200, y: 300 }

Adjust Player Speed:

STEP_FACTOR: 500  // Faster movement

Different Background:

src: path + "/images/gamify/water.png"

Game Development Concepts

The GameEngine teaches:

  • Object-Oriented Programming: Classes, inheritance, composition
  • Game Loop: Update and render cycles
  • Sprite Animation: Frame-based animation
  • Collision Detection: Hitboxes and interaction
  • Event Handling: Keyboard input, user interactions
  • State Management: Game state, level transitions

Troubleshooting

Game won’t start:

  • Check console for import errors
  • Verify all import paths start with /assets/
  • Ensure exports are correct

Player not moving:

  • Check keypress configuration
  • Verify STEP_FACTOR is set
  • Check hitbox doesn’t block movement

Canvas is blank:

  • Verify background image path
  • Check canvas dimensions
  • Look for JavaScript errors in console

Course Timeline