Members
(inner, constant) canvas
Canvas elements for rendering the game
(inner) draggedTowerType
Drag and drop state tracking
(inner) lastTimestamp
Game timing variables
Methods
(inner) gameLoop(timestamp)
Main game loop using requestAnimationFrame
This is the heart of the game, running approximately 60 times per second
Parameters:
Name | Type | Description |
---|---|---|
timestamp |
number | Current time in milliseconds, provided by requestAnimationFrame Key concepts: - RequestAnimationFrame for smooth animation - Delta time for consistent motion regardless of frame rate - Game state management |
(inner) handleCombatPhase(timestamp, deltaTime)
Handles all combat phase updates including enemy movement, attacks, and collisions
Parameters:
Name | Type | Description |
---|---|---|
timestamp |
number | Current game time in milliseconds |
deltaTime |
number | Time elapsed since last frame Key concepts: - Game state updates - Entity management (enemies, towers, projectiles) - Particle effects - Combat mechanics |
(inner) handleGameOver()
Handles game over state and prompts for restart
(inner) handleLevelComplete()
Handles the transition between levels
Shows completion message and sets up next level
(inner) initializeEventListeners()
Sets up all event listeners for user interaction
Key concepts:
- Event-driven programming
- HTML5 Drag and Drop API
- DOM manipulation
- Method decoration (towers.push)
(inner) populateTowerPalette()
Dynamically populates the tower palette based on TowerTypes
(inner) renderGame()
Renders all game elements to the canvas using a layered approach.
This function demonstrates several key game development patterns:
1. Canvas State Management:
- Uses save()/restore() to isolate rendering contexts
- Resets transform matrix to prevent state leaks
- Maintains clean state between rendering phases
2. Layered Rendering Pattern:
- Renders in specific order (background → entities → UI)
- Each layer builds on top of previous layers
- Separates rendering concerns for easier maintenance
3. Separation of Concerns:
- Each render function handles one specific type of game element
- UI rendering is isolated from game element rendering
- Clear boundaries between different rendering responsibilities
The rendering order is important:
1. Grid (background)
2. Particles (effects under entities)
3. Projectiles (dynamic game elements)
4. Towers (static game entities)
5. Enemies (moving game entities)
6. UI (top layer)
(inner) restartGame()
Restarts the game from level 1 with fresh state
(inner) spawnEnemies(timestamp)
Spawns new enemies at regular intervals during combat
Parameters:
Name | Type | Description |
---|---|---|
timestamp |
number | Current game time in milliseconds Key concepts: - Time-based game events - Enemy creation and management - Game balance through spawn timing |
(inner) startCombat()
Transitions the game from placement to combat phase.
Demonstrates state machine pattern commonly used in games.
Side effects:
- Updates game phase
- Disables UI elements
- Updates visual feedback
(inner) startNextLevel()
Sets up the next level
Increases difficulty and resets the game state while preserving currency