How to Create User Interaction in Your HTML5 Game

The biggest difference between an HTML5 game and an animation is user interaction. If you want to make it a game, you need the user to get involved. And here’s how to do that.

image0.jpg

Here is the code:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>car.html</title>
 <script type="text/javascript"
   src = "simpleGame.js"></script>
 <script type="text/javascript">
 var scene;
 var car;
 function init(){
  scene = new Scene();
  car = new Sprite(scene, "car.png", 50, 30);
  car.setAngle(270);
  car.setSpeed(0);
  scene.start();
 } // end init
 function update(){
  scene.clear();
  //check keys
 
  if (keysDown[K_LEFT]){
   car.changeAngleBy(-5);
  } // end if
 
  if (keysDown[K_RIGHT]){
   car.changeAngleBy(5);
  } // end if
 
  if (keysDown[K_UP]){
   car.changeSpeedBy(1);
  } // end if
 
  if (keysDown[K_DOWN]){
   car.changeSpeedBy(-1);
  } // end if
 
  car.update();
 } // end update
 </script>
</head>
<body onload = "init()">
 <h1>Drive the car!</h1>
</body>
</html>

How to use the keyboard for your game

Somehow the user needs to interact with the page. The keyboard is one of the easiest input elements to use. simpleGame provides a couple ways to check the keyboard, but the most powerful technique uses a special variable called keysDown. Here's how it works:

  • keysDown is a global array. This variable is automatically created when you build a scene. It is an array of Boolean values — that means each element can be only true or only false.

  • There is a constant defined for each key. Each key on the standard keyboard has a special constant already defined. For example, K_A represents the A key, and K_B represents the B key.

  • keysDown tells the status of every key. If the A key is currently pressed, keysDown[A] will contain the value true. If the A key is not pressed, keysDown[A] will contain the value false.

  • You can determine the current status of any key. Just check the keysDown[] array to determine the current status of any key.

  • You can have multiple keys down at once. The primary purpose of this technique is to allow for multiple keys to be pressed at once. In normal computing, it's unusual to have more than one key at a time. In gaming, it's very common to press more than one key at a time, so you need a mechanism that can support this expectation.

How to move the game sprite

Essentially, a sprite has a position, which is controlled by X and Y properties. If you remember from math class, X represents horizontal values, and Y is for vertical location. The origin (0, 0) is the top-left corner of the screen.

X coordinates work just like you remember from math class. As X values get larger, the sprite moves to the right. In computer graphics, Y acts a little different than it did in math class. Most display hardware scans from top to bottom, so Y is 0 at the top of the screen and increases as you move downward.

Note that the maximum height and width are stored in variables: scene.height and scene.width.

image1.jpg

All of the various movement methods are really about manipulating X and Y. You can set these values manually (setPosition(), setX(), and setY()), or you can change the values (changeXby(), changeYby()). Each of these methods acts immediately, so you can use them to direct the position or motion of the sprite.

Some of these functions seem similar to each other. For example, changeXby() looks a lot like setChangeX(). These functions have a subtle but important difference. The changeXby() function changes the value of X one time. If you want the change to continue, you have to keep calling this function.

The setChangeX() function is more powerful because you can call it one time, and it repeatedly changes x by whatever value you determine until you call setChangeX() again.

For most sprites, you really want to simply give the sprite an angle and a speed, and let it go. The sprite object has exactly the methods you need for this behavior. setAngle() allows you to determine the direction the sprite will go, and setSpeed() lets you specify the speed to go in that direction. Like most motion functions, there are also changeAngle() and changeSpeed() methods.

How to control the car in your game

The keysDown mechanism can be combined with the motion methods to easily control your car. Here's the relevant code from update() again:

 function update(){
  scene.clear();
  //check keys
 
  if (keysDown[K_LEFT]){
   car.changeAngleBy(-5);
  } // end if
 
  if (keysDown[K_RIGHT]){
   car.changeAngleBy(5);
  } // end if
 
  if (keysDown[K_UP]){
   car.changeSpeedBy(1);
  } // end if
 
  if (keysDown[K_DOWN]){
   car.changeSpeedBy(-1);
  } // end if
 
  car.update();
 } // end update

The actual coding is pretty easy to understand:

  1. Clear the scene.

    As usual, the first order of business in the update() function is to clean up the playroom. Make sure you've erased the previous frame before you do anything else.

  2. Check for a left-arrow press.

    Use the keysDown mechanism to determine whether the left arrow is currently pressed.

  3. If the left arrow is pressed, turn the car left.

    If the user is currently pressing the left-arrow key, turn the car five degrees counter-clockwise. Use the changeAngleBy() method to change the car's visual appearance as well as the direction it's travelling.

  4. Repeat for the right arrow.

    The right arrow check is similar, but this time turn the car five degrees clockwise.

  5. Use the up arrow to accelerate.

    If the user presses the up arrow, change the car's speed. Use a positive value to accelerate the car. It won't take much because this code is being checked 20 times a second.

  6. Slow the car down with the down arrow.

    Use a similar mechanism for the down arrow. Change the speed by a negative value to slow down the car. This approach allows for negative values, and the car will back up if you want.

  7. Draw the car in its new position.

    It's critically important to remember that calling the sprite's motion functions does not change the location of the car! It only changes internal data in the game's memory. You must call the car's update() method to see these changes in action.

  • Add a Comment
  • Print
  • Share
blog comments powered by Disqus
Advertisement

Inside Dummies.com