Keyboard Input — Event Listeners

The game captures keyboard input using addEventListener. From Player.js:

Code Runner Challenge

Keyboard tracker. Press W/A/S/D or arrow keys after clicking the output area. Watch which keys are active.

View IPYNB Source 
// Player.js — bindMovementKeyListners()
bindMovementKeyListners() {
    addEventListener('keydown', this.handleKeyDown.bind(this));
    addEventListener('keyup',   this.handleKeyUp.bind(this));
}

handleKeyDown({ keyCode }) {
    this.pressedKeys[keyCode] = true;   // add to active keys
    this.updateVelocity();
    this.updateDirection();
}

handleKeyUp({ keyCode }) {
    if (keyCode in this.pressedKeys) {
        delete this.pressedKeys[keyCode];  // remove from active keys
    }
    this.updateVelocity();
    this.updateDirection();
}
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...

Default key mapping from the Player data object:

Code Runner Challenge

Canvas rendering demo. Change the shapes, colors, or positions below and re-run.

View IPYNB Source 
keypress: { up: 87, left: 65, down: 83, right: 68 }  // W A S D
// Arrow keys: up: 38, left: 37, down: 40, right: 39
Lines: 1 Characters: 0
Output
Click "Run" in code control panel to see output ...
%%js
//CODE_RUNNER: Keyboard tracker. Press W/A/S/D or arrow keys after clicking the output area. Watch which keys are active.

const pressedKeys = {};
const keyNames = { 87:'W', 65:'A', 83:'S', 68:'D', 38:'↑', 37:'←', 40:'↓', 39:'→' };

document.addEventListener('keydown', ({ keyCode }) => {
    pressedKeys[keyCode] = true;
    const active = Object.keys(pressedKeys)
        .map(k => keyNames[k] || `key(${k})`)
        .join(' + ');
    console.log('Active keys:', active || 'none');
});

document.addEventListener('keyup', ({ keyCode }) => {
    delete pressedKeys[keyCode];
    console.log('Released key:', keyNames[keyCode] || keyCode);
});

console.log('Click here then press W/A/S/D or arrow keys!');

Canvas Rendering — draw() Method

Every game object draws itself onto a <canvas> element. From Coin.js:

// Coin.js — draw() using the Canvas 2D API
draw() {
    if (!this.ctx) return;
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);  // clear previous frame

    this.ctx.fillStyle = this.color;           // set fill color
    const centerX = this.canvas.width  / 2;
    const centerY = this.canvas.height / 2;
    const radius  = Math.min(this.canvas.width, this.canvas.height) / 3;

    this.ctx.beginPath();
    this.ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);  // circle
    this.ctx.fill();

    this.ctx.strokeStyle = '#B8860B';  // border color
    this.ctx.lineWidth = 2;
    this.ctx.stroke();
}

%%js
//CODE_RUNNER: Canvas rendering demo. Change the shapes, colors, or positions below and re-run.

// Create a canvas the same way the game engine does
const canvas = document.createElement('canvas');
canvas.width  = 400;
canvas.height = 200;
canvas.style.border = '2px solid #333';
canvas.style.background = '#1a1a2e';
document.body.appendChild(canvas);

const ctx = canvas.getContext('2d');

// --- Draw background ---
ctx.fillStyle = '#1a1a2e';
ctx.fillRect(0, 0, canvas.width, canvas.height);

// --- Draw a coin (circle) like Coin.js ---
ctx.fillStyle   = '#FFD700';
ctx.strokeStyle = '#B8860B';
ctx.lineWidth   = 3;
ctx.beginPath();
ctx.arc(80, 100, 30, 0, Math.PI * 2);  // x, y, radius, startAngle, endAngle
ctx.fill();
ctx.stroke();

// --- Draw a platform (rectangle) ---
ctx.fillStyle = '#4a9eff';
ctx.fillRect(150, 140, 200, 20);  // x, y, width, height

// --- Draw a player (red square) ---
ctx.fillStyle = '#ff4444';
ctx.fillRect(220, 110, 30, 30);

// --- Draw text ---
ctx.fillStyle = 'white';
ctx.font      = '14px monospace';
ctx.fillText('Game Canvas Demo', 10, 20);

console.log('Canvas rendered! Scroll up to see it.');

GameEnv Configuration

The GameEnv (GameSetup) object controls canvas size, game settings, and difficulty. Game level classes are configured as objects passed to the engine:

// GameLevel setup — from game-runner-example.ipynb
const playerData = {
    id: 'Hero',
    src: path + "/images/gamify/chillguy.png",
    SCALE_FACTOR: 5,       // Controls sprite size (1/5 of canvas height)
    STEP_FACTOR:  1000,    // Controls movement speed
    ANIMATION_RATE: 50,    // Frames between animation updates
    INIT_POSITION: { x: 100, y: 300 },
    pixels: { height: 512, width: 384 },
    orientation: { rows: 4, columns: 3 },
    hitbox: { widthPercentage: 0.45, heightPercentage: 0.2 },
    keypress: { up: 87, left: 65, down: 83, right: 68 }  // WASD
};

// The GameLevel constructor assembles these objects:
this.classes = [
    { class: GameEnvBackground, data: bgData },
    { class: Player,            data: playerData },
];

Summary

I/O Type API / Method Purpose
Keyboard input addEventListener('keydown', ...) Capture player movement
Canvas rendering ctx.fillRect(), ctx.arc(), ctx.drawImage() Draw sprites and shapes
GameEnv config Data objects passed to GameLevel Set canvas size, speed, difficulty