How to Add Buttons to Your HTML5 Game for Mobile Access - dummies

How to Add Buttons to Your HTML5 Game for Mobile Access

By Andy Harris

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 browser, but most mobile devices do not have keyboards. The first problem is to figure out how to get user input when there’s no keyboard.

image0.jpg

The GameButton custom button object begins with the features of a standard HTML button but then adds a few tricks to make it suitable for gaming. You can activate the button with a regular mouse or with the touch controls, making it ideal for games that can be played on both types of devices. The button.html page illustrates the button in action:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>button.html</title>
 <script type="text/javascript"
   src = "simpleGame.js"></script>
 <script type="text/javascript">
  var btnMove;
  var game;
  var ball;
  function init(){
   game = new Scene();
   game.setSize(200, 200);
   ball = new Sprite(game, "redBall.png", 25, 25);
   ball.setSpeed(0);
   ball.setPosition(100,100);
   btnMove = new GameButton("Move");
   btnMove.setPos(70, 150);
   btnMove.setSize(60, 30);
   game.start();
  } // end init
  function update(){
   game.clear();
   checkButtons();
   ball.update();
  } // end update
  function checkButtons(){
   if (btnMove.isClicked()){
    ball.setSpeed(3);
   } else {
    ball.setSpeed(0);
   } // end if  
  } // end checkButtons
 </script>
</head>
<body onload = "init()">
</body>
</html>

As usual, the new and interesting elements are indicated in bold. Here’s how you add a game button to a game:

  1. Create a variable for the button.

    Like any other game element, you begin by creating a variable to refer to the button.

  2. Build the GameButton object.

    Build the GameButton object in the init() method. The single parameter indicates the button’s caption.

  3. Set the button’s size and position.

    You’ll want to think a bit about how your gameplay will work on mobile devices. Place your buttons where they can easily be reached by the player without blocking too much of the view. Note that you’ll also want to make the buttons big enough to be pressed during the heat of the game. (Onscreen buttons are much better for tablet-based games.)

  4. Check button status during update().

    Just as you normally check keyboard status during the update() function, you can also call a function to check your button status. Of course, you’ll need to write this function.

  5. Read the button’s isClicked() method.

    If the button is currently being pressed, the value of isClicked() is true. If the button is not currently being pressed, isClicked() returns false. Use this method to determine the current state of each button and act accordingly.

  6. Treat a button much like the keyboard.

    Because testing the buttons ultimately returns Boolean (true or false) values, checking for buttons usually feels a whole lot like checking for the keyboard.

  7. Consider adding buttons only when necessary.

    If you want, you can design a game to display (and test) buttons only when a touch screen is available. The Scene object has a special variable called touchable. This variable is true if the library senses a touch screen, and false otherwise. You can use this variable to generate a custom interface that adapts to the playing environment.

Normally, you’ll add several buttons to your interface, one to replace each key you expect the user to use (for example, arrows and the space bar). In this way, you can create a virtual keyboard on the screen. You may need to test the size and position of each key to get a comfortable gameplay experience.

Note that the caption of the button is ordinary HTML, so if you want to make your buttons based on images, you can simply add the appropriate <img> tag as a button caption.