Web-based cat shelter game : development with Angular and Node.js
Le, Dinh (2025)
Julkaisun pysyvä osoite on
https://urn.fi/URN:NBN:fi:amk-2025091824841
https://urn.fi/URN:NBN:fi:amk-2025091824841
Tiivistelmä
This project presents the development of an interactive web-based cat washing game using modern web technologies, specifically Angular 19, Node.js, Express.js, and MongoDB. The study showcases how contemporary web frameworks can facilitate the development of engaging applications while integrating educational content about animal care into casual gaming experiences.
The application was developed using a full-stack JavaScript approach with TypeScript implementation across both frontend and backend. A Canvas-based rendering system was implemented for game graphics, utilizing pixel art assets created in Aseprite. The frontend used Angular’s component-based architecture for user interface management, while the backend used Express.js for RESTful API development and MongoDB for flexible data storage. Game mechanics were implemented through custom drag-and-drop functionality, grid-based collision detection systems, and real-time visual feedback. The application architecture separated game logic from web application features to enable future expansion.
The implementation successfully demonstrated that web technologies can support interactive game mechanics, though with greater complexity compared to dedicated game engines. The Canvas-based rendering system provided responsive user interactions and immediate visual feedback. Key technical achievements included functional drag-and-drop mechanics, accurate hit detection systems, and seamless integration of user authentication with game save functionality. The modular architecture established a foundation for future expansions, including additional cat breeds and minigame varieties, while maintaining clear separation between gaming elements and standard web application features.
The project confirms the viability of web technologies for simple game development while highlighting the educational potential of combining interactive entertainment with responsible pet ownership practices. The established technical foundation supports future enhancements including mobile optimization, accessibilities, and complex web features.
The application was developed using a full-stack JavaScript approach with TypeScript implementation across both frontend and backend. A Canvas-based rendering system was implemented for game graphics, utilizing pixel art assets created in Aseprite. The frontend used Angular’s component-based architecture for user interface management, while the backend used Express.js for RESTful API development and MongoDB for flexible data storage. Game mechanics were implemented through custom drag-and-drop functionality, grid-based collision detection systems, and real-time visual feedback. The application architecture separated game logic from web application features to enable future expansion.
The implementation successfully demonstrated that web technologies can support interactive game mechanics, though with greater complexity compared to dedicated game engines. The Canvas-based rendering system provided responsive user interactions and immediate visual feedback. Key technical achievements included functional drag-and-drop mechanics, accurate hit detection systems, and seamless integration of user authentication with game save functionality. The modular architecture established a foundation for future expansions, including additional cat breeds and minigame varieties, while maintaining clear separation between gaming elements and standard web application features.
The project confirms the viability of web technologies for simple game development while highlighting the educational potential of combining interactive entertainment with responsible pet ownership practices. The established technical foundation supports future enhancements including mobile optimization, accessibilities, and complex web features.