Inspiration
I was inspired by those short interactive story games that I played as a kid.
What it does
To advance through the game and find the missing gingerbread man, you must answer Christmas trivia questions correctly, or else you have to restart your adventure.
How I built it
I used Replit to build this project since I was most familiar with it. Also, it was nice to be able to reload the webview tab to see the changes I made in the program from the user's standpoint, especially when styling the website. It made it easier to fix things I didn't intend for the code to do.
Challenges I ran into
I had a really hard time figuring out how to make the restart button do what it was supposed to do. When the user would lose and have to restart, the button wouldn't return the user back to the introduction page, it would just be a blank page with the background photo.
Accomplishments that I'm proud of
After a lot of changes to the restartGame function, I was able to fix the restart button. Also, I originally intended for just one phrase to be presented to the user when they got something wrong. However, I thought it would be nice to have unique phrases, based on the wrong answer they chose, so I did just that. In addition, I thought the colors and the background GIF I used were really cute.
What I learned
I learned a lot about how to use the step system in the JavaScript code. Also, I learned how to import fonts from Google Fonts into HTML and CSS.
What's next for The Mischievous Gingerbread Man
If I were to revisit The Mischievous Gingerbread Man, I would add more Christmas trivia questions to make the game longer and make the background picture change every time the user is on a new part of the story. Also, I want to make the interactive buttons more festive when I have learned more CSS.
Built With
- css
- github
- html
- javascript
- replit
- w3schools
