The Frogger game is created using Functional Reactive Programming (FRP) techniques and implemented in TypeScript. I have used RxJS Observable streams to handle animation and user interaction.
- Ground Section: Filled with moving cars (in white), trucks (in red). Watch out for cars and trucks that can end your journey! As the level increases, the speed of the cars and trucks increases, making it more challenging to avoid them.
- Safe Zone: This area is free of obstacles. Take a rest before continuing your journey!
- Water Section: Leap onto moving logs (in brown) and turtles (in yellow) to avoid drowning. You can also leap onto crocodiles (in green), but do not land on the head of the crocodile or when turtles are submerged underwater. The speed of the logs and turtles also increase with each level, making it harder to navigate this section.
- Use arrow keys (up, down, left, right) to move the frog across the screen.
- To stay alive, avoid colliding with cars and trucks, getting eaten by crocodiles, or falling into the river.
- Press the “r” key to restart the game if you want to start over or have reach a game over state.
- Test out the game here! https://subhansaadatkhan.github.io/classic-Frogger-Arcade-Game/dist/index.html
- Guide the frog across the road by avoiding oncoming cars and trucks. Be quick to avoid getting hit!
- Use logs, crocodiles and turtles to cross the river but be cautious of the submerged turtles and hungry crocodiles.
- Your goal is to reach the 5 target areas on the top of the screen.
- Each time you successfully reach a target area, you will score 100 points.
- Have fun and enjoy the challenge!
The design rationale of the game is written in 32268513_SubhanSaadatKhan.pdf