Frogger šø
August 8, 2021
TypeScript
Angular
HTML5 Canvas
WebGame
Arcade
Overview
This is a TypeScript remake of the classic Frogger arcade game, rebuilt and integrated into an Angular project for improved structure and type safety.
Your objective: reach the key without getting hit by bugs.
Each time you succeed, the game restarts with more enemies.
Collide with a bug, and you're sent back to the start.
Tech Stack
- HTML ā Canvas structure and layout
- CSS ā Visual styling and sprite design
- JavaScript ā Original game logic and engine loop
- TypeScript ā Refactored logic with type safety and Angular integration
How It Works
The game is structured into three main layers:
š® Engine
- Controls the core game loop
- Handles canvas rendering and frame updates
š§° Resources
- Preloads and caches image assets
- Ensures all sprites are loaded before rendering
š§ Application Layer
- Defines core entities: player, enemies, key
- Manages state, movement, and collision logic
- Listens for keyboard input
Demo
ā¶ļø Play Frogger
Source
š View Source on GitHub