Lego Building Blocks — It’s a game!

When I first started to learn Javascript, I was (and still am) overwhelmed with the scope of possibilities you can create. Where do you start? How do you know what you don’t know? What is worth taking the time to learn in the short term versus long term?

After clicking around for hours, I had heard that you can build full games just using Javascript, so I decided that would be a fun thing to learn. If I am going to learn a new language, might as well make it as fun as possible right?

So I found a Youtube tutorial of how to build simple games in Javascript.

Fast paced, but was fun to put the pieces together to create an interactive website.

I’ll be honest, I have not made all 7 games yet. I wanted to take the time to write out the code myself, even though she does make the code available on Github free for download.

In this video, she teaches the fundamentals of Javascript, and I was able to take write the code step by step and refresh my page to see how it changed the website. I focused on the Whack-a-mole tutorial after doing the simple Matching Game tutorial, and added a bit of Simpson’s flare to the page to make it more interesting.

I present Whack-a-Burns, a Whack-a-Mole game where you smash Mr. Burns with a Hammer, instead of a poor, innocent gopher.

Whack-a-Burns, complete with a Hammer as the Cursor.

The HTML and CSS are limited for this game. Captured below is the full HTML coding I input. I only stylized the text and added a background image here. One thing I learned in this exercise was making a 3x3 grid in html with my “square” class.

HTML Code for Whack-A-Burns

The CSS is also limited, but I did learn about the flex-flow which enabled the squares I created in the HTML file to be transformed into a 3x3 grid over 618x618 pixels. This is also where I added the 100x100 pixel image of Montgomery Burns. I also added a hammer icon as the mouse cursor for added effect within the CSS.

Very simple CSS code here.

The Javascript is where the magic happens for this simple game. This is where I practiced with querySelector, addEvenlistener(), setInterval(), classList, forEach() and Arrow functions. I also learned by doing a lot with the ‘const’ versus ‘let’ functions, in which the ‘let’ function changes over time, whereas the ‘const’ is, well, constant.

Look at the math! This uses randomPosition functions using the amount of squares we have (9) be randomized!

This is where I set how quickly the “mole” moves, as 550 milliseconds. I tried it at 500, but that was too hard. Now 550 is too easy for me, so I think it’s time to level up!

Finally, this is where I learned about how to have a “countDown” function, and learned that time is measured in milliseconds… News to me!

I am very excited to continue with learning other simple Javascript games, and maybe I can make a whole series of Simpson’s mini games by just changing the iconography instead of the standard shapes and colors. I will keep you posted!

Here are my Github files if you want to try it out for yourself! Have fun and keep building.