Robot Game

Can you guess which of these 3 Robots is going to go all evil and take over the world?

If you choose wisely you win!

If you choose wrong you'll be responsible for the extinction of the entire human race!

Robot 1
Robot 2
Robot 3

How I Did It

So how did I create this? I will tell you it was NOT easy! Today I learned a valuable lesson. Even with the little bit of JavaScript that I managed to learn so far it's not nearly enough to create something awesome.

I had an idea in my mind of what I wanted to create. But with my limited understanding of JavaScript there was no way I was going to implement it.

Okay so what now? What do I do? What's another way I could learn and implement my vision of what I wanted to create? With this in mind I learned of two things one can do when they come face to face with this kind of scenario:

  1. You can see if you can figure things out on your own even with your very limited JavaScript understanding.

  2. If your understanding of JavaScript is too limited for you to implement what you want to create then look it up online! Research exactly what you want to do. When you have the HTML, CSS and JavaScript code from a source you want to emulate then the fun but hard part begins.

I already learned about simple functions in JavaScript and I just finished learning about Conditionals (If, else, else if). But this knowledge was not enough. Yes I do have to keep learning more JavaScript of course. But another way of learning to code is by seeing how another source does it and then trying to "understand" how they did it and why they did it in the way that they did it. You'll learn through trial and error when you start testing out the code through your text editor...just like I did.

I wanted to create a very simple game where you have to pick the correct robot. Pick the wrong robot and you will doom the entire human race to extinction. I wanted for the user to be able to do the following things:

  1. Click on the robot of their choice.

  2. The clicking on their choice robot opens up a window within the page they are currently on.

  3. The popup window displays an animated gif that contains a caption telling the user if they've made the right or wrong choice in their choice of robot.

  4. The user can simply exit out of the popup window easily.

  5. After the user exits from the popup window they can go back and choose another robot and see a new popup animated gif with a new caption message.

This is the source code I decided in the end to go with:

After adding the source code to my text editor and testing the code on my browser I noticed there were many things I didn't want and or needed. So I started to tweak the source code, deleting things here and adding things there, then testing it on my browser to make sure I didn't mess up or break anything.

Through much trial and error I finally brought my vision to life. Going through this process allowed me to learn the following:

  1. It helped me to see how I needed to organize the HTML code so it can reflect the new JavaScript code and make it work. This was easy enough for me to do because I'm pretty familiar with HTML. But it helped me to see how the three robot pictures needed to be laid out in the flow of the page the way I had envisioned. And it also helped me to see which parts of the source code I needed to delete and which parts I needed to replace with my own code. Easy enough. Of course, this happened after playing around with the code and seeing what this code here does, what happens if you delete this part of the code over there, oh no this bit of code doesn't work let me add it back, let's see what happens if I change this, yes it worked, etc...

  2. It helped me to see how I needed to organize my CSS code. Again, I used the same process as above. Delete things here, change things there, etc...

  3. It helped me to see the bits of JavaScript code I was not too familiar with where I could at least try to understand it at the basic and rudimentary level.

The good news? I had a vision (a very simple one) and managed to bring it to life. The bad news? I have a LONG way to go in my learning process. But I sure did learn a lot with this simple robot game.

Since I learned how to create a simple robot game and it worked (after much trial and error) the way I wanted it to you know what that means right? It's time for the Woohoo Dance!

Dancing Robots