O'Reilly logo

HTML5 Game Development by Example : Beginner's Guide - Second Edition by Makzan

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – adding touch support

Carry out the following steps to make our game work in a tablet with touch inputs:

  1. In index.html file, we add the following touch controls before the end of the #game-container:
    <div id="left-button" class="touch-control"></div>
    <div id="right-button" class="touch-control"></div>
    <div id="restart-button" class="touch-control">Restart</div>
  2. We can also add a <meta> tag inside the <head> tag to control the viewport to fit the game into the iPad's 1024 px width.
    <meta name="viewport" content="width=device-width, initial-scale=0.78, minimum-scale=0.78, maximum-scale=0.78">
  3. For these controls, we add some basic styles to position them. To do this, append the following code to the cargame.css file:
    .touch-control { position: ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required