Touch event fixes for IE 10

README

@@ -0,0 +1,21 @@
+== Safari / iPad / iOS 5 ==
+
+* Feels a bit slussish, but reports 40s-50s fps
+* aspect ratio needs fixing
+* touch ok
+
+== Silk / Kindle Fire / Android 2.3 ==
+
+* Feels very sluggish; reports 25-30 fps generally
+* touch events work one at a time
+* multitouch jump doesn't seem to work reliably
+
+
+== IE 10 / Win 8 DP ==
+
+Canvas renders nicely. Seems to (should) use requestAnimationFrame
+keyboard ok
+
+* using MSPointer touch events model: http://blogs.msdn.com/b/ie/archive/2011/09/20/touch-input-for-ie10-and-metro-style-apps.aspx
+* also need to disable context menu stuff per http://msdn.microsoft.com/en-us/ie/hh272903 "Common practices for touch optimization"
+

main.js

@@ -352,8 +352,12 @@ function GameEngine(canvas) {
                 var repeatDelay = 100;
                 var dirKeysDownCount = 0;
                 var touchableArea = function(target, callback) {
-                    var interval;
-                    $(target).bind('touchstart', function(event) {
+                    var interval,
+                        msPointer = (typeof window.navigator.msPointerEnabled !== 'undefined') && window.navigator.msPointerEnabled,
+                        downEvent = (msPointer ? 'MSPointerDown' : 'touchstart'),
+                        upEvent = (msPointer ? 'MSPointerUp' : 'touchend');
+                        moveEvent = (msPointer ? 'MSPointerMove' : 'touchmove');
+                     $(target).bind(downEvent, function(event) {
                         event.preventDefault();
                         if (!interval) {
                             if (dirKeysDownCount) {
@@ -365,13 +369,24 @@ function GameEngine(canvas) {
                             keyMap.right();
                             interval = window.setInterval(callback, repeatDelay);
                         }
-                    }).bind('touchend', function(event) {
+                        return false;
+                    }).bind(upEvent, function(event) {
                         event.preventDefault();
                         if (interval) {
                             dirKeysDownCount--;
                             window.clearInterval(interval);
                             interval = null;
                         }
+                        return false;
+                    }).bind(moveEvent, function(event) {
+                        // Keep zoom, context menu from showing in IE 10
+                        event.preventDefault();
+                    }).bind('MSGestureHold', function(event) {
+                        // Disable visual effect for long-hold context menu on IE 10
+                        event.preventDefault();
+                    }).bind('contextmenu', function(event) {
+                        // Disable long-hold context menu on IE 10
+                        event.preventDefault();
                     });
                 };
                 touchableArea('#touch-left', keyMap.left);

style.css

@@ -1,6 +1,9 @@
 body {
     background: black;
     color: white;
+
+    overflow: hidden;
+    -ms-content-zooming: none; /* disable touch pan/zoom in IE 10 */
 }
 
 #all {