The goal of this project was to build a trivia style game that utilizes timers and click events to manipulated the sreen and react to the user's inputs. I particularly enjoyed this project because of my investment into my chosen theme. I a huge of Capcom(the Japanese video game company, well known for creating the franchises Street Fighter, Reseident Evil, and Mega Man) games and being able to align my enthusiasm with learning and my love of Capcom's history was a huge boost to my productivity.
Skills I employed:
Dom Manipulation with JavaScript: I really got to dive deep into dom manipulation with this project. Many of the aspects that happen on screen at being created dynamically within the code. The questions that produce, the musice that plays, the sound effects associated with correct and incorrect answers all happen based on the users input.
Timers: Learning how timers can utilized to run functions gave me a ton of creative control with this project. I was able to write a story with which the user interacts. The page layout adapting to the user response or lack of response allows them to become more immersed in the content of the page leading to a much more fulfilling experience.
jQuery: Using jQuery greatly expediated my ability to create and move elements in the DOM. This also allowed me to easily access and play music during transitions between states of the game(having the old school music adds a great touch to the presentation of the game).
Objects: This was my first huge success using objects to hold and manipulate data. I was able to hold and reproduce all of the the questions, answers, correct answers, and gifs. This made representing each question extremely easy because I only had to creat one function that would loop through the object holding the question data. In the even I want to add more questions to the game all I need to do is add the necessary data to the questions object and the rest of the code knnows what to do.
Give the game a shot at this link! https://capcom-trivia-game.herokuapp.com/home.html