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

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

By Andy Harris

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 simpleGame library handles this by adding getMouseX() and getMouseY() methods to the Scene object. These methods are not always exactly correct, but they are close enough for most game programming.

Any time you want to read a normal mouse, just use the Scene object’s getMouseX() and getMouseY() functions to determine the approximate mouse position.

Most of the time when you want the mouse position, it’s because you’re going to move an object where the mouse is or point an object toward the mouse.

Often, you’ll want to hide the mouse cursor, so you can use the Scene object’s hideCursor() method to hide the cursor. (Of course, you can retrieve the cursor with the showCursor() method.)

If you want to read a touch screen, there’s one more simple step. The simpleGame library has a virtual joystick object called Joy. Create an instance of this class to turn on the touch screen reading features.

Note that the touch interface of mobile devices is not exactly like the mouse, so it needs a different interface. However, once you’ve created a Joy object, the getMouseX() and getMouseY() functions will make touch input act just like a normal mouse.

touchMouse.html hides the normal mouse cursor and moves a ball wherever the mouse is currently pointing. This particular example works with both a traditional browser and a touch screen device.

image0.jpg

The simpleGame library dramatically simplifies the process of working with the mouse pointer by providing some easy method calls. Here’s the code:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
 <meta charset="UTF-8">
 <title>touchMouse.html</title>
 <script type="text/javascript"
   src = "simpleGame.js"></script>
 <script type="text/javascript">
 var ball;
 var game;
 var joy;
 function init(){
  game = new Scene();
  ball = new Sprite(game, "redBall.png", 25, 25);
  ball.setSpeed(0);
  game.hideCursor();
  joy = new Joy();
  game.start();
 } // end init
 function update(){
  game.clear();
  followMouse();
  ball.update();
 } // end update
 function followMouse(){
  x = game.getMouseX();
  y = game.getMouseY();
 
  if (game.touchable){
   // move object a bit higher for touch screens
   y -= 100;
  } // end touch screen test
  ball.setPosition(x, y);
 }
 </script>
</head>
<body onload = "init()">
</body>
</html>

Getting a sprite to follow the mouse is just a matter of knowing what methods to call.

  1. Hide the mouse cursor.

    The Scene object has a hideCursor() method. This is the easiest way to hide the normal mouse pointer. Normally, when you follow the mouse with an object, you mean for that object to act like the new mouse pointer, so you’ll hide the normal arrow.

  2. Create a variable for the virtual joystick.

    If you’ll be working with a touchpad device, you’ll need a variable to contain the virtual joystick object. (If this game will be used only on desktop machines with normal mice, you won’t need the joystick object.)

  3. Initialize the joystick.

    Make an instance of the Joy object in the init() function. Just creating the joystick will tell the engine to expect touch input and map it to the normal mouse commands.

  4. Add a followMouse() function.

    It’s generally good to create a new function to handle input. The followMouse() function will tell the object to follow the mouse. Of course, if you’re building an object that follows the mouse, you can make this a method of that object if you prefer.

  5. Use getMouseX() and getMouseY() methods.

    The Scene object has methods called getMouseX() and getMouseY(). Use these methods to get the X and Y coordinates of the mouse on the scene. Note that the coordinates are not always exact.

  6. Check to see if you have a touch screen.

    The Scene object has a touchable property that is true if the browser has a touch screen. You don’t normally want the object to be hidden by your finger, so often you’ll want to offset an object when you’re using a touch screen for input.

  7. Move the object higher than your finger.

    In a touch screen environment, you normally want the sprite to still be visible, so you’ll often offset the Y axis by some amount so it isn’t obscured by the player’s finger. Subtract some value from Y to get this effect.