High-Level Project Summary
We developed an online game that explains the functionalities of the James Webb Space Telescope components in a very fun way. The player goes on a quest to build their very own James Webb Space Telescope. Consisting of an introduction, four different and unique chapters that the user will explore in order to have a clearer understanding of the telescope, and finally a gallery to dive deeper into the universe. The JWST is a groundbreaking technology, we need to understand its work in order for us to understand our world, and to understand the universe.
Link to Final Project
Link to Project "Demo"
Detailed Project Description
Let's Travel To The Past!
We developed an online game where users can learn about the functionalities of the James Webb Space
Telescope in a fun and educational way. This game was built entirely using HTML, CSS, and JavaScript in Visual Studio Code and using information, data, and images provided by NASA, AEP, and several gaming assets sites.
The game takes the form of a quest mission where the user needs to collect all the necessary pieces to build the telescope; it consists of an introduction, four educational chapters, and a gallery.
Since one of the main attraction points of the telescope is to look into deep space, the game bases itself on the idea of building a time machine. The first part introduces the concept of the game, time traveling, before starting the actual missions.
Chapter 1 consists of a coin collecting running game, the coins are shaped as the golden hexagonal primary mirror pieces, once you finish the chapter, an explanation of the mirrors is shown to give the user an understanding of what they are collecting.
Chapter 2 consists of an object collector running game, now instead of just collecting you need to be careful with losing lives. The user enters a “fire mode” to collect the objects, if not in this state, the user loses lives; the winning condition is to collect 50 items. This chapter explains the nature and functions of the Infrared Detectors.
Chapter 3 is a card guessing game, shaped similarly to the shutters, the user needs to match the quiz question to its corresponding answer which could be a part or a feature information of the James Webb, in order to win. The information shown at the end of the game explains the features of the microshutters.
Chapter 4 is a camera focusing game, the user needs to be able to focus all sections of the camera views simultaneously for 15 seconds to win. This chapter shows the telescope’s focusing abilities.
The last part consists of a gallery, this section can only be opened after completing all previous chapters, the gallery shows actual images taken by the JWST and gives a brief description of each.
The main objective of this project is to help people learn about the JWST in an entertaining way, so that they can remember the wonders and benefits to humans to help us understand our universe in the past to understand the future.
Space Agency Data
All the information was taken from webb.nasa.gov. Pictures used as background, or sliders were taken from webb.nasa.gov and images.nasa.gov. 3D model used for main page animation was taken from nasa3d.arc.nasa.gov
Additionally, we used a picture of the GuaraniSat-1 as decoration from the Paraguayan Space Agency.
Hackathon Journey
The experience we had was unique, and finishing the SpaceApps Challenge was a total satisfaction. Not only we learned more about the JWST but also the journey of developing a simple videogame, and the challenges that come with it. We worked together to overcome every obstacle we faced, since helping one another is the key to make things better. We were inspired by the amazing capabilities of the JWST and how it can bring us closer to seeing the origin of the universe.
References
Github: https://github.com/blazrolon/bellbirdsSpaceApps
Software:
- Visual Studio Code
- Blender
- Adobe Photoshop
- canva
- Adobe Illustrator
- Node.js
- Bootstrap CSS Framework
- Codepen.io
Images:
- webb.nasa.org
- images.nasa.org
- Paraguayan Space Agency
- GuaraniSat-1: Christian Meza (La Nacion)
- opengameart.org (background: 3 Parallax backgrounds by Mobile Game Graphics, planet: Viktor Hahn (Viktor.Hahn@web.de), asteroids by phaelax, spaceship by MillionthVector)
- Image: pngwing.com, sciencefocus (https://bit.ly/3LWUnzn)
- Character, platforms assets: https://chriscourses.com
Sound:
- opengameart.org (Space Idea by Joe Reynolds - Professorlamp; Vitalezzz - Solar Sail; Observing the Star by yd)
3D model:
- nasa3d.arc.nasa.gov
Slider: codepen.io (tinabalducci)
Tags
#software #game #learning #quest #telescope #jameswebb #JWST #mirror #detector #pictures #gallery