Add swipe support for mobile devises. Fix bug after renaming.
authorOleksandr Gavenko <gavenkoa@gmail.com>
Tue, 31 Jan 2017 03:41:07 +0200
changeset 190 d1b12b602915
parent 189 44cb6fbad74d
child 191 aee53838634e
Add swipe support for mobile devises. Fix bug after renaming.
2048.html
--- a/2048.html	Sun Aug 07 23:24:28 2016 +0300
+++ b/2048.html	Tue Jan 31 03:41:07 2017 +0200
@@ -2,7 +2,7 @@
 <html>
 <head>
   <title>2048 AI</title>
-  <meta name="viewport" content="width=device-width; initial-scale=1.0"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
   <meta charset="utf-8"/>
 
   <script src="rule.js"></script>
@@ -610,6 +610,41 @@
       }
     }, false);
 
+    ui.swipe = {startX: 0, startY: 0, endX: 0, endY: 0};
+    ui.swipe.direction = function(x, y) {
+      var sensitivityThreshold = boardDom.width * boardDom.height / 10;
+      if (x*x + y*y < sensitivityThreshold)
+        return null;
+      if (Math.abs(x) < Math.abs(y)) {
+        if (y > 0)
+          return "down";
+        else
+          return "up";
+      } else {
+        if (x > 0)
+          return "right";
+        else
+          return "left";
+      }
+    }
+    boardDom.addEventListener("touchstart", function(ev) {
+      ui.swipe.startX = ev.touches[0].pageX;
+      ui.swipe.startY = ev.touches[0].pageY;
+      ev.preventDefault();
+    }, false);
+    boardDom.addEventListener("touchmove", function(ev) {
+      ui.swipe.endX = ev.touches[0].pageX;
+      ui.swipe.endY = ev.touches[0].pageY;
+      ev.preventDefault();
+    }, false);
+    boardDom.addEventListener("touchend", function(ev) {
+      var dir = ui.swipe.direction(ui.swipe.endX - ui.swipe.startX, ui.swipe.endY - ui.swipe.startY);
+      if (dir) {
+        ui.action[dir](event);
+        ev.preventDefault();
+      }
+    }, false);
+
     document.getElementById("test").addEventListener("click", function() {
       event.preventDefault(); event.stopPropagation();
       board.move.replaceByBoardJS(ui.brdEngine);
@@ -1069,7 +1104,7 @@
         ui.game.checkGameOver();
       } catch (ex) { }
     } else {
-      ui.action.start();
+      ui.action.reset();
     }
 
   </script>