Inspiration
The inspiration behind "Adopt & Learn" stemmed from a desire to combine the joy of virtual pet ownership with the important message of responsible animal care. I wanted to create a playful and engaging web experience that not only entertains but also subtly educates users about animal needs and the process of adoption. The core philosophy driving this project is that "Saving lives (and having fun) is just a click away!" I aimed to foster greater awareness and compassion for animals, all within an interactive and rewarding digital environment.
What it does
"Adopt & Learn" is an interactive web application that simulates a heartwarming world of virtual pet care and adoption. Users can: Discover & Adopt: Explore various virtual pets and simulate the adoption process.
Track & Earn Coins: Earn virtual coins by adopting new pets and engaging in mini-games.
Customize Pets: Use earned coins to purchase items from a shop to personalize and care for their adopted companions.
Play Mini-Games: Engage in an exciting 3D mini-game, "Cat-ch Me If You Can," to bond with their pet and earn more rewards.
Interact with a Bot: Get instant answers and announcements from "Max the Buddy," an integrated AI-powered chatbot, enhancing the learning experience.
Experience a 3D Play Area: Dive into an immersive 3D environment within the game.
How we built it
"Adopt & Learn" was built primarily using a modern web development stack:
Frontend Structure & Styling: HTML5 and CSS3 were used for the foundational structure and responsive design of the web pages, ensuring a clean and inviting user interface.
Interactive Logic & Game Core: Vanilla JavaScript powers all interactive elements, dynamic content, bot integration, and the sophisticated game logic, including the unique timed adoption system.
3D Graphics: The immersive "Cat-ch Me If You Can" mini-game was rendered using Three.js (r128), a powerful 3D JavaScript library. GLTFLoader.js was specifically used to efficiently load the complex 3D models into the scene.
Data Persistence: Web Storage (LocalStorage) was implemented to persistently store user progress, adopted pets, and coin balances, ensuring data is saved across sessions.
Assets: Various sound assets were incorporated for background music and in-game effects, alongside image assets for backgrounds, textures, and UI elements.
Typography: Google Fonts (Quicksand) was used for consistent and friendly typography throughout the application.
Challenges we ran into
Developing "Adopt & Learn" as a solo project within a hackathon timeframe presented several challenges:
3D Game Development Complexity: Integrating and optimizing a 3D game using Three.js required a significant learning curve and careful management of assets and performance to ensure smooth gameplay. This included handling camera controls, object interactions, and basic physics within the browser environment.
Time Management: As a solo developer, balancing the implementation of the main website features (adoption system, coin economy, chatbot) with the development of a fully functional 3D mini-game was demanding. Prioritization and efficient coding were crucial.
State Management: Ensuring seamless transitions and consistent data flow between the main website and the game, including coin rewards and pet status updates, required careful planning of local storage implementation and JavaScript logic.
Chatbot Integration: Implementing a simple, responsive chatbot that felt intuitive and helpful while remaining within the scope of a hackathon.
Accomplishments that we're proud of
I am incredibly proud of several key accomplishments in "Adopt & Learn":
Full Functional Integration: Successfully integrating a complex 3D game into a cohesive web application, with a working coin economy that links gameplay rewards directly back to the main site's pet customization.
Engaging User Experience: Creating an intuitive and visually appealing interface that makes the virtual pet adoption and care process both educational and enjoyable.
Solo Development: Building such a multi-faceted project, including a custom 3D game and bot integration, entirely by myself within the hackathon's constraints.
Unique Gameplay Loop: Implementing the timed adoption system and the coin economy provides a strong incentive for continuous user engagement and interaction.
Clean Code & Architecture: Maintaining a clean and understandable codebase despite the rapid development pace, utilizing vanilla JavaScript effectively for all core functionalities.
What we learned
This project provided invaluable learning experiences:
Three.js Mastery: Gained practical, hands-on experience with Three.js, understanding its core concepts, scene management, object loading (GLTFLoader), and basic interactivity.
Full-Stack Thinking (Frontend Focus): Reinforcing the importance of planning how different frontend components (website, game, data storage) interact seamlessly to create a unified user experience.
Scope Management: Learning to effectively define and manage project scope under tight deadlines, prioritizing essential features for a viable demo.
Problem-Solving under Pressure: Developing robust solutions for unexpected technical challenges, particularly in 3D rendering and game logic, quickly and efficiently.
User Engagement Design: Gaining insights into designing systems (like the timed adoption and coin rewards) that encourage continuous user interaction and long-term engagement.
What's next for Adopt & Learn: Play with Your Buddy!
The future of "Adopt & Learn" holds exciting possibilities:
Expanded Pet Roster & Customization: Adding more pet species, breeds, and a wider variety of items for deeper personalization.
New Mini-Games: Developing additional mini-games that offer diverse gameplay experiences and new ways to earn coins and bond with pets.
Educational Content Integration: Incorporating more explicit educational modules about responsible pet ownership, animal facts, and welfare organizations, potentially linked to specific learning goals and rewards.
Multiplayer/Social Features: Exploring the possibility of users visiting each other's virtual homes or engaging in friendly competitions.
Advanced AI Bot: Enhancing Max the Buddy with more complex conversational abilities and personalized advice based on adopted pets.
Mobile Responsiveness: Further optimizing the 3D game and overall site for seamless performance across various mobile devices.
Sound & Visual Enhancements: Adding more ambient sounds, visual effects, and potentially day/night cycles to the 3D environment for increased immersion.
Log in or sign up for Devpost to join the conversation.