Learn JavaScript by Climbing a Goblin Tower

This month, The Software Guild blog features the seventh of our 2019 series of blog posts — exploring topics that interest and inspire our expert instructors. Subscribe to our blog to read analysis, programming tips and overall thoughts, straight from our instructors. This month, Randall Clapper, lead Online Java & .NET/C# Instructor for the Software Guild, explains how to climb a tower and defeat a goblin — all in Javascript.

Video games made me the programmer I am today. I loved playing games as a kid, and I played my favorites enough to spot patterns within them. For instance, computer-controlled enemies often repeat the same techniques, which makes a strong memory as valuable as fast reflexes during battles.

Once you spot these patterns, you’re invited to play a hidden level inside a video game.

All you have to do is dive into the code. After spending many hours wading through streams of commands, you’ll begin to recognize how patterns in a code set drive patterns in a game. These patterns take shape as loops, are set on timers, and fit together like a puzzle. But instead of creating a picture, a game’s coding puzzle creates a world.

As a kid, I enjoyed reshaping those worlds. Using Microsoft Excel on my parents’ PC, I manipulated code to change how games worked (or, when I made errors, how a game failed to work). My favorite part was changing character traits. Simply revising a dataset made characters stronger, faster, invincible. This was how, at age 14, I built a Pokémon team that no one could defeat.

Soon, tinkering with source code became as fun as gaming itself. Think about it-coding and gaming are fairly similar. Both involve solving puzzles, require immersion to master, and deliver immense satisfaction every time you succeed. This makes gaming the perfect entry to coding. It’s also why I incorporate game design into online coding bootcamps that I teach.

Learning to Code Through Game Design

Designing games is a fun way to introduce complex coding concepts to apprentices. Plus, games are interactive, so apprentices can see how tinkering with code affects game functionality in real time.

My apprentices create a game called Goblin Tower. The game is simple: Players begin with 20 health points and must take 10 steps to complete a level. With each step, they risk encountering a goblin, which can appear on-screen at random. If a goblin appears, players must defeat it before taking the next step.

Although players lose two health points per battle, they earn five pieces of gold for defeating the goblin. Once they earn 10 pieces of gold, they can buy a potion that restores one health point. Players continue encountering goblins, buying replenishing potions, and clearing levels until they run out of health points.

The fun begins when apprentices develop code to create their own Goblin Tower. This exercise is effective because it allows apprentices to dive into the three key features of programming:

1. Collecting and storing data
2. Manipulating the control flow of an application
3. Organizing code within methods and classes

The first feature-collecting and storing data-is straightforward. In the Goblin Tower exercise, this data appears on-screen as the hero’s health level, amount of gold in possession, and level status. Apprentices also write console commands to build a prompt that collects user data, such as a person’s name. Once collected, this data appears in a container:

The second feature involves manipulating the flow of an application. This is where things get complicated for coding newcomers. In the Goblin Tower exercise, manipulation entails allowing an action-stepping forward-to cause a reaction with consequences-encountering a goblin that saps the hero’s health points. I guide apprentices through writing rules that manipulate the application to build a functioning game. During this process, apprentices write:

• Arrays to limit the number of potions the hero can carry
• Formulas to calculate the number of steps the hero takes and changes to the hero’s health
• Loops around formulas to reset steps when the hero reaches the next level
• A random number generator to determine whether taking a step makes a goblin appear
• ‘If’ statements to control game flow, such as reducing health points if the hero encounters a goblin

Next, I walk apprentices through the third feature of programming, which is to organize the control flow. For this exercise, we keep things simple, focusing on ensuring code is readable. We wait to introduce classes, methods, and other advanced organization structures during the object-oriented programming stage of the coding bootcamp. To preview the complete bootcamp schedule, check out the course details section of our .NET/C# and Java bootcamp pages.

Ready to Journey Into the Code?

Download this zipped folder to play Goblin Tower. In addition to the HTML file for the game, the folder includes instructions for accessing the code behind the game. If you’d like to take a crack at editing the code, you’ll need an editor, such as the free Visual Studio Code. Editing the code also requires a basic understanding of jQuery, JavaScript, and HTML.

If those concepts are new to you, join our online Intro to Web Development course. You’ll ease into programming by learning the basics of HTML, JavaScript, and other technologies web developers must know. The course is free, so it’s a risk-free way to find out if coding is right for you.

Sound fun? It is! Apply today to get started.

About the Author

Randall Clapper is a lead instructor of online bootcamps at The Software Guild. Check out his profile to learn more.

Originally published at https://www.thesoftwareguild.com on August 15, 2019.