Sorted by:  

How to Build Sprite Objects for Your HTML5 Game

To make very powerful HTML5 games, you'll want to be able to build your own sprites that do exactly what you want them to do. After you make an object, you can give it characteristics and behavior. [more…]

How to Add Properties to Objects in Your HTML5 Game

One of the most interesting things about HTML game objects is that they are variables that can contain other variables. When a variable exists in the context of an object, the variable is called a [more…]

How to Add Methods to Classes in Your HTML5 Game

Properties describe the characteristics of an object in your HTML 5 game, and methods describe the behavior. A method is a function associated with an object. You build methods very much like creating [more…]

How to Add Sound to Your HTML5 Game

Sound effects have long been one of the biggest weaknesses of the web as an HTML gaming platform. Web browsers had very inconsistent and troublesome audio capabilities. Fortunately, HTML5 solves the sound [more…]

How to Add Collisions to Your HTML5 Game

The most interesting things in HTML5 video games happen when sprites conk and collide into each other. Game engines normally have some sort of tool for testing whether two sprites are overlapping. This [more…]

How to Add Timing to Your HTML5 Game

Often the passage of time will be an element in your HTML5 games. Racing games are all about speed, or you may have a time limit for performing some task. The [more…]

How to Plan Your HTML5 Game

The first part of HTML5 game creation is planning. It's pretty hard to program a game in the best of circumstances, and it's nearly impossible if you don't know exactly what you're trying to accomplish [more…]

How to Build a Library of Reusable Objects for Your HTML5 Game

There will be times when you will reuse objects multiple times in your HTML5 games and they're going to stay about the same. So, it makes sense to put them in a library for easy reuse. That's exactly what [more…]

How to Use the Reset Method for Your HTML5 Game

When two objects collide in your HTML5 game, it often means something important. This is where the reset method comes in. You'll often want to change the score, play a sound, reduce the number of lives [more…]

How to Work with Multiple Objects in Your HTML5 Game

It would be nice to have more than one object in your HTML5 game. Multiple objects make the game a bit more exciting and adds some depth. One object bumping around by itself isn’t much fun. What good are [more…]

How to Reset Your HTML5 Game

Of course, if your HTML5 game can stop, you need a way to restart it. The easiest way is to use a dirty trick. Because the game is in a web page, all you have to do is refresh the web page in the browser [more…]

How to Add Realistic Motion to Your HTML5 Game

Take a look at space.html. This simple game provides a good example for applying realistic motion to your HTML5 game. It utilizes the control scheme made famous in the classic games [more…]

How to Add Drag Effects to Your HTML5 Game

The vector addition principle can be useful to your HTML5 game in many ways. For one, it can add drag effect and thus, lead to more accurate land-vehicle behavior. Imagine your car is stuck in a bad neighborhood [more…]

How to Add Drift Effects to Your HTML5 Game

You can use force vectors in an interesting way in your HTML5 game. Many racing games include skidding or drifting mechanisms. Getting this behavior exactly right requires very sophisticated mathematics [more…]

How to Add Gravity to Your HTML5 Game

Gravity calculations have been a part of HTML5 video games from the very beginning. There are actually two kinds of gravity to consider. In platform-style games, the player is close to a planet, and all [more…]

How to Add Missiles to Objects in Your HTML5 Game

Car dealerships are touchy about installing weaponry in your ride, but that's why people become game programmers. So you can add missiles to your HTML5 game objects. If you want missiles in your mini-van [more…]

How to Build a Multi-State Animation in Your HTML5 Game

With all this motion going on in your HTML5 game, you're sure to want multiple sophisticated animations. You can use the changeImage() or setImage() function [more…]

How to Put Your HTML5 Game on a Server

To put your HTML5 game on a web server, just do a quick web search for free web hosting, and you'll find plenty of places to put your code online for free or for a very low cost. For current purposes, [more…]

How to Make Your HTML5 Game App-Ready

Of course, your HTML5 games are really web pages, but you're going to make them work in a way that also makes them act like apps. You need to do a couple of things. You can add an icon to your game so [more…]

How to Add Buttons to Your HTML5 Game for Mobile Access

The simpleGame library has a handy feature called the GameButton for adding a button to the screen of a mobile device for your HTML5 game. The keyboard is one of the easiest ways to get input in a standard [more…]

How to Add Mouse Response to Your HTML5 Game for Mobile Access

Because web browsers are inconsistent in the way they report the mouse's position, mouse input in normal JavaScript is tricky in the HTML gaming world. The [more…]

How to Create a Virtual Joystick for Your HTML5 Game

Many touch-based HTML5 games use a virtual joystick mechanism. The user touches the screen to begin input, and then swipes to provide input. Swiping to the left is read just like moving a joystick to the [more…]

How to Use the Canvas Tag in Your HTML5 Game

The simpleGame engine's Scene object uses one of the most exciting new features of HTML5 — the canvas tag. This exciting tag allows you to draw images and other elements directly on a portion of the browser [more…]

How to Create an Animation Loop in Your HTML5 Game

If the canvas defines the space in an HTML5 game, an animation loop defines time. Most JavaScript games use a mechanism called setInterval() to cause repeated behavior. This function takes two parameters [more…]

How to Use the Transformations Feature in Your HTML5 Game

The Sprite class has the capability to move and rotate in your HTML5 game, but these features are not built into normal JavaScript. You can use the transformation features of the canvas tag to get this [more…]


Sign Up for RSS Feeds

Computers & Software