Game Runner Examples

3 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.

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:

GameControl: Your GameControl class (usually imported)
gameLevelClasses: Array of game level classes

import GameControl from '/assets/js/GameEnginev1/essentials/GameControl.js';
import GameLevelBasic from '/assets/js/GameEnginev1/GameLevelBasic.js';

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

Basic Game: Copied from GameBuilder

Challenge

Run the basic game. Use WASD or arrow keys to move Chill Guy around the desert. Walk up to R2D2 to trigger an interaction!

Lines: 1 Characters: 0

Game Status: Not Started

Best Practices

Import Structure

Always import necessary GameEngine modules:

import GameControl from '/assets/js/GameEnginev1/essentials/GameControl.js';
import GameLevelBasic from '/assets/js/GameEnginev1/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

Run Existing Levels: Start with GameLevelBasic
Multi-Level Games: Add multiple levels with selector
Modify Levels: Change player position, speed, sprites
Custom Levels: Create entirely new levels
Add Interactions: Add NPCs with dialogue
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

Computer Science Principles