How to Create the Marble-Rolling Game in Your HTML5 Game - dummies

How to Create the Marble-Rolling Game in Your HTML5 Game

By Andy Harris

This type of HTML5 game is designed specifically for mobile devices with an accelerometer (although it works on a desktop). The idea is to tip the device to move a ball into the blue goal without hitting any of the blocks. Every time the user achieves the goal, the game is redrawn with an additional block, making the game harder and harder.


Manage your game’s dual input

Perhaps the most interesting part of this game is its novel input mechanism. It feels very natural to tilt the screen for ball motion.

  1. Create an Accel object.

    Turn on the accelerometer by creating an instance of the Accel object.

  2. Build a checkAccel() method.

    A method was added to the Ball object that checks the accelerometer.

  3. Get the accelerometer rotation.

    Use the getAX() and getAY() methods to find the amount of rotation around these axes.

  4. Convert rotation to dx and dy values.

    You can use mechanisms to convert rotation to appropriate motion values.

  5. Add an optional keyboard input.

    It’s much easier to debug a program on a desktop than on a mobile device, so you can add an alternate input option so you can test as much of the program as possible before moving to the mobile platform. Use the Scene class’s touchable property to determine whether you’re using a mobile device. This approach also makes the game playable for a wider array of users.

Here’s the code (in the main update() function) for checking which type of input is available:

  //get input from accelerometer or keyboard
  if (game.touchable){
  } else {

And here’s the checkAccel() method of the Ball object:

  tBall.checkAccel = function(){
   //use the accelerometer to get input
   newDX = accel.getAY();
   newDY = accel.getAX();
   newDX *= -5;
   newDY *= -5;
  } // end checkAccel

How to build game obstacles

Another interesting feature of this game is the ever-increasing level of difficulty. Getting the difficulty level of a game correct is very challenging. You want the game to be beatable, but beating the game needs to feel like an accomplishment. One way to achieve this goal is to begin with a very easy level of difficulty and then ramp up until the game becomes more difficult.

For the marble game, use an array of blocks as the obstacle. When the game begins, there are only ten blocks on the screen, so it’s quite easy to get to the target without hitting any blocks. Each time the player reaches the target, the game scene is redrawn with one more block.

The blocks and the goal are drawn at random positions on the screen. However, you need to be careful not to create an impossible situation. The Block object’s reset() method tries to place a block at a random position on the screen.

However, if the block collides with the goal, the game will be difficult to win. Likewise, if the block collides with the ball’s current position, the player will immediately lose. If either of these conditions occurs, the block is redrawn until a legal position is available.

The blocks to overlap each other freely, but you could add this constraint as well. Here’s the block resetting routine:

  tBlock.reset = function(){
   //don't let me overlap the goal or ball
   keepGoing = true;
    newX = Math.random() * this.cWidth;
    newY = Math.random() * this.cHeight;
    this.setPosition(newX, newY);
    keepGoing = false;
    if (this.collidesWith(goal)){
     keepGoing = true;
    } // end if
    if (this.distanceTo(ball)< 150){
     keepGoing = true;
    } // end if
   } // end while loop
  } // end reset

How to improve the marble game

The marble game is quite playable as it is, but any game can be improved. Here are a few suggestions:

  • Add a time limit. Require the user to reach the target at a specified time.

  • Add new kinds of barriers. Barriers of different sizes will change the gameplay.

  • Change the ball’s boundary action. In this version of the game, the ball wraps around the screen. This adds an additional tactical element to the game, but you may prefer to stop at the border.

  • Add powerups. You can always add special elements that temporarily change gameplay. Maybe consider making the ball invincible for a few seconds, or inverting gravity (multiply dx and dy both by -1). You could also temporarily change the size of the ball or have a powerup that resets the current level.

  • Create moving blocks. The game entirely changes if the blocks also move. You’ll probably want them to move very slowly in a random direction because this feature could make the game much harder.

  • Make cosmetic improvements. Of course, you can always add sound effects, a high score mechanism, and improved graphics.