Astra The Space Adventure
Welcome to Astra, the space adventure!
Walkthrough of my Interactive Game Poster:
- Click on "Run Game" to begin the interactive experience.
- After clicking the "Run Game" button, the user will see a screen where the game poster element of my project is visible; it should read "Astra", "The Space Adventure" and "Coming Soon!" in three separate lines. There are animated twinkling stars and shooting stars in the background of this poster.
- Music will begin to play as soon as the "Run Game" button is initially clicked, the song is Major Tom (Coming Home) by Peter Schilling (the English version).
- There is a rocket visible at the bottom of my game poster along with its launchpad. This rocket is playable and can be moved through user interaction. The user needs to click on the poster first and then they can click on the up, down, right, and left arrow keys on the keyboard to move this rocket and launch into space!
- The user can continue to play around with the rocket until the music stops playing. Afterward, the page can be refreshed to begin the interactive experience again.
Features of my Interactive Game Poster:
- Rocket: The rocket is a playable part of this interactive experience. Through user interaction in the form of keyboard input (up, down, left, and right arrow keys), the rocket can fly through space!
- Animated Stars and Shooting Stars: The poster comprises of animated twinkling stars and shooting stars in the background which continue to display as the rocket launches and is moved across the poster. The stars and shooting stars scroll along as the rocket is moving upward and across the poster, giving the impression that the rocket is flying through space!
- Music: I added another interactive element in the form of background sound to this interactive game poster. I choose the song, Major Tom, because it is space-themed as well, and it seemed to best fit the retro-space aesthetic I aimed to achieve in this interactive experience.
Design Goals and Process of my Interactive Game Poster:
- My goal for this project was to create a short, yet effective interactive experience that fit the criteria for this project.
- I decided to create an interactive game poster based on a space theme and build on that concept, rather than a preexisting video game. I was inspired by the space game on Quizlet to have a space theme for my project too.
- I incorporated the feedback I received on Project 1 into this project and tried to ensure that my selection of the font and color palette was appropriate and fit the aesthetic I aimed to go for, which is a retro-space aesthetic.
- My initial plan for this project was to create a space game where the rocket moves through space and collects space metal and gains points when it does. I'd also planned to add an animated galaxy in the background and asteroids too and have the rocket lose a life whenever it hit an asteroid. However, due to coding challenges and lack of time, I had to drop many of these ideas and keep the project a bit more simplistic.
- Although I kept the project simple, I feel like the simple version better fits the brief of the project description, as the project is supposed to be a very short interactive experience. If there were no time limit on this project (such as the 3-5 min maximum), I could have potentially expanded on my initial idea and made a longer game.
- For many of my design elements, I decided to do it all digitally, as I felt a hand-drawn aesthetic would not work well with the retro-space theme I was going for. I also felt as though incorporating potentially hand-drawn images into my project would be hard coding-wise, so I choose to keep the rocket and the launch pad digital, as in I coded them in p5.js. I also created functions that created an animated effect for the stars and shooting stars and had them printed in the draw() function so it would display on the poster.
- I was met with many coding challenges while working on this project. I have programmed in other languages before, such as Python and Java, but I haven't had any experience with JavaScript, so I had to learn the language on the go, while I did this project. I have also never used p5.js before, so I had to learn how to use the platform and learn of its available libraries before I could begin my project. Once I began coding, I had to continue researching ways on how to resolve the issues that kept coming up, such as getting the music to play properly and how to import texts into p5.js. I also had to drop many of the initial ideas I had for this project, such as the animated galaxy and the number of lives/score calculations for the game I initially planned to do, because of coding challenges. Getting my game to move across different screens, and having objects on my screen rotate, or adjusting the opacity of the background so that it doesn't interfere with my other display elements, were just some of the many challenges I faced while coding this project. However, I did get many elements of my poster to work and so I choose to stick with and expand on the elements that did work (such as the background opacity) rather than the elements that didn't (such as getting the digitally drawn rocket to rotate).
- Regardless of all the coding challenges I faced, I enjoyed working on this project overall, as I've learned so much about coding in JavaScript, how to use p5.js and animated graphical elements. The experience I've gained after completing this project will surely help me in future projects :-)
Sources:
Background Image: background_image
