Skip to main content
main-content
Top

About this book

Building JavaScript Games teaches game programming through a series of engaging, arcade-style games that quickly expand your JavaScript and HTML5 skills. JavaScript is in the top ten most-used programming languages world wide, and is the basis for applications that can run in any modern browser, on any device from smart phone to tablet to PC. Especial emphasis is given to touch-based interface, but all games also run using a regular mouse and keyboard setup.

The four games you’ll develop from reading this book are:

Painter Jewel Jam Penguin Pairs Tick Tick

These four games are casual, arcade-style games representing the aim-and-shoot, puzzle, maze, and platform styles of game play.

The approach in Building JavaScript Games follows the basic structure of a game rather than the syntax of a language. From almost the very first chapter you are building games to run on your phone or other device and show to your friends. Successive projects teach about handling player input, manipulating game objects, designing game worlds, managing levels, and realism through physics. All told, you’ll develop four well-designed games, making Building JavaScript Games one of the most enjoyable ways there is to learn about programming browser-based games.

The final chapters in the book contain a very nice bonus of sorts. In them you will find excerpts from interviews with two prominent people from the game industry: Mark Overmars, who is CTO of Tingly Games and creator of GameMaker, and Peter Vesterbacka, the CMO of Rovio Entertainment - the creators of the Angry Birds franchise. Their insight and perspective round off what is already a fun and valuable book.

Table of Contents

Getting Started

Frontmatter

Chapter 1. Programming

Abstract
This chapter talks about how programming languages have evolved over time. Since the rise of the Internet in the 1990s, a lot of languages and tools have been developed to support it. One of the best-known languages is HTML, which is used to create web sites. Together with JavaScript and CSS style sheets, it allows the creation of dynamic web sites that can be displayed by a browser. I discuss HTML and JavaScript in detail in this chapter, and you see how to create a simple web application that uses the HTML5 canvas in combination with JavaScript.
Arjan Egges

Chapter 2. Game Programming Basics

Abstract
This chapter covers the basic elements of programming games and provides a starting point for the chapters that follow. First, you learn about the basic skeleton of any game, consisting of a game world and a game loop. You see how to create this skeleton in JavaScript, by looking at various examples such as a simple application that changes the background color. Finally, I talk about clarifying your code by using comments, layout, and whitespace in the right places.
Arjan Egges

Chapter 3. Creating a Game World

Abstract
This chapter shows you how to create a game world by storing information in memory. It introduces basic types and variables and how they can be used to store or change information. Next, you see how to store more complicated information in objects that consist of member variables and methods.
Arjan Egges

Chapter 4. Game Assets

Abstract
The previous chapters have shown you how to make a very basic game application by writing your own game loop methods as a part of an object called Game. You have seen which instructions in JavaScript retrieve the canvas as well as the canvas context, which is used to perform operations on the canvas. You have seen a few simple examples where you changed the background color. You also made a rectangle move over the screen by using the current system time in combination with the game loop methods. This chapter shows how to draw images on the screen, which is the first step toward making nice-looking games. In computer graphics, these images are also called sprites. Sprites are generally loaded from a file. This means any program that draws sprites is no longer simply an isolated set of instructions, but relies on game assets that are stored somewhere. This immediately introduces a number of things that you need to think about:
Arjan Egges

Creating Colorful Games

Frontmatter

Chapter 5. Knowing What the Player Is Doing

Abstract
In this chapter, you start to create a game called Painter. In this game, you need to show sprites that move on the screen. You’ve already seen a few examples of loading and displaying sprites. Also, you’ve seen that it’s possible to use the current time information to change the position of a sprite. You build on these examples to begin creating Painter. Furthermore, you learn how to deal with player input in your game. You see how to retrieve what the player is doing and how the game world changes depending on that information. You start with a simple extension of the FlyingSprite program that draws a balloon at the position of the mouse pointer. The next chapter examines other types of input, such as keyboard and touch input.
Arjan Egges

Chapter 6. Reacting to Player Input

Abstract
In this chapter, you see how your game program can react to button presses. In order to do this, you need an instruction called if that executes an instruction (or a group of instructions) when a condition is met. You also learn to structure your code a bit more into objects and methods.
Arjan Egges

Chapter 7. Basic Game Objects

Abstract
In this chapter, you start organizing the source code of the Painter game a bit more. This is necessary because the source code of a game contains many lines of code. In the previous examples, you began grouping variables over different objects (such as Canvas2D or cannon). In this chapter, you continue structuring your code by using more objects and by splitting the code over separate files.
Arjan Egges

Chapter 8. Game Object Types

Abstract
In the previous chapters, you’ve seen how to create a game world that contains a few different game objects, such as a cannon and a ball. You’ve seen how to let game objects interact with each other. For example, the ball object updates its color according to the color of the cannon. In this chapter, you add falling paint cans to the game world. However, before you can do that, you have to reexamine how to create and manage objects in JavaScript. I introduce the class concept as a means to create multiple game objects of a certain type. Then, you apply the class concept to other parts of the Painter game application. Furthermore, you learn how to incorporate randomness in your games.
Arjan Egges

Chapter 9. Colors and Collisions

Abstract
By now, you’ve implemented quite a large part of the Painter game. You’ve seen how to define game object classes by using the prototype mechanism. By using these classes, you gain more control over how game objects are structured and how you can create game objects of a certain type. You separate these class definitions over different files. That way, when you need a cannon or a ball with the same behavior in a future game you’re working on, you can simply copy these files and create instances of these game objects in your game.
Arjan Egges

Chapter 10. Limited Lives

Abstract
In this chapter, you make the Painter game more interesting by giving the player a limited number of lives. If players miss too many paint cans, they die. The chapter discusses how to deal with that and how to display the current number of lives to the player. In order to do the latter, you learn about a few programming constructs for repeating a group of instructions several times.
Arjan Egges

Chapter 11. Organizing Game Objects

Abstract
You’ve seen in the previous chapters how you can use classes to group variables that belong together. This chapter looks at the similarities between the different types of game objects and how you can express these similarities in JavaScript.
Arjan Egges

Chapter 12. Finishing the Painter Game

Abstract
In this chapter, you finish the Painter game by adding a few extra features such as motion effects, sounds, and music, and maintaining and displaying a score. Finally, you learn about characters and strings in a bit more detail.
Arjan Egges

Jewel Jam

Frontmatter

Chapter 13. Adapting to Different Devices

Abstract
This chapter deals with adapting games to different devices. Until now, you’ve been developing examples that will only work on devices that have a keyboard and a mouse, such as laptop or desktop machines. One of the nice things about JavaScript programs is that they also run on smartphones and tablets, which currently is a booming market. Making your games run on such platforms will result in a lot of extra players for your games. In order to play games on smartphones or tablets, you need to handle touch input, in a way very similar to dealing with keyboard and mouse input.
Arjan Egges

Chapter 14. Game Objects in a Structure

Abstract
In the previous chapter, you saw how you can use arrays to represent lists of things. For example, you used an array to keep track of the locations where the player is touching the touch screen, or how many keys the player is currently pressing on the keyboard.
Arjan Egges

Chapter 15. Gameplay Programming

Abstract
This chapter looks into the gameplay programming of the Jewel Jam game. First it talks about interaction between game objects. Then it introduces a few new game objects that are used in the game. Finally, you tackle the main gameplay element of this game: finding combinations of jewels and handling them properly.
Arjan Egges

Chapter 16. Game States

Abstract
In the previous chapter, you programmed the main gameplay elements of the Jewel Jam game. However, the game as it stands is far from complete. For example, nothing happens when the jewel cart disappears from the screen. Also, when you start the program, the game immediately begins without any warning. What is still needed is a way to incorporate menus and overlays in the game so the player can change settings, get help, or start playing the game. When the player is, for example, in a menu screen, the type of interaction with the game is very different from when the player is solving a level or trying to survive as long as possible. When programming a game, you have to think about how to incorporate these different game states and switch between them.
Arjan Egges

Chapter 17. Finishing the Jewel Jam Game

Abstract
In this chapter, you finish the Jewel Jam game. As a first step, you give the player extra points when multiple combinations of three jewels happen. Second, you add a nice visual effect by showing glitters on the jewels in the game. Finally, you add sound and music.
Arjan Egges

Penguin Pairs

Frontmatter

Chapter 18. Sprite Sheets

Abstract
In this chapter, you start building the first elements of the Penguin Pairs game. This game is quite a bit more complicated than the previous games. You can see this by looking at the number of game assets it uses. Just as you did in the Jewel Jam game, you use images containing several different sprites. This technique is used in many games. In the Jewel Jam game, you used it to store a strip of jewels in a single sprite. However, using strips isn’t always a good idea. Especially when an image contains many different sprites in a strip, the strip may become too long for the graphics hardware to handle. This can be solved by storing sprites in a sheet instead, consisting of multiple rows and columns. Figure 18-1 shows an example of such a sprite sheet.
Arjan Egges

Chapter 19. Menus and Settings

Abstract
In the Jewel Jam game, you saw a few basic examples of adding GUI elements to a game such as a button or a frame. In this chapter, you add a few more GUI elements to the Penguin Pairs game, such as an on/off button and a slider button. You also see how to read and store game settings, such as music volume and whether hints are allowed.
Arjan Egges

Chapter 20. Game State Management

Abstract
Normally, you don’t immediately start playing when a game application starts. For example, in the Jewel Jam game, you see a title screen before playing. More complicated games have menus for options, menus for selecting different levels, screens to display the high score after finishing a level, a menu to select different characters and attributes, and so on. In Jewel Jam, adding a title screen wasn’t that difficult, because the title screen itself had very little interaction. However, when you look at the example in the previous chapter, you can see that building a screen with a few options and controls can result in quite a lot of code. You can imagine that when you add more menus and screens to the game, it’s going to be a pain to manage which objects belong to which screen and when they should be drawn or updated.
Arjan Egges

Chapter 21. Storing and Recalling Game Data

Abstract
Many games consist of different levels. Especially in casual games such as puzzles and maze games, a game may have several hundreds of levels. Until now, your games have relied on randomness to keep the gameplay interesting. Although randomness is a powerful tool to achieve replayability, in a lot of cases game designers want more control over how a game progresses. This control is generally achieved by designing levels. Each level is its own game world in which the player has to achieve some sort of objective.
Arjan Egges

Chapter 22. Pairing the Penguins

Abstract
In this chapter, you program the main gameplay for the Penguin Pairs game. You learn how to move penguins around on the board and what to do when a penguin collides with another game object such as a shark or another penguin.
Arjan Egges

Chapter 23. Finishing the Penguin Pairs Game

Abstract
In this chapter, you finalize the Penguin Pairs game. The first step is to reorganize your code a bit so parts of it can be used more easily by other programs. Then you finish the game by extending the user interface and adding sound effects.
Arjan Egges

Tick Tick

Frontmatter

Chapter 24. The Main Game Structure

Abstract
In this chapter, you lay out the framework for the Tick Tick game. Because of all the work you’ve done for the previous games, you can rely on a lot of preexisting classes. In fact, you build the game on the classes you grouped in the powerupjs namespace/library in the previous chapter. This means you already have a basic design for handling game states and settings, a hierarchy of game objects, and more. You extend the powerupjs library later by adding classes related to animated game objects. You can see these classes in the library; they’re discussed in the next chapter.
Arjan Egges

Chapter 25. Animation

Abstract
In this chapter, you see how to add animations to your game. In the games you’ve developed until now, game objects could move around on the screen, but adding something like a running character to a game is slightly more challenging. In this chapter, you write a program that contains a character walking from left to the right on the screen. The character is controlled by the player pressing the left and right arrow keys. You don’t add touch-interface control in this particular example, but later you see how to control a moving character on touch devices as well.
Arjan Egges

Chapter 26. Game Physics

Abstract
In the previous chapter, you saw how to create an animated character. You also saw how you can load levels and level status from the local storage and how to build a tile-based game world. One of the most important aspects is still missing: defining how the character interacts with the game world. You can make a character move from left to right, but if you simply place the character in the level, it can only walk on the bottom of the screen. This isn’t enough. You want the character to be able to jump on top of wall tiles and fall down if it moves off a wall tile, and you don’t want the character to fall off the edge of the screen. For these things, you need to implement a basic physics system. Because it’s the character interacting with the world, you implement this physics in the Player class. There are two aspects to dealing with physics: giving the character the ability to jump or fall, and handling collisions between the character and other game objects and responding to these collisions.
Arjan Egges

Chapter 27. Intelligent Enemies

Abstract
As the next step in developing the Tick Tick game, let’s introduce some peril to the player by adding dangerous enemies. If the player touches an enemy, the player dies. The enemies generally aren’t controlled by the player (that would make it too easy). Therefore, you need to define some kind of smart (or stupid) behavior. You don’t want these enemies to be too smart: the player should be able to complete the level. After all, that is the goal of playing a game: winning it. What is nice is that you can build different types of enemies that exhibit different types of behavior. As a result, the player has different gameplay options and must develop different strategies to complete the level.
Arjan Egges

Chapter 28. Adding Player Interaction

Abstract
In this chapter, you add more interaction between the player and the objects in the level. Currently, the player can walk around, and a basic physics system allows the player to jump, collide with wall tiles, or fall out of the screen. First you look at a very simple kind of interaction: collecting water drops. Then you see how to create the behavior that allows the player to slide over ice. Finally, you focus on the part of the program that deals with the various player-enemy interactions in the game.
Arjan Egges

Chapter 29. Finishing the Tick Tick Game

Abstract
In this chapter, you finish the Tick Tick game. First you add a timer such that the player has a limited amount of time to complete each level. Then you add a few mountains and clouds to the background to make the game visually more interesting. Finally, you progress through the levels by adding two extra game states: the “game over” state, and the “level finished” state.
Arjan Egges

Into the Great Wide Open

Frontmatter

Chapter 30. Producing Games

Abstract
This chapter covers several topics related to producing games. I talk first about designing HTML5 games and then about development. I briefly cover game asset production as well. Finally, you see the operational aspects of producing games, such as how to collaborate with multiple people on the same code and how to work on a game-production team. Both Mark Overmars and Peter Vesterbacka share thoughts and tips about these topics throughout the text.
Arjan Egges

Chapter 31. Publishing Games

Abstract
■■■
Arjan Egges
Additional information