A fun and engaging 2D RPG game with an integrated quest/task management system, perfect for encouraging children to complete real-world tasks through gamification!
- Tile-based movement - Navigate through a grid-based world
- Collision detection - Avoid obstacles (trees) as you explore
- Keyboard controls - Use arrow keys to move your character
- Smooth animations - Beautiful animations and responsive design
- Add Tasks/Quests - Parents can add real-world tasks as in-game quests
- Point System - Each quest has customizable point values
- Track Progress - Visual tracking of completed and pending quests
- SQLite Database - Server-side database stores all quests and points persistently
- RESTful API - Modern API architecture for quest management
- Celebrations - Fun animations when completing quests
- Quest Management - Complete, uncomplete, or delete quests as needed
- Node.js (v14 or higher)
- npm (Node Package Manager)
-
Clone the repository or download the project files
-
Install dependencies:
npm installnpm startnpm run devThe game will be available at http://localhost:3000
-
Add Quests - Use the quest panel on the left to add tasks:
- Enter a task description (e.g., "Clean your room", "Do homework", "Practice piano")
- Set point values based on task difficulty
- Click "Add Quest" to create the task
-
Manage Quests - Track and manage tasks:
- View all active and completed quests
- Mark quests as incomplete if needed (undo button)
- Delete quests that are no longer relevant
- Play the Game - Use Arrow Keys to move your character around the world
- Complete Real Tasks - Do your assigned tasks in real life
- Check Off Quests - When a task is done, click the ✓ button to complete it
- Earn Points - Watch your points grow as you complete quests!
- Celebrate - Enjoy the celebration animation when you complete a quest
- Navigate around the green obstacles (trees)
- Explore the game world
- Complete quests to earn points and see your character celebrate!
catllab-quest/
├── src/
│ ├── game.js # Game logic and mechanics
│ └── quests.js # Quest management system (client-side)
├── database.js # SQLite database operations
├── server.js # Express server with REST API
├── index.html # Main HTML file
├── style.css # Styling and animations
├── package.json # Node.js dependencies
├── quests.db # SQLite database (created automatically)
└── README.md # This file
- Frontend: HTML5, CSS3, Vanilla JavaScript
- Backend: Node.js, Express.js
- Database: SQLite (via better-sqlite3)
- Real-time Communication: Socket.IO for WebSocket support
- Architecture: RESTful API with real-time updates
- Development: Nodemon for auto-reloading
The application uses WebSocket technology (Socket.IO) to provide real-time synchronization across multiple devices:
- Multi-device support - Changes made on one device instantly appear on all connected devices
- Quest updates - When a parent adds or deletes a quest, all clients update immediately
- Completion notifications - When a child completes a quest, parents see it in real-time
- Reward updates - Reward creation and claims are synchronized across devices
- No page refresh needed - All updates happen automatically
The application emits and listens for the following events:
quest:created- New quest addedquest:completed- Quest marked as completequest:uncompleted- Quest marked as incompletequest:deleted- Quest removedreward:created- New reward added to vaultreward:claimed- Reward claimed by childplayer:updated- Player stats updated
The server provides the following REST API endpoints:
GET /api/quests- Get all questsPOST /api/quests- Create a new questPUT /api/quests/:id/complete- Mark a quest as completedPUT /api/quests/:id/uncomplete- Mark a quest as incompleteDELETE /api/quests/:id- Delete a questGET /api/settings/total_points- Get total points earned
MIT