Frogger 🐸
Published: January 8, 2021 · Last updated: August 1, 2025
Overview
This project is a remake of the classic Frogger arcade game built with TypeScript, Angular, and HTML5 Canvas. The original JavaScript implementation was refactored into TypeScript and integrated into an Angular application to improve code organization, type safety, and maintainability.
The objective is simple: reach the key without getting hit by bugs. Each time you reach the goal, the game restarts with an additional enemy, gradually increasing the difficulty. If you collide with a bug, your character is sent back to the starting position.
Tech Stack
- HTML — Canvas structure and page layout
- CSS — Styling and sprite positioning
- TypeScript — Game logic, entities, and input handling
- Angular — Application structure and component integration
- HTML5 Canvas — Rendering the game world and animations
Architecture
The game is organized into three main layers.
Engine
The engine drives the game loop by updating game objects every frame and rendering them to the canvas. It is responsible for maintaining a consistent frame rate and coordinating the update/render cycle.
Resources
The resource manager preloads and caches all sprite assets before gameplay begins. This prevents images from loading during gameplay and ensures smooth rendering.
Application Layer
The application layer contains the game-specific logic, including:
- Player movement
- Enemy movement
- Collision detection
- Goal detection
- Keyboard input
- Difficulty progression
Separating these responsibilities keeps the rendering engine independent from the gameplay logic and makes the code easier to extend.
Gameplay
The player moves one tile at a time using the keyboard. Enemies continuously travel across the screen at different speeds, requiring careful timing to cross each lane safely.
Whenever the player reaches the key, the game increases the number of enemies before starting the next round. This progressively raises the difficulty without changing the core mechanics, making later rounds increasingly challenging.
Demo
Source
Summary
This project demonstrates how a classic JavaScript browser game can be modernized using TypeScript and Angular while preserving the original gameplay. Refactoring the code into typed classes and separating the engine, resource management, and gameplay logic resulted in a cleaner, more maintainable architecture that is easier to extend with new mechanics and features.