Level-Up Coding

Level 9: You can design and build your own game.

If you have finished the previous level, you have all the skills you need to start making your own game! And hopefully, you have learned a lot about computer programming! Of course, the game you build will have to be a fairly simple 2D game that is controlled by the keyboard or mouse.

In this level, we will give you some ideas for the types of game you can make, and talk about how to get content such as sprite and background images, and sounds.


Game genres

There are many different kinds or genres of video games, as you probably already know. The website Wikipedia lists about 50 different types of video game:

A few of the types of games that you might consider designing are


Drawing Your Own Sprites

One way to get sprite images for your game is to draw them yourself on paper and scan them into the computer. We recommend drawing each sprite on a piece of white paper with no lines using markers. That way, when you scan it you can use white as the background color which can be turned transparent by adding an alpha channel. Also, markers make nice, bold colors that are easy to scan.


Sprites and the alpha channel

You have probably seen that some images (like the ship and robot we have been using) have transparent parts on them. This effect is controlled by a special part of the image called the alpha channel. Unfortunately, some image types, such as jpeg do not store an alpha channel. Two types of images that do store alpha channel are gif and png, so we recommend using those image types. (The ship and robot are png images.)

On many computer systems, you can tell what type an image is by looking at the file extension in the file browser. For example, an image file ending in .png will be a png image.


Scanning sprite images

When you make sprite images, usually, you want to set the background as transparent so that the outline of the sprite is the shape of the object instead of just a rectangle. In the free program GIMP (downloadable from gimp.org), you can do this by going through the following steps:


Example drawn sprite

The following shows an example scan of a sprite image drawn with markers. One nice thing you can see about the scan is that it captures a lot of the detail of the marker. This can help to give a game a hand drawn look.

After scanning the image, I followed the steps above, adding an alpha channel in GIMP and resizing it. The final sprite image is shown here:


Making Pixel Art sprites

A second way to make your own sprites is to draw them in a pixel art editor. This is a drawing program that makes it easy for you to draw small images and control the color of each pixel, and you may find it easier than drawing your sprites by hand. Another fun thing about pixel art is that it can make your game look retro, like a game that came out in the 1980’s or 1990’s.

There are some free online editors for pixel art that allow you to draw sprite images and download them after they are finished. Two of these programs are

I drew the moon sprite below in the pixilart.com editor:


Backgrounds

In the games we are making, we can think of two types of background images. These are:

  1. Background images displayed on the HTML page. This image will be shown on the part of the page outside the canvas. No action takes place on these images, but they help make your game look more complete.

  2. Background images displayed on the canvas. These images are drawn behind the other elements of the game.

Both of these kinds of images can be changed while the game is playing. How do you get original background images? You can either draw them yourself and scan them, or take photos on a phone.


Changing the background during the game

You can change the HTML background while the game is running. That way, you have different background images for different parts of the game! In Javascript code you get the <body> element and set its background image style like this:

    document.body.style.backgroundImage = "url(imageURL)";

where imageURL is the url of an image file. If the image file is saved in the same folder as your HTML file, then you can just use the file name as the URL.


Making a background image for the canvas

To have a background image for the canvas itself, you just make a sprite object like we have before and set its position to (0,0), and its width and height to (canvas.width, canvas.height). Then, you draw the background image before drawing anything else.


Sound effects

So far we have not talked about putting sound effects in your game. There are a number of ways to get sound effects, including:

Once you have the sound effects you want, save them in the same folder as your HTML file, and they can be included on your web page similar to how images are included. Typical file types for sounds include mp3, wav, and ogg.


Playing sounds

To play a sound, you can first include the sound on your web page in an <audio> element, like you did images:

    <audio id="coinSound">
        <source src="coin.wav"></source>
    </audio>

Then, in your Javascript code, you can play the sound by getting the audio element and calling the play() function on it:

    var coinSound = document.getElementById("coinSound");
    coinSound.play();

Adding a scoreboard

One thing that can make a game more fun and interesting is a scoreboard. You can add a scoreboard in a simple paragraph or heading element. In the HTML part of your page after the canvas element, you would have something like this:

    <p id="scoreBoard">score:0, lives:0</p>

Then, in your Javascript, whenever the score or number of lives changes, you would run code to change the scoreboard display by replacing the innerHTML of the scoreboard element:

    var score = gameState.score;
    var lives = gameState.lives;
    var scoreBoardText = "score: " + score + ", lives: " + lives;
    var scoreBoard = document.getElementById("scoreBoard");
    scoreBoard.innerHTML = scoreBoardText;

Terms


Exercise - Make assets for your game

  1. It’s time to start making a complete game! To get started, you should do some design work. Decide what kind of game you want to make, and then collect the assets (image and sound files) that your game will need. This includes:

    • Sprite images for the player
    • Sprite images for all enemies and other objects
    • Background images for the canvas and HTML page
    • Sound files that will be used in your game
  2. Make a folder on your computer for your game. Put all of your game asset files in this folder.


Exercise - Make the HTML page for your game

  1. Make an HTML page and put a canvas element on it:

    • In the folder for your game, start an HTML file that will hold your game code. You may want to start with one of the files from a previous level.

    • In your HTML file, include all of the game images and sounds in <img> and <sound> tags.

    • In your HTML file, put a canvas and other elements such as a game title and scoreboard.

  2. Add a CSS style style sheet to make your game look better.

    • Center the canvas using a <center> tag.

    • Center the title and scoreboard by setting the text-align property.

    • Set the background of the <body> element to a background image if you made one.


Exercise - Write the game logic for your game

Once the HTML and CSS are done you have a basic HTML page for your game complete. The next step is start building the code of your game. There are really 3 parts to the game code: startup, gameplay, and drawing. You should add new things to your game one at a time and test them. If you try to add too much at a time, it will be hard to figure out what’s going on in your code.

  1. The startup code has to initialize everything for your game. The code that does this should be in a set of functions that are called from window.onload. All of the information about the game should be held in a gameState object, as we have been doing.

    • Create a <script> element on the page to hold your code.

    • Add a global gameState object with the code var gameState = {};.

    • Make a window.onload function as we did in earlier levels.

    • In window.onload call functions that will initialize everything about your game world. This includes sprites, score, and the number of lives.

    • Also in window.onload add code that will listen to events that are important in your game such as key presses or mouse clicks.

    • Think about the kinds of data that your game will hold, including what sprites will be on the screen (enemies, shots, trees…), and how they should be organized, such as in different arrays.

    • At the end of the window.onload function, call animateGame.

  2. The gameplay code is the heart of your game. It controls everything that happens when your game is running. Think about all of the events, motions, background changes, sound effects, and interactions that might happen in your game. Write down a list of them.

    • Write an animateGame function as in previous levels.

    • Make a separate function for each motion or interaction to help organize your code. Most of these should be called from animateGame.

    • One way to test it is to print something using console.log when an event occurs. That way you can see if the program is actually responding to the proper events.

  3. Drawing the different parts of the game.

    • Write a drawGame function that is called from animateGame.

    • Add code to draw the different parts of your game one at a time and test them as you go.

    • Add code to play sound effects as needed.

    • If your game changes the background or the scoreboard, write code to do that, and test it as well.


Exercise - Publish your Game on the Web