Input/Output

Table of Contents


Keyboard Input

Configured keycode values mapping directly to the WASD controls. The game loop reads this from the engine to change player states

keypress: { up: 87, left: 65, down: 83, right: 68 }

if (player.pressedKeys?.[87] && this.isGrounded)



Canvas Rendering

Handles 2D graphics rendering. Overrode engine steps to establish certain paths, to fill custom polygons, and draw animated character sprite segments frame by frame.

// In Wolf update loop:
this.draw();

// In SplineBarrier draw method:
this.ctx.beginPath();
this.ctx.moveTo(this.polygon[0].x, this.polygon[0].y);
this.ctx.closePath();
this.ctx.fill();

draw() {
    this.splineBarrier.draw(this.debugMode);
  }



GameEnv Configuration

Configured responsive game conditions by extracting layout settings from the gameEnv object. The character positioning scales relative to gameEnv.innerWidth and gameEnv.innerHeight

constructor(gameEnv, game) {
    this.gameEnv = gameEnv;
    let width = gameEnv.innerWidth;
    let height = gameEnv.innerHeight;
}



API Integration

Integrated a third-party public API (iTunes Search API) to fetch music for our Red Riding Hood game.

this.endpoint = 'https://itunes.apple.com/search?term=little+red+riding+hood&entity=song&limit=5';
// ...
const response = await fetch(this.endpoint);

Integrated a game scoring API to handle data submission. When a player wins, the game passes the player’s name, final time, and game identifier to the leaderboard.

this.leaderboard.submitScore(name, parseFloat(timeTaken), "RedRidingHood")



Asynchronous I/O

Used async/await syntax and a try/catch block to create non-blocking network resource requests. Meaning the game can load the music without freezing the screen, lagging the controls, or dropping frames.

async fetchPreviewUrl() {
    try {
        const response = await fetch(this.endpoint);
        const data = await response.json();
        const track = data.results.find(item => item.previewUrl);
        return track.previewUrl;
    } catch (error) {
        console.error("iTunes API Error:", error);
        return null;
    }
}



JSON Parsing

Used .json() to convert the text response from the iTunes API into a usable JavaScript object.

const data = await response.json();

const track = data.results.find(item => item.previewUrl);