- touch support

css/style.css

@@ -1,4 +1,3 @@
-
 * {
   margin: 0;
 }
@@ -339,6 +338,27 @@ h3 {
       -ms-transform:rotate(68deg);
       transform: rotate(68deg);
     }
+    #game-wrap .touch-spot {
+      position: absolute;
+      width: 190px;
+      height: 210px;
+    }
+    #game-wrap .touch-spot-0 {
+      left: 0px;
+      top: 0px;
+    }
+    #game-wrap .touch-spot-1 {
+      left: 0px;
+      top: 210px;
+    }
+    #game-wrap .touch-spot-2 {
+      right: 0px;
+      top: 0px;
+    }
+    #game-wrap .touch-spot-3 {
+      right: 0px;
+      top: 210px;
+    }
 
   #game-wrap #score {
     position: absolute;

index.html

@@ -18,6 +18,10 @@
       <div class="egg e-1"></div>
       <div class="egg e-2"></div>
       <div class="egg e-3"></div>
+      <div class="touch-spot touch-spot-0"></div>
+      <div class="touch-spot touch-spot-1"></div>
+      <div class="touch-spot touch-spot-2"></div>
+      <div class="touch-spot touch-spot-3"></div>
 
       <div id="score">
         <ul>

js/game_manager.js

@@ -58,16 +58,32 @@ GameManager.prototype.setup = function () {
 GameManager.prototype.move = function (key) {
   // 0: up, 1: right, 2: down, 3: left, 4: R - restart
   var position = { x: this.basket.x, y: this.basket.y };
-
-  if (key == 4) {
-    this.reStart();
-    return false;
-  }
-
-  if(key%2 == 0) {
-    position.y = (key > 0) ? 0 : 1;
+  if (typeof key==="string") {
+      switch (key) {
+          case "left-top":
+              position = {x: 0, y: 1};
+              break;
+          case "left-bottom":
+              position = {x: 0, y: 0};
+              break;
+          case "right-top":
+              position = {x: 1, y: 1};
+              break;
+          case "right-bottom":
+              position = {x: 1, y: 0};
+              break;
+      }
   } else {
-    position.x = (key > 2) ? 0 : 1;
+    if (key == 4) {
+      this.reStart();
+      return false;
+    }
+
+    if (key % 2 == 0) {
+      position.y = (key > 0) ? 0 : 1;
+    } else {
+      position.x = (key > 2) ? 0 : 1;
+    }
   }
 
   this.basket.updatePosition(position, this.api.bind(this));

js/keyboard_input_manager.js

@@ -42,4 +42,17 @@ KeyboardInputManager.prototype.listen = function () {
     }
 
   });
+  document.addEventListener("touchend", function(event) {
+    if (event && event.target && event.target.classList.contains("touch-spot")) {
+      if (event.target.classList.contains("touch-spot-0")) {
+        self.emit("move", "left-top");
+      } else if (event.target.classList.contains("touch-spot-1")) {
+        self.emit("move", "left-bottom");
+      } else if (event.target.classList.contains("touch-spot-2")) {
+        self.emit("move", "right-top");
+      } else if (event.target.classList.contains("touch-spot-3")) {
+        self.emit("move", "right-bottom");
+      }
+    }
+  });
 };