https://github.com/yeison0416/observable-catch-the-dot
🎯 A reactive browser game built with RxJS Observables. Practice event streams, state management, and DOM updates in real time.
https://github.com/yeison0416/observable-catch-the-dot
browser-game dom-manipulation event-driven front-end-development functional-programming javascript learning-exercise observables reactive-programming rxjs separation-of-concerns state-management typescript webpack
Last synced: 2 months ago
JSON representation
🎯 A reactive browser game built with RxJS Observables. Practice event streams, state management, and DOM updates in real time.
- Host: GitHub
- URL: https://github.com/yeison0416/observable-catch-the-dot
- Owner: Yeison0416
- Created: 2025-09-04T02:47:03.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-09-23T16:58:04.000Z (9 months ago)
- Last Synced: 2025-10-05T23:27:44.541Z (9 months ago)
- Topics: browser-game, dom-manipulation, event-driven, front-end-development, functional-programming, javascript, learning-exercise, observables, reactive-programming, rxjs, separation-of-concerns, state-management, typescript, webpack
- Language: JavaScript
- Homepage:
- Size: 235 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🎯 Catch The Dot
Catch The Dot is a small game built with TypeScript, RxJS, and Handlebars where you try to keep a countdown timer alive by hovering over a moving dot. The game speeds up as you play and challenges your reflexes while demonstrating reactive programming in action.
# 🚀 How to Play
1. Hover your mouse over the dot (ball).
2. Each hover:
* Increases your score.
* Resets the countdown timer (starts from 5).
* Changes the dot’s color (every 3rd hover).
* Shrinks the dot’s size temporarily.
3. Every multiple of 3:
* The game interval decreases (the timer runs faster).
4. If the countdown reaches 0, the game ends.
# 🛠 Tech Stack
* TypeScript (ES Modules)
* RxJS – reactive streams (fromEvent, scan, switchMap, tap, takeWhile)
* Handlebars – templating
* SCSS + reset-css – styling
* Webpack – bundling
# ▶️ Running Locally
**Install dependencies**
`npm install`
**Run the dev server**
`npm start`
# 📸 Demo
