Creating games for the web has never been easier. There are countless options. You can make games in HTML5 using CSS, JavaScript and the ever-popular Canvas element. Or, you can use any number of game engines designed to create Internet-based games.

My current favorite tool for creation of online games is Construct 2. There are many game engines out there, but Construct 2 is my favorite because of the low cost, and the fact that Scirra (the maker of Construct 2) does not charge a royalty for games you sell or distribute using their engine. Many popular game engines want a chunk of your earnings if you create the next big internet gaming sensation. Scirra is happy to sell you a hobbyist or professional license. That is why you will see Construct 2 favored on this site.

Just because Construct 2 is favored, don’t expect TypeScript, JavaScript, Angular, and Node.js to be ignored. Making more advanced games, even with Construct 2, requires some basics knowledge of web programming. We’ll cover other types of web programming with an emphasis on game creation and tutorials that create simple games.

Now, let’s get your first game made with a brief Construct 2 game creation tutorial.

First you are going to need a copy of Construct 2 from Scirra’s site. Scroll down to the bottom of the page, and select Stable Release under the Download section.

Construct 2 has three purchase options.

First, you can try Construct 2 for free. This version limits your ability to make games, but gives you a chance to “try before you buy.” It’s a wonderful way to get your feet wet in the game creation industry without breaking the bank.

Second, you can buy a personal license. This option allows you unlimited non-commercial use of Construct 2. Non-commercial is currently defined by Scirra as anything that makes you a total of less than $5000—that would be total from all your Construct 2 sales and ads for all your games.

Third, … Professional licenses are required when you make $5000 or more off your game creations. I consider obtaining a professional license to be an achievement every game creator should work toward.

There is a fourth option of a site-wide license for schools and non-profits. You’ll have to inquire about that one with Scirra.

So, back to the download. Get the latest stable release of Construct 2 from Scirra’s site.

Construct 2 is a Windows application. However, Virtual Box and a current LEGAL copy of Windows OS will allow you run Construct 2 on a modern Mac or other computer. I do much of my Construct 2 game development on Macs.

Construct 2 requires Windows to run, but the games created with Construct 2 can run on any type of computer, tablet or smart phone you can imagine. You can distribute games created with Construct 2 to a wide variety of app stores. I tend to distribute my games online as single web pages, so that is what you’ll see mostly here. (Hence the title of the site, Making Games Online.)

Once you download Construct 2, install it and run it. I strongly recommend purchasing a license for it, too. All the tutorials on this site assume you are using a licensed version of Construct 2. Though, many of the games we make will be simple enough to be made with the free version of Construct 2.

Making Your First Online Game

The first game we’ll make is a simple retro space shooter called Space Junk. The online game we’re making will belong to the Asteroids’ genre of games. The backstory for our game is, …

NASA needs you to clean up the space junk orbiting Earth! Keep shooting. They’ll keep orbit filled with junk for you. Good luck not dying!

If you want to skip ahead and see the online game we’re making, click here.

Open up Construct 2, and you should see a menu similar to this one.

This is a good place to start creating a new project. Click New Project under the Start section. This opens up a list of templates to start a online game new project with.

Search for the asteroid movement template. This will give us a pre-made triangular ship, and pre-setup movement rules for the ship.

After selecting the Astroids style movement example, create a new project. The first thing you’re likely to see is a set of events that describe the spaceship’s movement.

Looking over your new Event Sheet, you’ll see events defined for all the arrow keys. Up and down define the acceleration of your triangle ship. Left and right define the rotation of your ship. The space bar event defines shooting bullets.

On the left hand side of your Construct 2 window, you will see the project’s properties. Go ahead and change the Name of the project to “Space Junk”. You can include your name under Author and your website and email address, if you like.

Save your project to a new folder named space_junk_v1 so you don’t lose all that hard work.

At this point, you can preview your game. There isn’t much yet, but we’ll fix that, soon.

Click the play button in the top left corner of your Construct window. It is the circle with a triangle in it. You can start up the game in a web browser and use the arrows and spacebar to see what all you can do.

Adding Cannon Fodder

It’s all fun and games flying around and shooting your spaceship’s cannons. But, let’s add something to shoot at. We need some cannon fodder.

Click the image above to download it to your computer. Then we’ll add it to the game as some NASA junk to shoot. You’ll want to save the file somewhere that makes sense, like in a folder in the directory you are using as the root for your game’s project.

Now right click in the Objects area of Construct 2 and select Insert new object.

That results in the Insert New Object dialog showing up.

Now our goal is to have some of NASA’s space junk to shoot at. Well, … It’s really just a PNG showing a garbage bag, but that will work for this game. Pictures you shoot at in video games are called sprites, so we want to find the Sprite object and insert it.

Now you have a shiny new garbage sprite in your game. Unfortunately, it doesn’t look like garbage, yet. Don’t worry! We’ll have your shiny new sprite looking like garbage in a jiffy.

Track down your Sprite in the Object types section of the Project pane in Construct 2’s window.

Double click the Sprite to open up the sprite editor.

You may be disappointed to find out that we don’t have anything to look at. No problem. Load your image by clicking the folder icon in the top left hand corner of the Construct 2 Sprite Editor and loading your garbage PNG.

Now, you should see that your sprite has something more interesting to look at than a blank box.

Click the ‘X’ in the upper right-hand side of the editor to close it. You should see that your Sprite object in the Properties pane looks a little more interesting.

Go ahead and drag the sprite over to the central window and add some garbage to your space junk game. In fact, do it a few times. and use the corner  handles and central handles to resize the sprites and rotate the sprites, just to give yourself a little variety.

Remember to save what you’ve done and run the game to test it out.

Making Things Go Boom

You should have noticed that nothing happens when you shoot the garbage bags or fly into them. That’s easily corrected.

Adding Movement

It sure would be more fun to shoot moving targets! Let’s make the sprites move around a bit.