Player.js Interactive Series

Lesson 1 of 5 — Player is a System (extends Character)

Big idea: Character handles physics/rendering; Player adds human intent (input) without rewriting the engine.

Mode: Character-only

Canvas — try moving with WASD

Input: off

Character-only: no input

Tip: Click the canvas first so it receives keyboard focus.

Live Code — highlights the “system boundary” (Character vs Player)

Focus: architecture

Lesson Controls

Lesson 1

Character-only mode

Turn this OFF to enable Player input behavior

Enable Player Input

When ON, Player listens to keys and moves the Character

Goal: Understand that Player doesn’t replace Character — it extends it by adding input.

Checkpoints — auto-verify understanding

0/2

You can switch between Character-only and Player

pending

Player input changes movement without changing draw/physics

pending

Live Debug — what the program thinks

ready

Entity Type

Character

Input Enabled

false

Last key

(none)

Position

(x=?, y=?)

Velocity

(x=0, y=0)