CS111 Reflection
A reflection on how I met all the requirements for CS111
CS 111 Course Alignment Rubric
Required Evidence for College Credit
Students must demonstrate competency in all CS 111 learning objectives through their game project. Below is the alignment between CS 111 requirements and project deliverables.
| Learning Objective | Project Evidence Required | Assessment Method |
|---|---|---|
| Object-Oriented Programming | ||
| Writing Classes | Create minimum 2 custom character classes extending base classes | Code review: Player.js, NPC.js, Enemy.js, |
| Methods & Parameters | Implement methods with parameters (e.g., collisionHandler(other, direction)) |
Code review: Method signatures with 2+ parameters |
| Instantiation & Objects | Instantiate game objects in GameLevel configuration | Code review: GameLevel setup objects |
| Inheritance (Basic) | Create class hierarchy with 2+ levels (e.g., GameObject → Character → Player) | Code review: extends keyword, inheritance chain |
| Method Overriding | Override parent methods (update(), draw(), handleCollision()) |
Code review: Polymorphic implementations |
| Constructor Chaining | Use super() to chain constructors |
Code review: super(data, gameEnv) calls |
| Control Structures | ||
| Iteration | Use loops for game object arrays, animation frames | Code review: for, forEach, while loops |
| Conditionals | Implement collision detection, state transitions | Code review: if/else, nested conditions |
| Nested Conditions | Complex game logic (e.g., power-up + collision + direction) | Code review: Multi-level conditionals |
| Data Types | ||
| Numbers | Position, velocity, score tracking | Code review: Numeric properties |
| Strings | Character names, sprite paths, game states | Code review: String manipulation |
| Booleans | Flags (isJumping, isPaused, isVulnerable) | Code review: Boolean logic |
| Arrays | Game object collections, level data | Code review: Array operations |
| Objects (JSON) | Configuration objects, sprite data | Code review: Object literals |
| Operators | ||
| Mathematical | Physics calculations (gravity, velocity, collision) | Code review: +, -, *, / in physics |
| String Operations | Path concatenation, text display | Code review: Template literals, concatenation |
| Boolean Expressions | Compound conditions in game logic | Code review: &&, ||, ! |
| Input/Output | ||
| Keyboard Input | Arrow keys, space, WASD controls using event listeners | Testing: Key event handlers respond correctly |
| Canvas Rendering | Draw sprites, backgrounds, platforms using Canvas API | Code review: draw() method implementations |
| GameEnv Configuration | Set canvas size, difficulty levels, game settings | Code review: GameEnv.create() and GameSetup.js |
| API Integration | Implement Leaderboard API (POST/GET scores) | Code review: Fetch calls with error handling |
| Asynchronous I/O | Use async/await or promises for API calls | Code review: async/await or .then() chains |
| JSON Parsing | Parse API responses (leaderboard data, AI responses) | Code review: JSON.parse(), object destructuring |
| Documentation | ||
| Code Comments | JSDoc comments for classes and methods | Code review: Comment density >10% |
| Mini-Lesson Documentation | Create comic/visual post with embedded runtime game demo | Portfolio review: Mini-lesson in personal portfolio |
| Code Highlights | Annotate key code snippets in documentation (OOP, APIs, collision) | Portfolio review: Highlighted code examples with explanations |
| Debugging | ||
| Console Debugging | Use console.log to track game state, variables, method calls | Code review: Strategic logging in update/collision methods |
| Hit Box Visualization | Draw/visualize collision boundaries to refine detection | Demo: Toggle hit box display, adjust collision rectangles |
| Source-Level Debugging | Set breakpoints in DevTools, step through code execution | Demo: Use Sources tab to pause and inspect code flow |
| Network Debugging | Examine Network tab for API calls, CORS errors, response status | Demo: Inspect fetch requests, response data, error messages |
| Application Debugging | Examine cookies, localStorage, session data for login/state | Demo: Application tab inspection of stored data |
| Element Inspection | Use Element Viewer to inspect canvas, DOM elements, styles | Demo: Inspect element properties and game object state |
| Testing & Verification | ||
| Gameplay Testing | Test level completion, character interactions, collision detection | Live demo: Play through level without critical bugs |
| Integration Testing | Test API integration (Leaderboard, NPC AI) with live backend | Demo: Successful score saving and AI responses |
| API Error Handling | Try/catch blocks for API calls, network error handling | Code review: Error handling for fetch failures |
Grading Scale
A (90-100%): Demonstrates mastery of objectives with creative implementation B (80-89%): Meets all CS 111 required objectives with solid understanding
- ✅ 2+ custom character classes extending base classes (Character, Enemy, or NPC)
- ✅ 5+ methods with parameters and return values (override
update(),draw(),handleCollision(), etc.) - ✅ GameLevel configuration using Object Literals to instantiate game objects
- ✅ JSDoc comments on custom classes and methods (>10% comment density)
- ✅ API Integration: Leaderboard (POST/GET scores) + NPC AI interaction with error handling
- ✅ Debugging competency: Use DevTools (Console, Network, Application, Sources) to debug game logic, APIs, and login/state
- ✅ Mini-lesson documentation in personal portfolio (comic/visual style with embedded runtime demo)
- ✅ Code highlights showing OOP hierarchy, API calls, collision logic, and state management
- ✅ Complete, playable custom level tested in GameBuilder and team repository
Evidence Map: CS 111 Requirements Met
Object-Oriented Programming
| Requirement | Evidence | Code Reference |
|---|---|---|
| Writing Classes | Custom character classes extending base classes | Ghost.js L1 - extends Enemy class |
| DeathBarrier.js L1 - extends Barrier class | ||
| SpriteSheetCoin.js L1 - extends Coin class | ||
| Methods & Parameters | Functions with 2+ parameters handling game logic | Ghost.js L13 - parameters: player, distance calc |
| GameLevelOutside.js L68 - parameters: player, skinKey | ||
| DeathBarrier.js L11 - collision detection with params | ||
| Instantiation & Objects | Objects created and configured in level setup | GameLevelOutside.js L760 - object instantiation |
| GameLevelMaze.js L30 - configuration objects | ||
| Inheritance (2+ levels) | Multi-level class hierarchy demonstrated | Ghost extends Enemy (base game engine class) |
| DeathBarrier extends Barrier (base game engine class) | ||
| SpriteSheetCoin extends Coin (base game engine class) | ||
| Method Overriding | Override parent methods with custom implementations | Ghost.js L44 - overrides parent update() |
| Ghost.js L52 - custom collision handling | ||
| DeathBarrier.js L11 - overrides barrier update | ||
| Constructor Chaining | Using super() to initialize parent class | Ghost.js L2 - super(data, gameEnv) call |
| DeathBarrier.js L2 - super(data, gameEnv) call | ||
| SpriteSheetCoin.js L17 - super(data, gameEnv) call |
Control Structures
| Requirement | Evidence | Code Reference |
|---|---|---|
| Iteration (Loops) | For loops and forEach for game objects | Ghost.js L13 - distance calculation loop |
| GameLevelOutside.js L350 - Array.from and map | ||
| Conditionals (if/else) | Multiple conditional branches for game logic | Ghost.js L9 - conditional OR logic |
| Ghost.js L13 - if/else collision distance check | ||
| DeathBarrier.js L11 - multi-level conditionals | ||
| Nested Conditions | Complex decision logic with multiple conditions | DeathBarrier.js L25 - grace period + collision check |
| Ghost.js L36 - nested conditions for direction |
Data Types
| Requirement | Evidence | Code Reference |
|---|---|---|
| Numbers | Position, velocity, scale factors | Ghost.js L38 - velocity.x, velocity.y |
| GameLevelMaze.js L43 | ||
| Strings | Character names, sprite paths, dialogue | GameLevelOutside.js L44 |
| GameLevelMaze.js L49 | ||
| Booleans | State flags and conditions | Ghost.js L6 |
| DeathBarrier.js L3 | ||
| Arrays | Object collections and animation frames | GameLevelOutside.js L760 |
| GameLevelMaze.js L290 | ||
| Objects (JSON) | Configuration objects and sprite data | GameLevelOutside.js L87 |
| GameLevelMaze.js L48 |
Operators
| Requirement | Evidence | Code Reference | ||
|---|---|---|---|---|
| Mathematical Operators | Calculations for physics and positioning | Ghost.js L27 - Math.hypot(dx, dy) | ||
| Ghost.js L34 - speed calculations | ||||
| String Operations | Path concatenation and text manipulation | GameLevelOutside.js L355 | ||
| Boolean Operators | AND/OR logic for compound conditions | Ghost.js L44 - && operator | ||
| DeathBarrier.js L14 - && and | operators |
Input/Output
| Requirement | Evidence | Code Reference |
|---|---|---|
| Keyboard Input | Event listeners for WASD/arrow key controls | GameLevelOutside.js L113 - W,A,S,D keys |
| GameLevelMaze.js L71 | ||
| Canvas Rendering | Drawing sprites and game elements | SpriteSheetCoin.js L60 |
| Ghost.js | ||
| GameEnv Configuration | Canvas size and difficulty settings | GameLevelOutside.js L24 - width, height, path |
| GameLevelMaze.js L23 | ||
| API Integration | AI NPC interaction with backend | GameLevelOutside.js L135 - AiNpc.showInteraction() |
| GameLevelOutside.js L123 - Q&A data structure | ||
| Asynchronous I/O | Async/await for image loading and transitions | SpriteSheetCoin.js L29 - Image onload callback |
| GameLevelOutside.js L380 - async/await promises | ||
| JSON Parsing | Parse configuration objects and API responses | GameLevelOutside.js L123 - JSON structure |
Documentation
| Requirement | Evidence | Code Reference |
|---|---|---|
| JSDoc Comments | Comprehensive function and class documentation | GameLevelOutside.js L1 |
| SpriteSheetCoin.js L1 | ||
| Code Comments | Strategic inline comments explaining logic | DeathBarrier.js L26 - debug comments |
| Ghost.js L52 - logic explanation |
Debugging
| Requirement | Evidence | Code Reference |
|---|---|---|
| Console Debugging | Strategic console.log for state tracking | DeathBarrier.js L30 |
| Ghost.js L9 | ||
| Error Handling | Try/catch blocks for robustness | GameLevelMaze.js L172 - try/catch |
| GameLevelOutside.js L360 - error handling |
Testing & Verification
| Requirement | Evidence | Code Reference |
|---|---|---|
| Gameplay Testing | Complete level with collision, NPC interaction, transitions | All GameLevelOutside and GameLevelMaze implementations |
| Integration Testing | Level transitions, NPC dialogue, AI responses work together | GameLevelOutside.js L380 - integrated flow |
| API Error Handling | Error catching and graceful degradation | GameLevelOutside.js L135 |
Custom Classes Overview
1. Ghost.js (Hostile NPC - Extends Enemy)
- Location: Ghost.js
- Features:
- Inheritance from Enemy class
- AI pathfinding with followPlayer() method
- Collision detection and death handling
- Dynamic direction management
2. DeathBarrier.js (Collision Trigger - Extends Barrier)
- Location: DeathBarrier.js
- Features:
- Inheritance from Barrier class
- Grace period implementation (prevents instant death)
- Collision detection with logging
- Level state management
3. SpriteSheetCoin.js (Collectible - Extends Coin)
- Location: SpriteSheetCoin.js
- Features:
- Inheritance from Coin class
- Sprite sheet rendering with frame selection
- Async image loading
- Fallback rendering logic
Game Levels with Full Integration
Level 1: Castle Grounds (GameLevelOutside)
- File: GameLevelOutside.js
- NPC Interactions: Sir Morty (AI knowledge base), DarkKnight (level transition)
- Player Customization: 3 knight skins with localStorage persistence
- Scene Transition: Elaborate fade-in with starfield parallax and typed dialogue
Level 2: The Maze (GameLevelMaze)
- File: GameLevelMaze.js
- Custom Enemies: Ghost class with follow behavior
- Collision System: 19 DeathBarrier instances defining maze walls
- Level Flow: NPC interaction leading to fortress transition