Merge pull request #35 from binsmyth/mobile-touch-control-feature

Mobile touch control feature

.vscode/launch.json

@@ -0,0 +1,16 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome against localhost",
+            "url": "http://localhost:5500",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}

js/tower.js

@@ -43,7 +43,7 @@ const gameState = {
   inMiddleOfJump: false,
   isGameOver: false,
   isHighScore: false,
-  powerOfJump: -3,
+  powerOfJump: -4,
   score: 0,
   step: 0,
   times: 0,
@@ -98,7 +98,57 @@ gradient2.addColorStop('1.0', 'blue');
 
 mainLoop();
 drawCharacter();
-
+//Check for mobile device
+
+//Put events for touch based actions
+let canvasElement = document.querySelector("canvas");
+let touchStartX = 0;
+let touchStartY=0;
+let touchEndX=0;
+let touchEndY=0
+canvasElement.addEventListener("touchstart",(e)=>{
+  touchStartX=e.changedTouches[0].screenX;
+  touchStartY=e.changedTouches[0].screenY;
+  if(e.touches.length === 1){
+    console.log("up")
+    keyboard.up = true;
+    keyboard.any = true;
+  }
+  // keyboard.any = true;
+},false)
+
+canvasElement.addEventListener("touchmove",(e)=>{
+  const delx = e.changedTouches[0].screenX - touchStartX;
+  const dely = e.changedTouches[0].screenY - touchStartY;
+  document.getElementById('score-span').innerHTML = "touchmove";
+  if(Math.abs(delx) > Math.abs(dely)){
+    if(delx > 0) {
+      keyboard.right=true;
+      document.getElementById('score-span').innerHTML = "right";
+    }
+    else {
+      keyboard.left=true;
+      document.getElementById('score-span').innerHTML = "left";
+    }
+  }
+  else if(Math.abs(delx) < Math.abs(dely)){
+      if(dely > 0) {
+        console.log("down");
+      }
+      else {
+        // keyboard.up=true;
+        // document.getElementById('score-span').innerHTML = "up";
+      }
+  }
+  else console.log("tap")
+  keyboard.any = true;
+})
+canvasElement.addEventListener("touchend",(e)=>{
+  keyboard.left=false;
+  keyboard.right=false;
+  keyboard.up=false;
+  // keyboard.any=false;
+})
 // EVENTS /////////////
 keyboardEvents.forEach((eventString)=>{
   document.addEventListener(eventString, (e)=>{
@@ -185,6 +235,7 @@ const moveChar = {
     character.onGround = false;
 
     // Check if the character is not in the middle of a jump
+
     if (!gameState.inMiddleOfJump) gameState.powerOfJump = -3; // Set the initial jump power
     else gameState.powerOfJump += 0.2; // Increase the jump power if the character is already jumping
 
@@ -194,9 +245,27 @@ const moveChar = {
     character.distanceY += gameState.powerOfJump;
     // Set the flag to indicate that the character is in the middle of a jump
     gameState.inMiddleOfJump = true;
+    if (gameState.moveLeft){
+      character.distanceX = -2;
+      gameState.moveLeft=false;
+    } else if(gameState.moveRight) {
+      character.distanceX = 2;
+      gameState.moveRight=false;
+    }
+
   },
-  left: function(){ character.distanceX = -2; },
-  right: function(){ character.distanceX = 2; }
+  left: function(){ 
+    gameState.moveLeft = true;
+    if (!gameState.inMiddleOfJump){
+      character.distanceX = -2;
+    }
+  },
+  right: function(){ 
+    gameState.moveRight=true;
+    if(!gameState.inMiddleOfJump){
+      character.distanceX = 2;
+    }
+  }
 }
 
 function randomMinMax(min, max) {