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:

  1. GameControl: Your GameControl class (usually imported)
  2. 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: Background, Custom Player

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

Combine Game Levels: Connected levels via ESC key

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

  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