Carry out the following steps to make our game work in a tablet with touch inputs:
In
index.htmlfile, 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>
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">
For these controls, we add some basic styles to position them. To do this, append the following code to the
cargame.cssfile:.touch-control { position: absolute; } #left-button { top: 0; left: 0; width: 50%; height: 100%; } #right-button { top: 0; right: 0; width: 50%; height: 100%; } #restart-button { top: 0; left...