CS 111 Summary
CS 111 Summary — every learning objective with project evidence.
Writing Classes ▶
Evidence Build at least two custom character classes that extend engine base classes.
Assessment Code review across Player.js, NPC.js, Enemy.js.
How met Gem extends Coin in Gem.js and Guard extends Enemy in Guard.js — two fully custom character classes layered on top of the engine's base classes.
Methods & Parameters ▶
Evidence Methods that take meaningful parameters (e.g. collisionHandler(other, direction)).
Assessment Code review for method signatures with 2+ parameters.
How met handleCollisionEvent() in Guard.js; draw(), collect(), update() in Gem.js each carry scoped logic; level constructors accept (gameEnv) as a parameter.
Instantiation & Objects ▶
Evidence Instantiate game objects through the GameLevel configuration.
Assessment Code review of GameLevel setup objects.
How met this.classes = [...] in HeistL1.js, HeistL2.js, and HeistL3.js instantiates Player, Gem, Barrier, and Guard objects with config data.
Inheritance ▶
Evidence Class hierarchy at least 2 levels deep (e.g. GameObject → Character → Player).
Assessment Code review of the extends keyword and chain.
How met Gem extends Coin and Guard extends Enemy both build on engine base classes, creating a 2+ level hierarchy (e.g. GameObject → Enemy → Guard).
Method Overriding ▶
Evidence Override parent methods such as update(), draw(), handleCollision().
Assessment Code review for polymorphic implementations.
How met Guard.js overrides update(), stayWithinCanvas(), and handleCollisionEvent(). Gem.js overrides draw(), collect(), and update().
Constructor Chaining ▶
Evidence Use super() to chain parent constructors.
Assessment Code review for super(data, gameEnv) calls.
How met Gem.js calls super(gemData, gameEnv) after merging a data object. Guard.js calls super(data, gameEnv) then sets this.velocity.y = -3.
Iteration ▶
Evidence Loops for iterating over game object arrays and animation frames.
Assessment Code review for for, forEach, while.
How met heistMusic.js uses .filter() across API track results (tracks.filter(...), candidates.filter(...)). Level files iterate this.classes every frame.
Conditionals ▶
Evidence Collision detection and state transitions driven by conditions.
Assessment Code review for if/else and nested conditions.
How met Guard.js: if (!this.playerDestroyed && this.collisionChecks()). Gem.js: if (this.permanentlyCollected) return. heistMusic.js: if (!this.started) / else if (this.isPlaying).
Nested Conditions ▶
Evidence Multi-layer game logic (e.g. power-up + collision + direction).
Assessment Code review for multi-level conditionals.
How met Guard.js stayWithinCanvas() has four nested boundary checks with velocity reversal. heistMusic.js toggleMusic() has nested if / else if / else for play state.
Numbers ▶
Evidence Numeric properties for position, velocity, score tracking.
Assessment Code review for numeric values.
How met velocity.y = -3, value: 5, SCALE_FACTOR: 10, STEP_FACTOR: 1000, volume = 0.3, and canvas math like width * 0.1406 across the level files.
Strings ▶
Evidence Character names, sprite paths, and game state labels.
Assessment Code review for string handling.
How met id: 'gem', name: 'mainplayer', src: path + "/images/projects/heist-exe/heist-mc.png", plus iTunes query strings in heistMusic.js.
Booleans ▶
Evidence State flags like isJumping, isPaused, isVulnerable.
Assessment Code review for boolean logic.
How met permanentlyCollected: false, isHostile: true (Guard), this.started, this.isPlaying, and this.userActivated all used as runtime state flags in Gem.js and heistMusic.js.
Arrays ▶
Evidence Collections of game objects and level data.
Assessment Code review for array operations.
How met this.classes = [...] in all three level files. queries, candidates, and pool arrays in heistMusic.js drive track selection.
JSON Objects ▶
Evidence Configuration objects with sprite data.
Assessment Code review for object literals.
How met Sprite config objects like sprite_data_mc, gem_data_1, and border_top are JSON objects with nested properties such as hitbox: { widthPercentage: 0.45 }.
Mathematical Operators ▶
Evidence Physics calculations — gravity, velocity, collision math.
Assessment Code review for + - * / in physics code.
How met this.position.y += this.velocity.y, this.velocity.y *= -1 (bounce), Math.min(canvas.width, canvas.height) / 3, width * 0.55 for proportional positioning.
String Operations ▶
Evidence Path concatenation and dynamic text display.
Assessment Code review for template literals and concatenation.
How met path + "/images/projects/heist-exe/gem.png" (concatenation) and `Gem collected! +${this.value} | Total: ${this.gameEnv?.stats?.coinsCollected}` (template literal) in Gem.js.
Boolean Expressions ▶
Evidence Compound conditions in game logic.
Assessment Code review for &&, ||, !.
How met !this.playerDestroyed && this.collisionChecks() in Guard.js; !VOCAL_HINTS.test(name) and candidates.length > 0 ? candidates : pool in heistMusic.js.
Keyboard Input ▶
Evidence Arrow / WASD / space controls via event listeners.
Assessment Manual testing for key handlers.
How met keypress: { up: 87, left: 65, down: 83, right: 68 } — WASD bindings defined in sprite_data_mc across all three level files.
Canvas Rendering ▶
Evidence Draw sprites, backgrounds, platforms with the Canvas API.
Assessment Code review of draw() implementations.
How met Gem.js draw() uses ctx.clearRect(), ctx.drawImage(), and a fallback ctx.beginPath() / ctx.arc() / ctx.fill() for rendering.
GameEnv Configuration ▶
Evidence Set canvas size, difficulty, and game settings.
Assessment Code review of GameEnv.create() and GameSetup.js.
How met Every level reads gameEnv.innerWidth, gameEnv.innerHeight, and gameEnv.path to drive proportional layout and asset loading.
API Integration ▶
Evidence Implement a Leaderboard API (POST/GET scores).
Assessment Code review for fetch calls with error handling.
How met heistMusic.js calls fetch(this.endpoint) against the iTunes Search API, checks response.ok, and parses the returned track list.
Asynchronous I/O ▶
Evidence Use async/await or Promises for API calls.
Assessment Code review for async/await or .then() chains.
How met async fetchPreviewUrl(), async startMusic(), and async toggleMusic() use await fetch(), await response.json(), and await this.audio.play() in heistMusic.js.
JSON Parsing ▶
Evidence Parse API responses and destructure data.
Assessment Code review for JSON.parse() and object destructuring.
How met const data = await response.json() followed by data.results access to extract track objects from the iTunes API response in heistMusic.js.
Code Comments ▶
Evidence JSDoc-style comments on classes and methods.
Assessment Code review — comment density above 10%.
How met Guard.js has JSDoc block comments on update() and stayWithinCanvas(). Gem.js and heistMusic.js include inline explanatory comments throughout.
Mini-Lesson Documentation ▶
Evidence Create a visual mini-lesson post with an embedded runtime game demo.
Assessment Portfolio review of the mini-lesson.
How met notebook_src.ipynb embeds the live game via GAME_RUNNER with all three HeistL levels loaded.
Code Highlights ▶
Evidence Annotate key code snippets in documentation (OOP, APIs, collision).
Assessment Portfolio review of highlighted examples.
How met Collision logic in Guard.js and gem collection in Gem.js serve as annotated highlights; heistMusic.js API flow is documented inline.
Console Debugging ▶
Evidence Use console.log to track state, variables, and method calls.
Assessment Code review for strategic logging in update/collision methods.
How met Gem.js logs on creation and collection. Guard.js logs velocity on bounce and collision. heistMusic.js logs track name, playback start/stop, and console.warns on failure.
Hit Box Visualization ▶
Evidence Draw collision boundaries to refine detection.
Assessment Demo with hit box display toggled on.
How met All Barrier objects in HeistL1/L3 use color: 'rgba(0, 255, 136, 0.5)' with visible: true to render semi-transparent green collision zones over walls and borders.
Source-Level Debugging ▶
Evidence Use DevTools Sources tab — breakpoints, step through execution.
Assessment Demo of pause + inspect flow.
How met Guard.js and Gem.js contain strategic console.log calls at key execution points (collision, velocity flip) that double as breakpoint targets.
Network Debugging ▶
Evidence Inspect the Network tab for API calls, CORS errors, response codes.
Assessment Demo of fetch inspection.
How met heistMusic.js checks if (!response.ok) and throws a descriptive error; console.warn surfaces fetch failures clearly in the Network tab.
Application Debugging ▶
Evidence Inspect cookies, localStorage, session state in the Application tab.
Assessment Demo of stored-data inspection.
How met Game state tracked via gameEnv.stats.coinsCollected and boolean flags (permanentlyCollected, isPlaying) all inspectable at runtime.
Element Inspection ▶
Evidence Use the Elements tab to inspect canvas, DOM, and styles.
Assessment Demo of element property inspection.
How met heistMusic.js dynamically appends a styled toggle button to document.body; Gem canvas visibility toggled via canvas.style.display = 'none' on collection.
Gameplay Testing ▶
Evidence Test level completion, character interactions, and collisions.
Assessment Live demo through the level.
How met Three playable levels (HeistL1–3) with progressive difficulty: no guards in L1, two bouncing guards in L2, gravity-enabled platformer in L3.
Integration Testing ▶
Evidence Test API integration (Leaderboard, NPC AI) against a live backend.
Assessment Demo of successful API round-trip.
How met heistMusic.js fetches live track data from the iTunes Search API and plays a 30-second preview — confirming end-to-end API integration.
API Error Handling ▶
Evidence try/catch blocks and graceful network error handling.
Assessment Code review of error paths.
How met heistMusic.js wraps startMusic() in try/catch, checks response.ok before parsing, throws descriptive errors, and falls back gracefully with console.warn.