HTML5 Game Development: Adding Vibration API

If you are a HTML5 web game developer, and you are more targeted toward mobile gamer than desktop gamer, you may probably want to enrich your HTML5 game by adding ‘vibration’ features.

Among the HTML5 API, there is a API called “Vibration API”. The “Vibration API” allows you to command the device using JavaScript, to vibrate in a pattern for a given duration. Let’s say we are playing a game, where we can tap to shock a creature, so in this case we want to vibrate the device every time when the creature is being shocked.

View Demo

In this article, I’ll show you the simple usage of Vibration API in your web game.

Tutorial Details

Difficulty: Beginner
Technology: HTML5 Vibration API
Supported Browser: Google Chrome for Android

Step 1: The HTML & CSS

Following is the HTML structure & CSS of our sample game:

<!DOCTYPE>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Demo: Game Development Adding Vibration API | onlyWebPro</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <style>
        .wrapper {
        position: relative;
        margin: 0 auto;
        width: 320px;
        }

        #action_tap {
        background: none;
        position: absolute;
        top: 0;
        z-index: 2;
        height: 375px;
        width: 320px;
        }

        #game_graphic {
        background: url(vibrate_00.gif);
        height: 375px;
        width: 320px;
        }

        #game_graphic.animate {
        background: url(vibrate_01.gif);
        }
        </style>
        <div class="wrapper">
            <div id="game_graphic"></div>
            <div id="action_tap"></div>
        </div>
    </body>
</html>

We load jQuery core library from Google CDN and we have 2 important elements in the HTML above: #game_graphic & #action_tap. The #action_tap is a dummy element to receives the input (tap) from gamer.

When gamer tap on the #action_tap element, we will use JavaScript to change the electric shocking graphic on the #game_graphic element & vibrate the device once.

Step 2: Detecting Vibration API Support

It’s always good to check for the presence of API support before using it; Following is how you can detect the Vibration API’s presence:

if (window.navigator && window.navigator.vibrate) {
    // write our vibrate code here
} else {
    alert('not supported vibrate');
}

Step 3: Change the #game_graphic element

Following are the images that we are going to use for our game: idle (vibrate_00.gif) & electric shocking (vibrate_01.gif).

The #game_graphic element contains a background image (vibrate_00.gif) which has been defined in the CSS.

When gamer tap on the #action_tap element, we will add a new class ‘.animate’, & we will create a JavaScript timer to remove the ‘.animate’ after 500 milliseconds.

*Please be noted that the ‘.animate’ class contains CSS background image: (vibrate_01.gif) animated gif electric shocking graphic.

Here is how our JavaScript looks like:

$(document).ready(function(){
    if (window.navigator && window.navigator.vibrate) {
        var timer;
        $('#action_tap').click(function(){
            $('#game_graphic').addClass('animate');
            timer = setTimeout(function() {
                $('#game_graphic').removeClass('animate');
            }, 500);
        });
    } else {
        alert('not supported vibrate');
    }
});

Step 4: Using Vibration API

The navigator.vibrate function accepts either a single number or an array of numbers for a series of vibrations. Let’s say we want to vibrate once for 200 milliseconds when gamer tap on the creature in the game, so we will write our code as below:

$(document).ready(function(){
    if (window.navigator && window.navigator.vibrate) {
        var timer;
        $('#action_tap').click(function(){
            window.navigator.vibrate(200);
            $('#game_graphic').addClass('animate');
            timer = setTimeout(function() {
                $('#game_graphic').removeClass('animate');
            }, 500);
        });
    } else {
        alert('not supported vibrate');
    }
});

Now, save your document & load your HTML file in mobile Google Chrome. Then tap to shock the creatures in the game! 😀

Conclusion

You’ve just learned about HTML5 Vibration API & how to use it creatively to build a fun & exciting mobile web game 🙂

Have you already implement HTML5 VIbration in your project? If you haven’t already, please try to implement the HTML5 Vibration API in your next project!