Inspiration
The idea behind SpaceCraft emerged from the desire to create an educational yet engaging web app that simulates terraforming Mars. This project lets users learn about the harsh Martian environment, while experimenting with solutions to develop essential survival elements such as water, hydroponics farms, radiation shielding, and pressurized domes to make Mars habitable.
What it does
Combination-Based Game Mechanics: Inspired by the game Little Alchemy, this feature lets users combine elements to create new items essential for Martian survival. The combinations are carefully crafted to replicate real-life solutions (e.g., combining fire and water to create water vapour, combining fire and ice create water.) Educational Objective Tracking: The game includes an objectives checklist with missions like building a hydroponic farm, a radiation shield, and a pressurized dome. The checklist visually tracks and displays progress, indicating the completeness of each mission. After completing each mission, a fact about the item is shown. Hint System for Guidance: The app includes a hint system to assist users with tough challenges. Hints are earned by unlocking a certain number of items (5) in the inventory, and each hint offers scientifically-grounded information to guide users toward achieving the objectives. Rich Visual and Content Design: Leveraging CSS animations and a space-themed UI, the game offers a visually engaging experience. Pages such as "About Mars" provide scientific details and facts about the planet’s geology and atmosphere, with captivating images and infographics.
How we built it
HTML5, CSS3 & Javascript: For building the structure and style of the project’s pages. Custom CSS elements enhance the aesthetics of the game and its educational sections. Three.js: For creating the 3D model of Mars and its two moons. The project uses textures and geometry to accurately represent Mars' appearance. ChatGPT: used extensively to implement game mechanics especially in the area of using javascript
Challenges we ran into
Balancing Realism and Gameplay: We faced the challenge of making the game both scientifically accurate and engaging. Integrating real-world terraforming concepts with fun gameplay mechanics took careful consideration to keep players interested without oversimplifying complex science. Combining Elements Logically: Designing combinations that were both intuitive and educational required a lot of thought. We needed combinations to reflect realistic scenarios while maintaining an element of discovery and surprise for players. 3D Model Integration: Implementing the 3D model of Mars with interactive orbiting moons using Three.js required a deep dive into the world of WebGL. We had to overcome rendering issues and optimize performance for smooth interactions on different devices. Responsive Design and User Interface: Building an interface that was both visually appealing and functional on different devices was tricky. We spent significant time adjusting layouts, fonts, and animations to ensure that the experience was immersive without cluttering the screen. Tracking Progress and Objectives: Implementing the checklist system to track completed tasks and display facts required designing a state management system that would dynamically update based on user actions. Managing hints, combinations, and checklists in sync presented some challenges in JavaScript. Incorporating Fun and Educational Facts: While adding educational facts to each element, we faced the challenge of keeping the facts short, engaging, and scientifically accurate. We wanted the facts to be enjoyable but not interrupt the gameplay flow. Managing User Inputs and Validations: Allowing users to experiment freely while ensuring that only valid combinations yielded new items needed a robust drag-and-drop validation logic. Preventing incorrect combinations from affecting gameplay without frustrating users was a delicate balance. These challenges pushed our team to think creatively, learn new technologies, and refine our approach to ensure the final product was both fun and informative!
Accomplishments that we're proud of
Educational and Fun Gameplay: Seamlessly combined space science with engaging game mechanics, allowing users to learn while playing. Sleek and Responsive Interface: Designed a space-themed UI that adapts to all devices, providing an intuitive and stylish experience. Creative and Logical Combinations: Developed over 70 item combinations that encourage exploration and creativity. Robust Task Tracking: Built a clear and rewarding checklist system to guide users through their objectives. Dynamic Facts Integration: Added informative and fun facts for each item, rewarding creativity with knowledge. Efficient Team Collaboration: Worked together smoothly to overcome challenges and refine our project.
What we learned
Balancing Education and Entertainment: We learned how to strike a balance between delivering scientific accuracy and maintaining an engaging and fun gameplay experience, which kept players curious and invested. Effective Collaboration: Working as a team taught us the importance of communication, dividing tasks effectively, and leveraging each team member’s strengths to achieve our project goals efficiently. Handling User Interaction: We gained valuable experience in designing intuitive drag-and-drop mechanics and ensuring smooth interactions through effective JavaScript logic and event handling. Task Tracking and State Management: Developing a dynamic task checklist and state management system gave us insights into managing data and UI updates in response to player actions. Creative Storytelling with Facts: Adding fun and informative facts to each element taught us how to integrate storytelling into a game, making the learning experience more engaging.
What's next for Terraforming Mars
Expanding Gameplay with Advanced Elements: We plan to introduce more complex element combinations, such as creating advanced technologies like fusion reactors or Martian habitats with sustainable ecosystems. This will allow players to dive deeper into the challenges of building a self-sustaining colony. Adding Real-World Scientific Data: Integrating real-time data from NASA and other space missions could enhance the realism, giving players insights into the latest discoveries and challenges faced by actual Mars missions. Interactive Missions and Storylines: We want to add mission-based storylines that take players through specific challenges, like surviving dust storms or managing water scarcity, adding narrative depth and purpose to the gameplay.
Built With
- adobe-dreamweaver
- chatgpt
- css3
- html5
- three.js
- visual-studio
Log in or sign up for Devpost to join the conversation.