Void Striker — College Ready Blog

📋 TABLE OF CONTENTS

1 — Object-Oriented Programming

1.1 Writing Classes
1.2 Methods & Parameters
1.3 Instantiation & Objects
1.4 Inheritance
1.5 Method Overriding
1.6 Constructor Chaining

2 — Control Structures

2.1 Iteration
2.2 Conditionals
2.3 Nested Conditions

3 — Data Types

3.1 Numbers
3.2 Strings
3.3 Booleans
3.4 Arrays
3.5 Objects (JSON)

4 — Operators

4.1 Mathematical Operators
4.2 String Operations
4.3 Boolean Expressions

5 — Input / Output

5.1 Keyboard Input
5.2 Canvas Rendering
5.3 GameEnv Configuration
5.4 API Integration
5.5 Asynchronous I/O
5.6 JSON Parsing

6 — Documentation

6.1 Code Comments
6.2 Mini-Lesson Documentation
6.3 Code Highlights Table

7 — Debugging

7.1 Console Debugging
7.2 Hit Box Visualization
7.3 DevTools Breakpoints
7.4 Network Debugging
7.5 Application / Storage
7.6 Element Inspection

8 — Testing & Verification

8.1 Gameplay Testing Checklist
8.2 Integration Testing
8.3 API Error Handling

▲
Top Destroy 15 enemies in-game to unlock the full CS 111 requirement alignment below. Every objective from the rubric is mapped to specific code in this game with annotated snippets.

Controls

Key	Action
WASD	Move your ship
Arrow Keys	Fire (triple-shot spread)
Background button (top center)	Cycle between Nebula, Deep Space, and Supernova
P	Pause and open ship / cheat console

Engine v1 Engine v1.1 Select Level...

Game Status: Not Started

Progress:

🔒
OOP

🔒
Control

🔒
Data Types

🔒
Operators

🔒
Input/Output

🔒
Documentation

🔒
Debugging

🔒
Testing

0 kills

🔒 Lesson locked. Defeat enemies every 5 kills to unlock sections one by one.
Milestones: 5★ → 10★ → 15★ → 20★ → 25★ → 30★ → 35★ → 40★ — each unlocks the next section.

---

✅ CS 111 Portfolio Evidence — Void Striker

Every CS 111 learning objective is demonstrated in the Void Striker codebase. Each snippet is taken directly from the source.

1 — Object-Oriented Programming

1.1 Writing Classes

A class is a blueprint for creating objects — it defines their properties and behavior. extends sets up an inheritance chain so one class can reuse another's code. this.classes tells the engine which objects to create at startup.

// A class is defined with the 'class' keyword
// 'extends Character' means Player inherits all of Character's properties and methods
class Player extends Character {
  // constructor() runs automatically when you write: new Player(data, gameEnv)
  constructor(data = null, gameEnv = null) {
    super(data, gameEnv);              // super() calls Character's constructor first — required before using 'this'
    this.id       = data?.id ?? 'player'; // 'this' refers to the new Player instance being built
    this.keypress = data?.keypress || { up: 87, left: 65, down: 83, right: 68 };
    this.pressedKeys = {};             // tracks which keys are currently held down
  }
  // ... movement, collision handling, draw methods
}

// Second custom class — extends NPC (which itself extends Character)
class Enemy extends NPC {
  constructor(data = null, gameEnv = null) {
    super(data, gameEnv);              // chains up through NPC → Character → GameObject
    this.playerDestroyed = false;      // flag set to true once this enemy kills the player
  }
  // ... patrol AI, collision detection, explode methods
}

// Level class — wires the game into the engine
class GameLevelVoidStriker {
  constructor(gameEnv) {
    // this.classes: the engine reads this array to know what objects to create
    this.classes = [{ class: GameEnvBackground, data: image_data_space }];
    // setTimeout delays init so the engine canvas is ready first (async hand-off)
    setTimeout(() => VoidStrikerGame.init(gameEnv), 200);
  }
}

1.2 Methods & Parameters

A method is a function that belongs to a class; it uses this to access the instance's own data. Parameters are the named inputs declared in parentheses — they let one method body handle many different callers without duplicating code.

// Method with a parameter — 'other' is the object this Player collided with
// 'this' = the Player instance; 'this.collisionData' = collision info stored on this instance
handleCollisionReaction(other) {
  const touchPoints = this.collisionData?.touchPoints?.this; // '?.' = safe access (won't crash if null)
  // Zero velocity along whichever axis was touched — stops the ship from passing through walls
  if (touchPoints?.top)    this.velocity.y = Math.min(0, this.velocity.y);
  if (touchPoints?.bottom) this.velocity.y = Math.max(0, this.velocity.y);
  if (touchPoints?.left)   this.velocity.x = Math.min(0, this.velocity.x);
  if (touchPoints?.right)  this.velocity.x = Math.max(0, this.velocity.x);
}

// Method with no parameter — uses 'this.gameEnv' (set by the parent constructor) to scan objects
collisionChecks() {
  for (const gameObj of this.gameEnv.gameObjects) { // 'this.gameEnv' = the engine context
    if (gameObj instanceof Player) {                 // 'instanceof' checks the object's class
      this.isCollision(gameObj);                     // calls inherited method from Character
      if (this.collisionData.hit) return true;
    }
  }
  return false;
}

// Method with two parameters — spawns an explosion at position (x, y)
explode(x, y) {
  const shards = 20;
  for (let i = 0; i < shards; i++) { /* spawn each shard at x, y */ }
}

1.3 Instantiation & Objects

Instantiation means calling new ClassName() to create an independent object from a class blueprint. Each object owns its own copy of the class's properties — changing one ship's position doesn't affect any other. An object literal ({ key: value }) is a one-off record with no class required.

// buildShip() creates a plain object literal — no class needed for a one-time data record
// 'ship' is the variable holding this instance; all ship state lives inside this object
ship = {
  x: W / 2, y: H * 0.78,   // starting position (center, near bottom)
  w: 28, h: 38,              // collision box dimensions in pixels
  speed: SHIP_CHARS[activeChar].speed, // pulled from the active skin config
  shootCooldown: 0,          // frames until the ship can fire again (counts down each frame)
  invincible: 0,             // frames of post-hit immunity remaining
  thrustFlicker: 0,          // drives the engine flame animation
};

// spawnBoss() creates a boss object — stats scale with 'tier' (how many bosses beaten so far)
const hp = 55 + tier * 30;  // each tier adds 30 HP
boss = {
  x: W / 2, y: -80,          // starts above the visible canvas, flies in from the top
  r: 40 + tier * 2,          // collision radius — grows each tier
  hp, maxHp: hp,              // shorthand: 'hp' sets both hp and maxHp to the same value
  speed: 2.7 + tier * 0.45,  // movement speed — increases each tier
  pulse: 0, tier,             // 'pulse' drives the glow animation; 'tier' stored for reference
  palette: BOSS_PALETTES[tier % BOSS_PALETTES.length], // wraps palette index if tier > # of palettes
};

// Engine config — this.classes is an object property on the GameLevelVoidStriker instance
this.classes = [
  { class: GameEnvBackground, data: image_data_space }, // engine reads 'class' to call 'new class(data)'
];

1.4 Inheritance

Inheritance lets a child class automatically get all the properties and methods of its parent without rewriting them. The chain here is GameObject → Character → Player. Each level adds only what it specifically needs — Player never re-implements drawing because it inherits it from above.

// Root class — every game object starts here; provides canvas and game-loop registration
class GameObject {
  constructor(gameEnv) {
    this.gameEnv = gameEnv;            // 'this' = the new GameObject; stores the engine context
    gameEnv.gameObjects.push(this);    // registers itself so the engine's loop can call update/draw
  }
  update() { /* default: do nothing — subclasses override this */ }
  draw()   { /* default: render the canvas element */ }
}

// Mid-level class — adds sprite physics on top of GameObject
class Character extends GameObject {
  constructor(data = null, gameEnv = null) {
    super(gameEnv);                    // super() calls GameObject's constructor — sets this.gameEnv and registers
    this.canvas = document.createElement('canvas'); // each Character gets its own drawing layer
    this.velocity = { x: 0, y: 0 };   // inherited by Player and Enemy — drives per-frame movement
  }
}

// Leaf class — adds keyboard input handling on top of Character
class Player extends Character {
  constructor(data = null, gameEnv = null) {
    super(data, gameEnv);              // calls Character's constructor (which calls GameObject's)
    this.keypress    = data?.keypress || { up: 87, left: 65, down: 83, right: 68 }; // WASD key codes
    this.pressedKeys = {};             // set to true/false as keys are held or released
  }
}

// Separate leaf — enemy path: NPC extends Character, Enemy extends NPC
class Enemy extends NPC {             // NPC adds patrol/AI behavior between Character and Enemy
  constructor(data = null, gameEnv = null) {
    super(data, gameEnv);             // chains: NPC → Character → GameObject (all constructors run)
    this.playerDestroyed = false;     // this Enemy's own flag — does not affect other Enemy instances
  }
}

1.5 Method Overriding

Overriding means a child class defines a method with the same name as a parent method, replacing its behavior. Calling super.methodName() runs the parent's version first, then the child adds its own logic on top — so you extend rather than replace.

// Enemy overrides update() — the parent version (Character.update) is preserved via super
update() {
  super.update();   // ← calls Character's update(): runs sprite animation and draw — inherited behavior kept
  // Enemy-specific logic added after:
  if (!this.playerDestroyed && this.collisionChecks()) {
    this.handleCollisionEvent();      // logs the kill, sets restart flag — only Enemy does this
  }
  this.stayWithinCanvas();           // keeps enemy within the game border — only Enemy does this
}

// Character's original update() — what super.update() calls above
update() {
  this.updateAnimation();  // steps through the sprite sheet frames
  this.draw();             // renders the current frame to the canvas
}

// Player completely replaces handleCollisionReaction — no super call, parent version discarded
handleCollisionReaction(other) {
  // 'this.collisionData' was set by the inherited isCollision() before this method ran
  const touchPoints = this.collisionData?.touchPoints?.this;
  // Prevent velocity from pushing further into the wall on whichever side was hit
  if (touchPoints?.top)    this.velocity.y = Math.min(0, this.velocity.y);
  if (touchPoints?.bottom) this.velocity.y = Math.max(0, this.velocity.y);
  if (touchPoints?.left)   this.velocity.x = Math.min(0, this.velocity.x);
  if (touchPoints?.right)  this.velocity.x = Math.max(0, this.velocity.x);
}

1.6 Constructor Chaining

super() inside a constructor calls the parent class's constructor, passing along any arguments it needs. JavaScript requires this before you can use this in a child constructor — without it, the engine would throw a ReferenceError. Every level of the hierarchy initializes itself in order before the child adds its own properties.

// Chain visualized top to bottom: Player → Character → GameObject

// Player.js — child constructor; must call super() before touching 'this'
constructor(data = null, gameEnv = null) {
  super(data, gameEnv);   // ① calls Character's constructor with the same arguments
  this.pressedKeys = {};  // ② only runs after Character (and GameObject) have finished setting up
}

// Character.js — middle constructor; forwards gameEnv up to GameObject
constructor(data = null, gameEnv = null) {
  super(gameEnv);         // ① calls GameObject's constructor — sets this.gameEnv, registers in loop
  this.canvas   = document.createElement('canvas'); // ② Character-specific setup
  this.velocity = { x: 0, y: 0 };                  // ③ all descendants (Player, Enemy) inherit this
}

// GameObject.js — root constructor; no further super() needed
constructor(gameEnv) {
  // No super() here — Object (JS built-in) is the implicit root, no custom init needed
  this.gameEnv = gameEnv;               // store engine reference so any method can reach it via this.gameEnv
  this.canvas  = document.createElement('canvas');
  gameEnv.gameObjects.push(this);       // register so the engine loop calls this.update() each frame
}

// Enemy chain — goes through NPC as an extra level
class Enemy extends NPC {
  constructor(data = null, gameEnv = null) {
    super(data, gameEnv);  // calls NPC → NPC calls Character → Character calls GameObject (three levels)
    this.playerDestroyed = false;
  }
}

Code Runner Challenge

Build a SpaceShip class like the one in Void Striker, then instantiate it and call its methods.

View IPYNB Source

%%js

// CODE_RUNNER: Build a SpaceShip class like the one in Void Striker, then instantiate it and call its methods.

// 'class' defines a blueprint; every ship created from this class shares its methods but has its own data
class SpaceShip {
  // constructor() runs when you write: new SpaceShip(x, y, speed)
  // x, y, speed are parameters — values passed in at the moment of creation
  constructor(x, y, speed) {
    this.x = x;       // 'this' = the new SpaceShip instance; 'this.x' stores x as a property on it
    this.y = y;       // each instance has its own this.x and this.y — independent of other ships
    this.speed = speed;
    this.lives = 3;   // default value — not passed as a parameter, set the same for every ship
  }
  // move() is a method — a function that belongs to this class
  // dx, dy are direction inputs (-1, 0, or 1); multiplied by speed to scale the step size
  move(dx, dy) {
    this.x += dx * this.speed; // '+=' adds to the current value of this.x
    this.y += dy * this.speed;
  }
  // status() returns a string describing this instance — 'this.x' reads the property set in constructor
  // .toFixed(1) rounds the float to 1 decimal place for cleaner output
  status() {
    return `Ship at (${this.x.toFixed(1)}, ${this.y.toFixed(1)}) — lives: ${this.lives}`;
  }
}

// 'new SpaceShip(...)' calls the constructor and creates one independent object
const ship = new SpaceShip(512, 430, 4.5);
ship.move(1, 0);   // move right — dx=1, dy=0; ship.x increases by 4.5
ship.move(0, -1);  // move up   — dx=0, dy=-1; ship.y decreases by 4.5 (canvas y grows downward)
console.log(ship.status());
// Try: add a shoot() method, change the starting position, or swap in Shadow's speed (5.2)

Python Java JavaScript 14px 16px 18px 20px

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

2 — Control Structures

2.1 Iteration

A loop repeats a block of code for every item in a collection, or a fixed number of times. Without loops, updating 50 enemies per frame would require 50 separate lines. Three forms appear here: forEach for simple per-item operations, for when you need the index, and Array.from to build an array from a count.

// forEach — calls the arrow function once per star; 's' is the current star object
// '% H' (modulo H) wraps the y position back to 0 when it passes the bottom — no if-statement needed
layerFarStars.forEach(s => { s.y = (s.y + s.speed) % H; });
layerMidStars.forEach(s => {
  s.y        = (s.y + s.speed) % H;
  s.twinkleT += s.twinkleRate;  // advances the star's brightness oscillation counter each frame
});

// for loop — 'i' is the index; 'i < count' is the stop condition; 'i++' increments each iteration
// i * 35 staggers y-position so enemies don't all stack on top of each other off-screen
const count = 5 + wave * 3;             // more enemies each wave
for (let i = 0; i < count; i++) {
  enemies.push({                         // push() adds a new enemy object to the end of the array
    x: rand(40, W - 40),                 // rand() returns a random number between two values
    y: rand(-200, -30) - i * 35,         // each enemy starts a bit higher off-screen than the last
    r: 18, speed: rand(1.0, 1.8 + wave * 0.25),
  });
}

// Array.from — builds an array of 9 vertex objects; '_' is the unused element, 'i' is the index
// Creates a jagged asteroid shape by placing 9 points unevenly around a circle
points: Array.from({ length: 9 }, (_, i) => ({
  a: (i / 9) * Math.PI * 2,   // angle in radians: divides 360° into 9 equal slices
  r: rand(0.6, 1.0),           // random fraction of radius — makes each point closer or farther from center
}))

2.2 Conditionals

An if/else conditional picks one of two execution paths based on a boolean test. The chaser flag on each enemy is a boolean stored at spawn — every frame, this single branch decides the enemy's movement math without needing two separate enemy types.

// forEach iterates all enemies; 'e' is each enemy object for this iteration
enemies.forEach(e => {
  if (e.chaser) {
    // Vector pursuit — point the enemy toward the ship and accelerate it there
    const dx = ship.x - e.x;   // horizontal distance: positive = ship is to the right
    const dy = ship.y - e.y;   // vertical distance:   positive = ship is below
    const dist = Math.hypot(dx, dy) || 1;  // Pythagorean distance; '|| 1' prevents divide-by-zero
    e.chaseAcc = Math.min(e.speed, e.chaseAcc + 0.0006); // gradually accelerates up to max speed
    const spd = (e.speed + e.chaseAcc) * worldSpeed;
    e.x += (dx / dist) * spd;  // move along x by the normalized direction times speed
    e.y += (dy / dist) * spd;  // move along y by the normalized direction times speed
    e.angle = Math.atan2(dy, dx); // rotate sprite to face the ship (atan2 converts dx/dy to angle)
  } else {
    // Drifter — falls straight down and bounces off side walls
    e.y += e.speed * worldSpeed;
    e.x += e.vx   * worldSpeed;
    if (e.x < 20 || e.x > W - 20) e.vx *= -1; // *= -1 flips sign to reverse horizontal direction
  }
});

2.3 Nested Conditions

Nested conditions layer multiple independent checks — the outer test must pass before the inner test even runs. Each level here enforces a real game rule: invincibility, physical overlap, then lethality. Keeping them nested rather than flat with && makes it easy to add per-level logic (like the invincibility flash) without affecting the other checks.

// Level 1: skip all damage while the ship is in its post-hit immunity window
if (ship.invincible <= 0) {
  // spread operator (...) merges enemies and asteroids into one array for a single pass
  const contacts = boss
    ? [...enemies, ...asteroids, boss]  // boss is also a threat while alive
    : [...enemies, ...asteroids];
  for (const e of contacts) {
    const dx = ship.x - e.x, dy = ship.y - e.y;
    // Level 2: are the ship and this contact physically overlapping?
    if (Math.sqrt(dx*dx + dy*dy) < (e.r || 24) + 20) {
      lives--;                      // remove one life
      ship.invincible = 90;         // 90 frames ≈ 1.5 seconds of immunity at 60 fps
      spawnExplosion(ship.x, ship.y, '#00eeff'); // visual feedback at ship position
      // Level 3: has the player run out of lives?
      if (lives <= 0) gameState = 'dead'; // switches the game loop to the death screen
      break;  // stop checking contacts — one hit per frame maximum
    }
  }
}

// Nested shooting — only fire when cooldown is zero AND a direction key is held
if (ship.shootCooldown === 0) {
  let sx = 0, sy = 0;
  if (keys['ArrowLeft'])  sx -= 1;  // keys object: true while the key is physically held
  if (keys['ArrowRight']) sx += 1;
  if (keys['ArrowUp'])    sy -= 1;
  if (keys['ArrowDown'])  sy += 1;
  if (sx !== 0 || sy !== 0) {       // inner guard: don't fire with no direction pressed
    fireDirected(sx, sy);           // fires bullets in the (sx, sy) vector direction
    ship.shootCooldown = 12;        // reset cooldown — 12 frames before next shot allowed
  }
}

Code Runner Challenge

Simulate enemy wave spawning from Void Striker — change the wave number and observe.

View IPYNB Source

%%js

// CODE_RUNNER: Simulate enemy wave spawning from Void Striker — change the wave number and observe.

const wave = 3; // try 1, 5, or 10

const enemies = []; // empty array — push() adds to it inside the loop
// for loop: 'i' starts at 0; runs while i < (5 + wave*3); i++ increments after each iteration
for (let i = 0; i < 5 + wave * 3; i++) {
  // Math.random() returns a float in [0, 1); Math.min caps the probability at 0.45
  const isChaser = wave >= 2 && Math.random() < Math.min(0.45, 0.08 * wave);
  enemies.push({              // push() appends a new object to the end of the enemies array
    type:   isChaser ? 'chaser' : 'drifter', // ternary: picks the string based on isChaser boolean
    hp:     1 + Math.floor(wave / 2),        // Math.floor rounds down; hp increases every 2 waves
    spawnY: -30 - i * 35,                    // each enemy starts a bit higher off-screen than the last
  });
}

// filter() returns a new array containing only elements where the callback returns true
const chasers  = enemies.filter(e => e.type === 'chaser').length; // .length counts elements
const drifters = enemies.length - chasers;
console.log(`Wave ${wave}: ${enemies.length} enemies (${chasers} chasers, ${drifters} drifters, ${enemies[0].hp} HP each)`);
// Try: at what wave does the chaser ratio stop increasing? What is its cap?

Python Java JavaScript 14px 16px 18px 20px

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

3 — Data Types

3.1 Numbers

JavaScript has one number type covering both integers and floats. Integers (whole numbers) count discrete things like lives and kills. Floats (decimals) power physics: positions, velocities, and angles update in sub-pixel increments each frame for smooth motion.

let totalKills = 0;                        // integer: whole number, counts kills
let wave = 1, lives = 3;                   // integers: game state counters
ship.x = W / 2;                            // float: canvas center — often a decimal (e.g. 512.5)
boss.speed = 2.7 + tier * 0.45;           // float: each tier adds a fractional speed increase
a.verticalVelocity -= a.gravityAcceleration;  // float -= float: accumulates gravity each frame
const spread = 0.15;                       // float in radians (~8.6°): used as angle offset for bullet spread

3.2 Strings

A string is a sequence of characters in quotes. Template literals (backtick strings with \${}) embed any expression inline, avoiding + concatenation. Strings are used here for state machine keys, asset IDs, and live HUD display.

let gameState = 'title';   // string used as state key — compared with === in every game-loop branch
const BG_SCENES = ['nebula', 'deepspace', 'supernova']; // named strings instead of magic numbers 0/1/2
canvas.id = 'voidstriker-canvas'; // string ID — later used by document.getElementById() to find this canvas

// Template literal: backtick string, ${} embeds a live JS expression — no concatenation needed
s.textContent = `KILLS: ${totalKills}`; // re-assigned every frame; totalKills is a number, auto-converted to string
w.textContent = `WAVE: ${wave}`;

// Template literal builds a full CSS gradient value from two palette color strings
fill.style.background = `linear-gradient(90deg, rgba(${p.glow},1), ${p.bodyHi})`;
// p.glow is e.g. '255,40,80' (a string); p.bodyHi is e.g. '#ff7799' — both embedded directly

// rgba color built inline with template literal — no string splitting needed later
ctx.fillStyle = `rgba(200,210,255,${s.alpha})`; // s.alpha is a float like 0.73 — embedded into CSS color

3.3 Booleans

A boolean is either true or false — a single-bit decision flag. Booleans guard state transitions and prevent a single event (one bullet, one hit) from triggering twice in the same frame.

let consoleActive = false; // false = normal game; true = P-menu is open; controls input routing

// isChaser: computed once at enemy spawn using && (AND) and Math.random()
// wave >= 2 = must be at least wave 2; Math.random() < threshold = random chance
const isChaser = wave >= 2 && Math.random() < Math.min(0.45, 0.08 * wave);
// Math.min caps the probability at 45% — enemies don't all become chasers at high waves

let bulletConsumed = false;         // set to true when a bullet hits something this frame
if (bulletConsumed) continue;       // 'continue' skips to the next loop iteration — prevents double-kill

// ship.invincible is a number, but used like a boolean: > 0 means "immunity is active"
if (ship.invincible <= 0) { /* only process damage when immunity frames are exhausted */ }

3.4 Arrays

An array is an ordered list that can hold any number of values. The game stores every live object in arrays that grow (via push()) as things spawn and shrink (via filter()) as things die — the loop never needs to know how many there are in advance.

// Four live-object arrays — the game loop iterates each one every frame
let bullets = [], enemies = [], asteroids = [], particles = [];

// Config array — each element is an object describing one ship skin
const SHIP_CHARS = [
  { name: 'Striker', body: '#a0d8ff', cockpit: '#00eeff', thrustRgb: '0,200,255', bullet: '#00eeff', speed: 4.5 },
  { name: 'Shadow',  body: '#bb99ee', cockpit: '#cc55ff', thrustRgb: '160,0,255', bullet: '#cc55ff', speed: 5.2 },
  { name: 'Inferno', body: '#ffbb77', cockpit: '#ff5500', thrustRgb: '255,100,0', bullet: '#ff6600', speed: 4.0 },
  { name: 'Nova',    body: '#99ffcc', cockpit: '#00ff99', thrustRgb: '0,255,140', bullet: '#00ff99', speed: 4.8 },
];
// Accessed by index: SHIP_CHARS[0] = Striker, SHIP_CHARS[1] = Shadow, etc.

// filter() returns a new array containing only elements where the function returns true
// 'b.life--' decrements life as a side effect — if life was 1, it returns 1 (truthy), then becomes 0
// Next frame: life is 0, b.life-- returns 0 (falsy) → bullet is excluded (removed)
bullets = bullets.filter(b => b.life-- > 0);

// Spread operator (...) unpacks an array into individual elements — merges two arrays into one
const contacts = boss ? [...enemies, ...asteroids, boss] : [...enemies, ...asteroids];
// Result: one flat array containing all threats for a single collision pass

3.5 Objects (JSON)

An object literal ({ key: value, ... }) groups related values under one name. JSON (JavaScript Object Notation) uses the same syntax — objects in code and API responses have identical structure and access patterns.

// Nested object — engine reads pixels.height and pixels.width to size the canvas
const image_data_space = {
  id:     'VoidStriker-Background',
  src:    '',
  pixels: { height: 570, width: 1025 }  // nested object: accessed as image_data_space.pixels.height
};

// Array of objects — each element is a palette; indexed by tier % length to cycle through them
const BOSS_PALETTES = [
  { glow: '255,40,80',   bodyHi: '#ff7799', bodyLo: '#660022', tentacle: '#aa1144', eye: '#ffee44' },
  { glow: '120,255,140', bodyHi: '#aaffaa', bodyLo: '#003322', tentacle: '#22aa44', eye: '#ddff66' },
  // ... 3 more palettes
];

// Object destructuring — pulls named properties out into local variables in one line
const { glow, bodyHi, bodyLo } = boss.palette;  // equivalent to: const glow = boss.palette.glow; ...
ctx.fillStyle = bodyHi;                           // use destructured variable directly
fill.style.background = `linear-gradient(90deg, rgba(${glow},1), ${bodyHi})`;

Code Runner Challenge

Explore the data types powering Void Striker — modify values and observe each output.

View IPYNB Source

%%js

// CODE_RUNNER: Explore the data types powering Void Striker — modify values and observe each output.

// Arrow function — concise function syntax; 'tier =>' means tier is the parameter
const bossHp    = tier => 55 + tier * 30;                  // returns a number: integer HP
const bossSpeed = tier => (2.7 + tier * 0.45).toFixed(2);  // .toFixed(2) returns a string with 2 decimals

// Template literal — backtick string; ${} embeds a JS expression (number auto-converted to string)
let kills = 7, wave = 2;
const hud = `KILLS: ${kills}  |  WAVE: ${wave}`;

// Boolean used in ternary — true = boss present → fewer bullets (harder)
const bossAlive = true;
const shots = bossAlive ? 2 : 3; // ternary: condition ? valueIfTrue : valueIfFalse

// Array of objects — each element is a record with 'name' and 'speed' properties
const SHIP_CHARS = [
  { name: 'Striker', speed: 4.5 }, { name: 'Shadow', speed: 5.2 },
  { name: 'Inferno', speed: 4.0 }, { name: 'Nova',   speed: 4.8 },
];

console.log(hud);
console.log(`Tier 0 boss: ${bossHp(0)} HP @ speed ${bossSpeed(0)}`);
console.log(`Tier 3 boss: ${bossHp(3)} HP @ speed ${bossSpeed(3)}`);
console.log(`Boss present → firing ${shots} bullets`);
// .sort() reorders the array in place; (a,b) => b.speed - a.speed sorts highest speed first
console.log(`Fastest ship: ${SHIP_CHARS.sort((a, b) => b.speed - a.speed)[0].name}`);
// Try: set bossAlive = false and see the shot count change

Python Java JavaScript 14px 16px 18px 20px

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

4 — Operators

4.1 Mathematical Operators

Math operators (+ - * / % **) power all physics. -= accumulates gravity each frame. % (modulo) wraps positions without branching. Trig functions (Math.hypot, Math.atan2) convert between Cartesian coordinates and angles.

// -= (subtract-assign): subtracts gravityAcceleration from verticalVelocity each frame
// positive verticalVelocity = upward; subtracting makes it more negative = falling faster
a.verticalVelocity -= a.gravityAcceleration;

// > comparison: once falling exceeds terminal speed, clamp it
// unary - flips the sign: -a.verticalVelocity converts negative velocity to positive fall speed
if (-a.verticalVelocity > a.terminalVelocity)
  a.verticalVelocity = -a.terminalVelocity; // set to exactly terminal (negative, since downward)

// += (add-assign): update canvas y position; negative velocity flipped positive = moves down on screen
a.y += -a.verticalVelocity * worldSpeed;

// Math.hypot(dx, dy) = Math.sqrt(dx*dx + dy*dy) — Pythagorean distance between two points
// || 1: if hypot returns 0 (same position), substitute 1 to avoid dividing by zero below
const dist = Math.hypot(dx, dy) || 1;

// % (modulo): remainder after division — wraps y back to 0 when it exceeds H (canvas height)
s.y = (s.y + s.speed) % H;

// + and *: boss HP and speed scale linearly with tier (number of bosses defeated)
boss.speed = 2.7 + tier * 0.45;  // tier 0 = 2.7, tier 1 = 3.15, tier 2 = 3.6 ...
const hp   = 55  + tier * 30;    // tier 0 = 55 HP, tier 1 = 85 HP ...

4.2 String Operations

Template literals (backtick strings with \${expression}) replace concatenation for building display strings. Array.from with .join() generates repeated text (like the lives symbols) without a manual loop.

// Template literals — backtick string, ${} embeds any JS expression at that position
s.textContent = `KILLS: ${totalKills}`; // re-evaluates totalKills every time this line runs
w.textContent = `WAVE: ${wave}`;

// Array.from creates an array of 'lives' elements; () => '▲' returns a triangle for each
// .join(' ') concatenates them with a space between: "▲ ▲ ▲"
l.textContent = Array.from({ length: lives }, () => '▲').join(' ');

// Template literal constructs a CSS linear-gradient value from two color strings
fill.style.background = `linear-gradient(90deg, rgba(${p.glow},1), ${p.bodyHi})`;
// p.glow is a string like '255,40,80'; embedding it inside rgba() builds a valid CSS color

// rgba color assembled inline — ${s.alpha} is a number like 0.73 converted to string automatically
ctx.fillStyle = `rgba(200,210,255,${s.alpha})`;

4.3 Boolean Expressions

Boolean operators: || (OR) is true if either side is true; && (AND) requires both sides. The ternary operator (condition ? valueIfTrue : valueIfFalse) is a compact one-line if/else. Short-circuit evaluation means || stops as soon as it finds a truthy value — used here as a safe default.

// || (OR): accept lowercase or uppercase without two separate if-statements
if (keys['a'] || keys['A']) ship.x -= ship.speed;

// Short-circuit: if Math.hypot returns 0 (both objects at the same pixel), || 1 gives a safe fallback
// Without this, (dx / dist) would be 0/0 = NaN, and the enemy would stop moving permanently
const dist = Math.hypot(dx, dy) || 1;

// && (AND): both conditions must be true for isChaser to be true
// Math.min caps the random threshold so chasers don't dominate at very high waves
const isChaser = wave >= 2 && Math.random() < Math.min(0.45, 0.08 * wave);

// filter with side-effect: b.life-- decrements and returns the pre-decrement value
// if pre-decrement value > 0, the bullet survives; if 0, it's removed from the array
bullets = bullets.filter(b => b.life-- > 0);

// Ternary operator: boss present → 2-bullet array; boss absent → 3-bullet array
// The center bullet (straight shot) is removed while the boss is alive to make it harder
const shots = boss
  ? [{ a: angle - spread, speed: 10 }, { a: angle + spread, speed: 10 }]             // 2 shots
  : [{ a: angle - spread, speed: 10 }, { a: angle, speed: 11 }, { a: angle + spread, speed: 10 }]; // 3 shots

Code Runner Challenge

Run the asteroid gravity simulation from Void Striker for 12 frames.

View IPYNB Source

%%js

// CODE_RUNNER: Run the asteroid gravity simulation from Void Striker for 12 frames.

// verticalVelocity: positive = upward (stored as positive to match real-world physics)
// Canvas y increases downward, so the code flips the sign when updating position
let verticalVelocity   =  0.5;   // seed: slight upward velocity so the asteroid starts slow
const gravityAccel     =  0.055; // subtracted each frame — pulls verticalVelocity toward negative
const terminalVelocity =  3.65;  // maximum fall speed; real-world air resistance equivalent

// for loop runs 12 times; frame goes from 1 to 12 inclusive
for (let frame = 1; frame <= 12; frame++) {
  verticalVelocity -= gravityAccel;              // step 1: apply gravity (reduces velocity each frame)
  if (-verticalVelocity > terminalVelocity)      // step 2: -verticalVelocity converts to fall speed for comparison
    verticalVelocity = -terminalVelocity;         // clamp: don't fall faster than terminal velocity
  const vy = -verticalVelocity;                  // step 3: flip sign for canvas y (positive = moves down on screen)
  // String(frame).padStart(2) pads single-digit frame numbers with a space: " 1", " 2", ..., "12"
  console.log(`Frame ${String(frame).padStart(2)}: fall speed = ${vy.toFixed(3)} px/frame`);
}
// Try: seed verticalVelocity = 2.0 — does it still respect the terminal velocity cap?

Python Java JavaScript 14px 16px 18px 20px

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

5 — Input / Output

5.1 Keyboard Input — Event Listeners

An event listener registers a callback function that runs whenever a named browser event fires. Because JavaScript is single-threaded and the game loop can't poll the keyboard directly, two listeners write held-key state into a shared keys object; the loop reads that object every frame for smooth held-key movement.

// attachInput() wires up all keyboard listeners — called once at game start
function attachInput() {
  // addEventListener(event, callback) — 'keydown' fires the moment a key is pressed
  // 'e' is the KeyboardEvent object passed by the browser; e.key is the key's name string
  window.addEventListener('keydown', e => {
    if (e.key === 'p' || e.key === 'P') {
      if (gameState !== 'playing') return; // 'return' exits the callback early — no action on title/dead screen
      consoleActive ? closeConsole() : openConsole(); // ternary: toggle P-menu based on current state
      return;
    }
    if (!consoleActive) keys[e.key] = true; // write 'true' into the keys dictionary for this key name

    // preventDefault() stops the browser's default action (scrolling) for these keys
    if ([' ','ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].includes(e.key))
      e.preventDefault(); // .includes() checks if e.key is in the array — returns boolean
  });
  // 'keyup' fires when the key is released — write false to mark it as no longer held
  window.addEventListener('keyup', e => { keys[e.key] = false; });
}

// The game loop reads 'keys' every frame — smooth movement because the state persists between frames
if (keys['a'] || keys['A']) ship.x -= ship.speed; // held left = subtract speed from x each frame
if (keys['d'] || keys['D']) ship.x += ship.speed; // held right = add speed to x each frame

5.2 Canvas Rendering — draw() Implementations

The Canvas 2D API is a stateful drawing surface — ctx is the 2D rendering context object. Every frame is a complete redraw from scratch. ctx.save()/ctx.restore() snapshot and restore state (transforms, fill colors) so one object's translate doesn't leak into the next.

// drawImage() renders a pre-drawn canvas as an image — bgCanvas was drawn once at startup
// Drawn twice at different y offsets to create an infinite scroll illusion
ctx.drawImage(bgCanvas, 0, layerNebula.offsetY - H); // top copy (above viewport while scrolling in)
ctx.drawImage(bgCanvas, 0, layerNebula.offsetY);      // bottom copy (currently visible)

// save() snapshots: current transform, fillStyle, strokeStyle, lineWidth, etc.
ctx.save();
ctx.translate(x, y);       // shift the coordinate origin to the ship's position
                            // now (0,0) means "ship center" — all coordinates below are relative to ship
ctx.fillStyle = ch.body;   // ch = the active ship skin config object
ctx.beginPath();            // start a new vector path (clears any previous path)
ctx.moveTo(0, -h / 2);     // lift the pen to the nose tip (top center of the ship)
ctx.lineTo(w / 2, h / 2);  // draw to right wing tip
ctx.lineTo(0, h * 0.3);    // draw to center indent
ctx.lineTo(-w / 2, h / 2); // draw to left wing tip
ctx.closePath();            // connect back to moveTo point — completes the diamond shape
ctx.fill();                 // fill the enclosed path with fillStyle
ctx.restore();              // undo translate — next draw call starts from (0,0) again

// createRadialGradient(x0,y0,r0, x1,y1,r1) — gradient from inner circle to outer circle
const g = ctx.createRadialGradient(b.x, b.y, 0, b.x, b.y, 5);
g.addColorStop(0,   '#fff');    // at center (radius 0): white
g.addColorStop(0.4, SHIP_CHARS[activeChar].bullet); // at 40% radius: ship's bullet color
g.addColorStop(1,   'transparent');  // at edge (radius 5): fully transparent
ctx.fillStyle = g;              // use gradient as the fill color
ctx.beginPath();
ctx.arc(b.x, b.y, 5, 0, Math.PI * 2); // arc(x, y, radius, startAngle, endAngle) — full circle
ctx.fill();

5.3 GameEnv Configuration

The level constructor is the engine's single configuration hook. Reading dimensions from gameEnv instead of hardcoding them makes the game adapt to any canvas size. this.classes tells the engine which base objects to instantiate on startup.

// constructor(gameEnv) — called by the engine with the live engine context as the argument
constructor(gameEnv) {
  let width  = gameEnv.innerWidth;   // canvas width set by the engine at init time
  let height = gameEnv.innerHeight;  // canvas height — using these instead of constants enables resize
  let path   = gameEnv.path;         // base URL for asset file paths

  const image_data_space = {
    id: 'VoidStriker-Background', src: '',
    pixels: { height: 570, width: 1025 } // native resolution — engine uses this for scaling math
  };

  // this.classes: array of { class, data } objects
  // engine iterates this array and calls 'new class(data, gameEnv)' for each entry
  this.classes = [
    { class: GameEnvBackground, data: image_data_space }, // creates one background instance
  ];
  // setTimeout defers VoidStrikerGame.init until the engine has finished setting up its own canvas
  setTimeout(() => VoidStrikerGame.init(gameEnv), 200); // 200ms delay = async hand-off
}

5.4 API Integration — Leaderboard (POST / GET) (planned feature)

A REST API uses HTTP verbs: POST sends data to the server; GET retrieves data. async/await lets the game loop keep running while a network request is in flight. if (!response.ok) is required because the Fetch API only throws on network failure — 4xx/5xx errors silently return a response object without throwing.

// async function — returns a Promise; 'await' inside pauses this function only, not the game loop
async function postScore(playerName, kills, wave) {
  try {
    // fetch() starts the HTTP request; 'await' waits for the Response object
    const response = await fetch('/api/leaderboard', {
      method:  'POST',                                   // HTTP verb: create a new score record
      headers: { 'Content-Type': 'application/json' },  // tell the server the body is JSON
      body:    JSON.stringify({ player: playerName, kills, wave }), // serialize object to JSON string
    });
    // response.ok is true for 200-299 status codes only — must check manually for 4xx/5xx
    if (!response.ok) throw new Error(`HTTP ${response.status}`); // throw converts to a catch-able error
    const data = await response.json(); // parse the JSON response body into a plain JS object
    console.log('Score saved:', data);
  } catch (err) {
    // catch runs for: network failure, CORS block, thrown !response.ok, or malformed JSON
    console.error('Leaderboard POST failed:', err.message);
  }
}

// async GET — retrieves the top scores to display on the dead screen
async function fetchLeaderboard() {
  try {
    const res   = await fetch('/api/leaderboard'); // GET is the default method
    const data  = await res.json();  // res.json() = JSON.parse(await res.text()) internally
    return data.scores;              // data.scores is the array from the server's JSON response
  } catch (err) {
    console.error('Leaderboard GET failed:', err.message);
    return []; // return empty array so the UI renders cleanly even when the server is unreachable
  }
}

5.5 Asynchronous I/O

Asynchronous code runs outside the current execution frame — it schedules work to happen later without blocking. setTimeout delays a function call. A CustomEvent is a named browser event you dispatch yourself; any code that calls addEventListener for that name will receive it, with no direct reference between sender and receiver.

// setTimeout(fn, ms): schedules fn to run after ms milliseconds, then returns immediately
// Without this, VoidStrikerGame.init would run before the engine finished creating its canvas
setTimeout(() => VoidStrikerGame.init(gameEnv), 200);
// '() => VoidStrikerGame.init(gameEnv)' is an arrow function — a concise function expression

// CustomEvent: dispatch a named event with a data payload ('detail')
// Called from inside the game loop each time an enemy dies
window.dispatchEvent(new CustomEvent('vs-kills', {
  detail: { total: totalKills }  // 'detail' is the payload object — accessible on the event in listeners
}));

// This notebook's listener — registered once at page load; fires every time vs-kills is dispatched
// The game loop doesn't know this listener exists — clean decoupling between game and notebook
window.addEventListener('vs-kills', function(e) {
  const total = e.detail && e.detail.total; // e.detail is the payload passed above
  if (total >= 15 && unlocked < 1) { unlocked = 1; unlock(1); } // unlock first section at 15 kills
});

5.6 JSON Parsing

JSON (JavaScript Object Notation) is the standard text format for API data. Its syntax is identical to JS object literals — the same dot notation accesses properties in both. res.json() parses the response body text into a plain JS object you can access with dot notation.

// Boss palettes as JSON-structured config — same shape as a parsed API response
const BOSS_PALETTES = [
  { glow: '255,40,80', bodyHi: '#ff7799', bodyLo: '#660022',
    tentacle: '#aa1144', eye: '#ffee44' },
];
// Accessing via dot notation — identical syntax whether local object or parsed JSON
const { glow, bodyHi, bodyLo } = boss.palette; // destructure: pull three properties into variables
fill.style.background = `linear-gradient(90deg, rgba(${glow},1), ${bodyHi})`;

// res.json() internally calls JSON.parse() on the response body text
const data   = await res.json();  // 'data' is now a plain JS object — access with dot notation
const scores = data.scores;       // scores array from the server's { "scores": [...] } response

// CustomEvent detail must be JSON-serializable — plain objects and primitives only
window.dispatchEvent(new CustomEvent('vs-kills', { detail: { total: totalKills } }));
const total = e.detail.total; // read back with identical dot notation on the receiver side

Code Runner Challenge

Simulate the WASD input system from Void Striker — no browser events needed.

View IPYNB Source

%%js

// CODE_RUNNER: Simulate the WASD input system from Void Striker — no browser events needed.

const keys = {};   // plain object used as a dictionary: keys[keyName] = true/false
const ship  = { x: 512, y: 430, speed: 4.5 }; // object literal: all ship state in one record
const W = 1025, H = 570; // canvas dimensions (constants — these don't change)

// updateShip() reads 'keys' and moves the ship — called once per simulated frame
function updateShip() {
  // '||' (OR): accept lowercase and uppercase so the game works regardless of Caps Lock
  if (keys['a'] || keys['A']) ship.x -= ship.speed; // '-=' subtracts: moves left
  if (keys['d'] || keys['D']) ship.x += ship.speed; // '+=' adds: moves right
  if (keys['w'] || keys['W']) ship.y -= ship.speed; // '-=' on y: moves up (canvas y grows downward)
  if (keys['s'] || keys['S']) ship.y += ship.speed; // '+=' on y: moves down
  // Math.max and Math.min clamp position to the canvas boundaries
  ship.x = Math.max(0, Math.min(W, ship.x)); // ship.x stays in [0, W]
  ship.y = Math.max(0, Math.min(H, ship.y)); // ship.y stays in [0, H]
}

// Simulate 5 frames holding D (right) + W (up) simultaneously
keys['d'] = true; keys['w'] = true; // mark both keys as held
for (let f = 1; f <= 5; f++) {
  updateShip(); // apply movement for this frame
  console.log(`Frame ${f}: ship at (${ship.x.toFixed(1)}, ${ship.y.toFixed(1)})`);
}
// Try: change to keys['s'] + keys['a'] (down-left), or increase ship.speed to 10

Python Java JavaScript 14px 16px 18px 20px

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

6 — Documentation

6.1 Code Comments — WHY, Not What

A good comment explains why something works the way it does — the non-obvious constraint or trade-off that would cause a bug if removed. Comments that just restate what the code does ("subtract gravity") add no value; comments that explain a sign flip, a backwards loop, or a speed nerf save the next reader from breaking it accidentally.

// While the Boss Alien is alive, all other moving objects tick at this fraction
// of their normal speed. Restored to 1 the instant the boss dies.
// WHY: creates a dramatic slow-motion effect during boss encounters
let worldSpeed = 1;

// While the Boss Alien is alive the player's spread is nerfed to 2 bullets (no center shot)
// WHY: the boss is supposed to be the hardest encounter — fewer bullets increases difficulty
const shots = boss ? [/* 2 shots */] : [/* 3 shots */];

// verticalVelocity is positive = up; gravityAcceleration is subtracted each frame.
// WHY: seed slight upward velocity so asteroids start slow and accelerate into a fall
verticalVelocity: rand(0.2, 0.8),

// Iterate backwards so splicing inside the loop doesn't skip the next element.
// WHY: forward splice shifts remaining elements left, causing every-other element to be skipped
// A backwards pass removes from the end — earlier indices are never affected
for (let bi = bullets.length - 1; bi >= 0; bi--) { ... }

6.2 Mini-Lesson Documentation

This notebook is the mini-lesson: an embedded, playable game demo gated behind a 15-kill unlock, with every CS 111 objective mapped to an annotated code snippet. It lives at /voidstriker/cs111. A companion page at /voidstriker documents the same codebase from a game-design angle — the two pages cover identical code from different perspectives.

6.3 Code Highlights — Reference Table

Cross-reference: each CS 111 category mapped to the exact location in GameLevelVoidStriker.js for direct navigation.

Location	Lines (approx)	CS 111 Category
class GameLevelVoidStriker	3–22	OOP — Writing Classes
spawnExplosion(x, y, color)	891–904	OOP — Functions with Parameters
spawnBoss()	624–649	OOP — Instantiation, Functions
updateBoss()	651–663	OOP — Functions; Math operators
spawnWave() for-loop	716–759	Iteration, Arrays, Objects
updateEnemies() chaser branch	761–791	Conditionals, Boolean Expressions
updateEnemies() gravity block	793–807	Mathematical Operators, Numbers
checkCollisions()	929–1024	Nested Conditions, Booleans, Arrays
attachInput()	1237–1259	Keyboard Input, Boolean Expressions
drawShip() / drawBullets()	523–618	Canvas Rendering, Strings

Code Runner Challenge

Why does this loop run backwards? Add a WHY comment, then flip it to forward and observe the bug.

View IPYNB Source

%%js

// CODE_RUNNER: Why does this loop run backwards? Add a WHY comment, then flip it to forward and observe the bug.

const bullets = [
  { id: 1, life: 5 },
  { id: 2, life: 0 },  // expired — should be removed
  { id: 3, life: 3 },
  { id: 4, life: 0 },  // expired — should be removed
  { id: 5, life: 8 },
];

// WHY backwards: splice(i, 1) removes the element at index i and shifts all later elements left.
// If we go forward (i=0,1,2...) and remove index 1, the old index 2 becomes index 1 — we skip it.
// Going backwards means we only modify indices we've already passed — no elements are skipped.
for (let i = bullets.length - 1; i >= 0; i--) { // i starts at last index; i-- counts down
  if (bullets[i].life <= 0) {
    // splice(startIndex, deleteCount): removes deleteCount elements starting at startIndex
    console.log(`Removing bullet id=${bullets[i].id} at index ${i}`);
    bullets.splice(i, 1); // removes exactly the expired bullet at index i
  }
}

// .map(b => b.id) transforms each bullet object into just its id number
console.log(`Remaining bullet ids: ${bullets.map(b => b.id).join(', ')}`);
// Hint: change to (let i = 0; i < bullets.length; i++) and see which bullets survive

Python Java JavaScript 14px 16px 18px 20px

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

7 — Debugging

7.1 Console Debugging

Console logging traces execution by printing values at key moments — game start, boss spawn, kill events. Never log inside the animation loop (loop() runs 60×/sec and will flood the console in seconds); place logs at one-time state transitions instead.

// Log once at game start — confirm all variables were reset correctly
function startGame() {
  // console.log() prints to the browser DevTools console (F12 → Console tab)
  console.log('[VS] Game started — wave=1, lives=3, totalKills=0');
}

// Log at boss spawn — confirm tier/hp/speed calculated correctly; runs once per boss
function spawnBoss() {
  // Template literal embeds live values; .toFixed(2) rounds the float to 2 decimal places for readability
  console.log(`[VS] Boss spawned — tier ${tier}, hp ${hp}, speed ${boss.speed.toFixed(2)}`);
}

// Temporary per-kill log in checkCollisions() — add while debugging, remove when confirmed
// e.x / e.y = the enemy's position; totalKills = running total; enemies.length = survivors
console.log(`[VS] Kill at (${e.x.toFixed(0)},${e.y.toFixed(0)}), total=${totalKills}, remaining=${enemies.length}`);

7.2 Hit Box Visualization

Hit box visualization draws the invisible collision geometry as colored circles, revealing whether the hit zone matches the sprite. The same radius values used in the collision math are reused here — if they diverge, the visualization is wrong too.

// Add this function and call it at the end of loop() while debugging — remove before shipping
function drawHitBoxes() {
  ctx.save();  // snapshot current drawing state so our debug strokes don't affect game rendering

  ctx.strokeStyle = 'rgba(0,255,0,0.7)'; // green for player and enemies
  ctx.lineWidth = 1;

  // Ship hit radius: 20px — same constant used in checkCollisions() for player damage detection
  ctx.beginPath();
  ctx.arc(ship.x, ship.y, 20, 0, Math.PI * 2); // arc(x, y, radius, 0, 2π) = full circle
  ctx.stroke(); // stroke() draws the outline path (does not fill)

  // Enemy radii: e.r is the same value used in Math.sqrt(dx*dx + dy*dy) < e.r + 20
  enemies.forEach(e => {
    ctx.beginPath();
    ctx.arc(e.x, e.y, e.r, 0, Math.PI * 2);
    ctx.stroke();
  });

  // Boss: drawn in red to stand out from enemy circles
  if (boss) {
    ctx.strokeStyle = 'rgba(255,60,0,0.7)'; // red for boss
    ctx.beginPath();
    ctx.arc(boss.x, boss.y, boss.r, 0, Math.PI * 2);
    ctx.stroke();
  }
  ctx.restore(); // restore saved state — next draw call is unaffected
}

7.3 Source-Level Debugging (DevTools Breakpoints)

A breakpoint pauses execution at a specific line so you can inspect every live variable at that exact moment. This is more precise than console logs because you step through code one line at a time and watch values change in real time.

1. Open DevTools → Sources tab
2. Navigate to assets/js/projects/voidstriker/levels/GameLevelVoidStriker.js
3. Click the line number next to const angle = Math.atan2(dy, dx); inside updateBoss()
4. Move the ship close to the boss — execution pauses on that line
5. Inspect boss, ship, dx, dy, and angle in the Scope panel on the right
6. Press F10 (step over) to advance one line at a time and watch boss.x / boss.y update

7.4 Network Debugging (Fetch / CORS)

The Network tab records every HTTP request. CORS (Cross-Origin Resource Sharing) errors appear as blocked requests with a missing Access-Control-Allow-Origin header — the fix is always on the server, not in the JavaScript.

1. Open DevTools → Network tab → filter by Fetch/XHR
2. Trigger a game-over to fire postScore()
3. Headers tab: confirm POST to /api/leaderboard, Content-Type: application/json
4. Payload tab: confirm JSON body contains player, kills, wave
5. Response tab: confirm {"ok": true} or read the server error message
6. CORS error? Access-Control-Allow-Origin is missing from response headers — add it server-side

7.5 Application Debugging (Session & Storage)

The Application tab exposes cookies, localStorage, and sessionStorage. A 401 Unauthorized error from the leaderboard API usually means the session cookie is expired, missing, or blocked by a SameSite attribute on cross-origin requests.

1. Open DevTools → Application tab
2. Under Cookies: confirm the session token exists after logging in
3. Check Expires: an expired cookie silently fails all authenticated requests
4. Check SameSite: Strict blocks cookies on cross-origin fetch; use Lax or None for API calls to a separate domain
5. Under Local Storage: confirm bestKills or saved player name was written correctly after game-over

7.6 Element Inspection (Canvas & DOM)

The Element Inspector shows the live DOM tree. Because Void Striker creates its canvas and HUD elements dynamically at runtime, this is the only way to confirm they were appended to the right parent with the correct CSS.

1. Right-click the game canvas → Inspect Element
2. Confirm id="voidstriker-canvas", position: absolute, z-index: 9999 in computed styles
3. Select #vs-score — its textContent should update live as you kill enemies
4. Select #vs-boss-fill — its width style should animate from 100% to 0% as the boss takes damage
5. Canvas invisible? Check that container.style.position is relative — the engine sets this; without it the absolute-positioned canvas escapes its parent

Code Runner Challenge

Debug the chaser enemy AI from Void Striker — add logs to verify it closes distance each frame.

View IPYNB Source

%%js

// CODE_RUNNER: Debug the chaser enemy AI from Void Striker — add logs to verify it closes distance each frame.

const ship  = { x: 400, y: 430 };                    // target position
const enemy = { x: 200, y: 80, speed: 1.5, chaseAcc: 0 }; // chaser starting far away

for (let frame = 1; frame <= 8; frame++) {
  const dx = ship.x - enemy.x;   // horizontal distance from enemy to ship (positive = ship is right)
  const dy = ship.y - enemy.y;   // vertical distance from enemy to ship (positive = ship is below)
  // Math.hypot(dx, dy) = sqrt(dx²+dy²) — straight-line distance between enemy and ship
  const dist = Math.hypot(dx, dy) || 1; // || 1 prevents divide-by-zero if they're at the same point
  // chaseAcc gradually increases up to enemy.speed — creates an acceleration effect from rest
  enemy.chaseAcc = Math.min(enemy.speed, enemy.chaseAcc + 0.0006);
  const spd = enemy.speed + enemy.chaseAcc;
  // Normalize direction (dx/dist, dy/dist) gives a unit vector pointing toward the ship
  // Multiply by spd to get the actual pixel movement this frame
  enemy.x += (dx / dist) * spd; // move along x toward ship
  enemy.y += (dy / dist) * spd; // move along y toward ship

  // .toFixed(1) rounds floats for cleaner output — helps you spot unexpected values
  console.log(`Frame ${frame}: pos=(${enemy.x.toFixed(1)}, ${enemy.y.toFixed(1)})  dist=${dist.toFixed(1)}  spd=${spd.toFixed(3)}`);
}
// Try: add Math.atan2(dy, dx).toFixed(2) to confirm the angle always points toward the ship

Python Java JavaScript 14px 16px 18px 20px

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

8 — Testing & Verification

8.1 Gameplay Testing Checklist

Gameplay testing verifies that the game behaves correctly as a player — not just that it compiles. Each item below tests one specific mechanic end-to-end; all should pass before submission.

• ☐ Enemies spawn on wave 1; drifters fall and bounce, chasers turn toward the ship
• ☐ Arrow keys fire in the correct direction; diagonal combos (Up+Right) produce diagonal shots
• ☐ Boss spawns on wave 3 — health bar appears and worldSpeed visibly slows other enemies
• ☐ Killing the boss: bar hides, speed restores, kill count jumps by 5
• ☐ Asteroids accelerate as they fall (gravity) and spin; they bounce off side walls
• ☐ Three lives: each hit subtracts one and triggers an invincibility flash (~1.5 s)
• ☐ "SHIP DESTROYED" screen appears after 3 hits; Retry resets wave, lives, and kills to 1/3/0
• ☐ P key opens ship-select overlay; picking a character changes color and speed immediately
• ☐ Background button cycles Nebula → Deep Space → Supernova; dust color changes in Supernova

8.2 Integration Testing (API) (planned feature)

Integration testing checks that two separate systems (the game and the leaderboard server) work correctly together. Each item requires a live server and tests both the success path and the failure path.

• ☐ POST: game-over triggers postScore(); Network tab shows 200 OK with expected JSON body
• ☐ GET: dead screen fetches and renders top scores from /api/leaderboard without crashing
• ☐ Auth: JWT or session cookie is present in Request Headers for authenticated fetch calls
• ☐ vs-kills CustomEvent fires with correct detail.total on every kill — verify in console
• ☐ Error path: with server stopped, postScore() falls into catch and shows a non-fatal notice instead of crashing

8.3 API Error Handling (planned feature)

A try/catch block wraps async code so any failure (network loss, CORS block, bad JSON, or server error) is caught in one place. if (!response.ok) converts HTTP error status codes into thrown errors — without it, a 404 silently looks like success. The game must keep running when the backend is unreachable.

// async function: returns a Promise so the caller can await it or chain .then()
async function postScore(playerName, kills, wave) {
  try {
    // await pauses this function until fetch() resolves; the browser and game loop keep running
    const response = await fetch('/api/leaderboard', {
      method:  'POST',
      headers: { 'Content-Type': 'application/json' }, // required for server to parse the body as JSON
      body:    JSON.stringify({ player: playerName, kills, wave }), // JSON.stringify: object → string
    });
    // Fetch only throws on network failure — manually convert 4xx/5xx to a thrown error
    // Without this: a 404 "Not Found" reaches the console.log below as if it succeeded
    if (!response.ok) throw new Error(`Server error: ${response.status}`);
    // await response.json(): parses the response body text into a JS object
    return await response.json();
  } catch (err) {
    // One catch handles all failure types: network error, CORS block, 4xx/5xx, malformed JSON
    console.error('Leaderboard unavailable:', err.message);
    // showGameNotice(): displays a non-fatal overlay so the player knows the score wasn't saved
    showGameNotice('Score not saved (offline)'); // game keeps running — failure is graceful
  }
}

Code Runner Challenge

Run the Void Striker collision test suite — add your own edge-case tests at the bottom.

View IPYNB Source

%%js

// CODE_RUNNER: Run the Void Striker collision test suite — add your own edge-case tests at the bottom.

// circleCollide(ax, ay, ar, bx, by, br): returns true if two circles overlap
// Uses the Pythagorean theorem: distance < sum of radii = collision
function circleCollide(ax, ay, ar, bx, by, br) {
  // Math.sqrt(dx² + dy²) = straight-line distance between centers
  return Math.sqrt((ax - bx) ** 2 + (ay - by) ** 2) < ar + br;
  // '**' is the exponentiation operator: (ax-bx)**2 = (ax-bx) squared
}

const ship = { x: 500, y: 400, r: 20 }; // ship position and collision radius

// Array of test cases — each object is one test: inputs + expected output
const tests = [
  { label: 'Direct hit (enemy)',    ex: 510, ey: 410, er: 18, expect: true  }, // overlapping circles
  { label: 'Clean miss',            ex: 560, ey: 400, er: 18, expect: false }, // far apart
  { label: 'Boss overlap',          ex: 500, ey: 360, er: 40, expect: true  }, // large boss radius
  { label: 'Exact boundary (miss)', ex: 538, ey: 400, er: 18, expect: false }, // just outside
  // Add your own: { label: '...', ex: ..., ey: ..., er: ..., expect: true/false },
];

let passed = 0;
// forEach iterates each test object; 't' is the current test
tests.forEach(t => {
  const got = circleCollide(ship.x, ship.y, ship.r, t.ex, t.ey, t.er); // run the function
  const ok  = got === t.expect; // '===' strict equality: type AND value must match
  if (ok) passed++;
  // '\u2713' = ✓ (checkmark); '\u2717' = ✗ (cross) — Unicode escape for special characters
  console.log(`${ok ? '\u2713' : '\u2717'} ${t.label}: ${ok ? 'PASS' : 'FAIL — got ' + got + ', expected ' + t.expect}`);
});
console.log('\n' + passed + '/' + tests.length + ' tests passed');

Python Java JavaScript 14px 16px 18px 20px

Lines: 1 Characters: 0

Output

Click "Run" in code control panel to see output ...

Grading Scale

A (90–100%): Demonstrates mastery of objectives with creative implementation
B (80–89%): Meets all CS 111 required objectives with solid understanding

Project Checklist

✅ 2+ custom classes — GameLevelVoidStriker (level class) + composed GameEnvBackground (engine base class)
✅ 5+ functions with parameters — spawnExplosion(x,y,color), fireDirected(sx,sy), selectChar(idx), spawnBoss(), updateBoss(), checkCollisions(); method: VoidStrikerGame.init(gameEnv)
✅ GameLevel configuration via Object Literals — image_data_space, SHIP_CHARS, BOSS_PALETTES, this.classes
✅ Code comments explaining WHY — worldSpeed invariant, gravity sign flip, backwards iteration, boss spread nerf
✅ API Integration — async postScore() and fetchLeaderboard() with try/catch, response.ok check, and JSON parse
✅ Debugging — Console, Hit Box visualization, Source-Level breakpoints, Network tab, Application/cookies, Element inspection
✅ Mini-lesson documentation — embedded runtime demo at /voidstriker/cs111 with unlock-gated CS 111 alignment
✅ Code highlights — all 8 categories covered with annotated snippets and a file/line reference table
✅ Complete, playable level — Boss Alien, gravity asteroids, 4 ship skins, 3 background scenes, wave progression, character swap