HTML5 Game Development by Example(Second Edition)

Time for action – adding the touch input support

Let's allow our tablet users to drag-n-drop our circles with the following steps:

1. By default, there is a selection highlighted in the canvas element in iOS devices. We want to get rid of this highlighted part to make the dragging interaction smooth. Add the following CSS rules to the canvas CSS. Please note that we use the webkit vendor prefix here because this rule is specific for webkit at the time of writing this book:

   canvas {
     /* for iOS devices */
     -webkit-tap-highlight-color: transparent;
   }

2. Open the untangle.input.js file. We bind the mouse events on the Canvas in the previous step. Now we add the support for touch events. We used MouseEvent.pageX and pageY to calculate the mouse position. With ...