Blog

Build a JavaScript Video Game

Have you ever wanted to create your own video game, but don’t know how to code? Well here’s your chance to kill two birds with one stone: learn to code while building your very own JavaScript video game!

PRE-REQUISITES

If you’ve been following along with our JavaScript: Basics series so far, you’ve learned to work with JavaScript:

JavaScript is a very deep language, that can take many years to learn, but with these basic concepts you can already start to create simple programs.

Over the past few weeks, we have illustrated these concepts by building a basic JavaScript video game. There are still many functions, features, and tricks in the code for this game that we have not explained to you. If you want to fully understand how this game functions, you’ll need to ask questions. If you are learning this at home and don’t have an instructor to help you, we recommend you ask Professor Google and our good friend Stack Overflow (dot com). Between the two of them, you should be able to figure out what each function means, and why we coded things the way that we did. Googling is a very important skill to develop if you intend to be a self-taught coder/programmer.

EXPLORING OUR JAVASCRIPT VIDEO GAME FILES

You can download this week’s version of the game here: https://fvi.edu/wp-content/uploads/2016/10/asteroids.zip

If you look through the files in the folder, you may notice that we changed the name of “playWithCode.html” to “index.html”. The reason is that most modern web servers recognize “index.html” as the web page to display if someone were to access this folder. So, for example, if you were to rename this folder “test,” and then upload the folder to your own website (let’s say your domain is mywebsite.com), then you would be able to simply navigate to mywebsite.com/test, and this awesome javascript video game would automatically open up in your browser.

If that all sounds difficult or complicated to you, don’t worry about it. Just double-click on the “index.html” file, and you’ll be able to play this simple video game in your browser!

Diving into the code files, you can see that most of the important code is in the JavaScript file, playWithCode.js. The .html and .css files are providing a basic structure and styling for the video game, but the JavaScript file provides all the functionality.

READING THE JAVASCRIPT CODE

Reading JavaScript code is not as easy as reading HTML or CSS code. To read a JavaScript program, you’ll need to break it down, analyze it, and think about it like a programmer.

Let’s take a look at the code inside of playWithCode.js, and see what’s going on.

First, let’s take a big picture view.

Three main sections.

There seem to be three main sections in the code, indicated by

// JAVASCRIPT COMMENTS, which look like this.

Comments are notes that make it easier for developers to read the code. They are ignored by the browser. They are written for coders, by coders.

The first section is indicated on line 3 of the playWithCode.js, with the comment:

// GENERATE ASTEROIDS IN HTML DOCUMENT

Line 22 indicates the start of the second section:

// MOVEMENT CONTROLS FOR SHIP

The third section doesn’t have a comment to tell you where to look, or what it does. Can you spot where the third section starts in the code? Hint: It’s a very large function that spans nearly 100 lines of code.

Did you find it? The third section, the “game loop” function, starts on line 89 and goes to the end of the document.

What do these sections do?

These basic functions of these three sections are relatively self explanatory.

The first section generates asteroids on the webpage.

Section #2 defines how the movement controls will work for the space ship.

The third section creates a loop, that runs continuously for the entire time that the game is played. This loop allows the page to update itself every 10 milliseconds, as indicated by the “10” on the last line of the JavaScript file:

setTimeout(“gameLoop()”,10);

Without this constant updating, we wouldn’t be able to see all the movement effects required for this javascript video game to function. Without a moving spaceship and moving asteroids, it wouldn’t be much of a video game, would it?

Diving Deeper

Computer programming is a process of taking a large problem and breaking it down into smaller and smaller chunks, until the problem is manageable. If you were to look at the entire JavaScript file as a whole, it would look very confusing. Breaking it down into three sections makes it easier to understand.

Now, by breaking it down into smaller and smaller sections, you can understand how this program works, and actually be able to tinker with it yourself. For example, you might see something unfamiliar to you, like the

new Image()

function in the first section of the code. What this function does is somewhat self-explanatory, but if you want to understand exactly what it does and how it creates an image in the HTML document, you can google something like “new Image() javascript” and you will find some answers. The same goes for other functions like toString() and Math.random().

Go ahead and tinker with the code, try to improve the game, and tweak it to your own specifications. We left a few “bugs” in there for you, in case you want to try to figure out how to fix them (notice the lagginess, for example, especially near the end of the game, and after it’s over). Let us know if you have a question, find a bug, or added a new feature to the game! info@fvi.edu