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: ...

Get HTML5 Game Development by Example : Beginner's Guide - Second Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial