Speed Car Game

How fast are you going?








How I Did It

Well this was most definitely an interesting project for sure! I learned a few things through trial and error. I wanted to see if I could figure things out on my own again and then if I got stuck use Google to find the right answers.

I wanted my simple JavaScript game to do the following:


  1. User is prompted to input their speed in terms of how fast they like to drive.

  2. Once they input their speed the prompt box disappears and tells them exactly how fast they're going and if they're going too fast, too slow, or following the speed limit, followed by either a "Slow down" or "Good job for going the speed limit" or "Pick up your speed" message.

  3. User will also see based on the speed they gave in the user prompt window a gif pertaining to the corresponding speed they gave.

  4. User can refresh the page and try all different kinds of speed numbers to get different results.

One of the issues I ran into was the following. I originally had the following conditional statements in the following order:

  • if

  • else if

  • else if

  • else

For some reason when I had the "if", then "else if", then another "else if", and yet another "else" statement it would only read the "if" condition and the first "else if" statement. It wouldn't even read any conditions after that, even if the other conditions were "True" and the first "if" and second "else if" were "False."

I'm still trying to figure out why it was ignoring all the other conditions after testing each of them. I decided, however, to do something a bit different. What if I were to instead separate both of the "else if" statements and get rid of the "else" statement? The "are_you_speeding" variable from the user prompt will remain the same so nothing would technically be changing. I decided to try it out and voila! It actually worked!

Screenshot

Another thing that also happened was that the images that corresponded with the user prompt wouldn't load! The reason I was having a hard time was because when I was researching the "innerHTML" property I knew how to include the corresponding text based on the user input from the prompt. But I had no idea how to add an image to the "innerHTML" property.

So I started to experiment to see if I could write the same conditional statements in the same way like I had done but this time instead of adding the text, like for example, "You are driving at 85 miles an hour! You are speeding. Slow down!" I would instead add an image to the "innerHTML" statement.

As you can see, if I followed the "innerHTML" exactly you'll notice there are no "< >" brackets. If I wanted to add an image I would also have to be extremely careful with the quotation marks since the "src" attribute already contains double quotation marks. I also added a new placeholder for my html div as well. The text placeholder for my html div tag says "SpeedTest" and the image placeholder for my other html div tag says "SpeedPicture." I played around with all of this, testing and re-testing the browser to reflect the new changes from my text editor until it finally worked! Yay!

Screenshot

Since I created a simple speeding car game using some new elements I learned such as "innerHTML" and "document.getElementById" along with how to make conditional statements a little bit more interactive based on user input from the prompt window you know what that means right? It's time for the Woohoo Dance!

Dancing In Car