diff --git a/.vscode/launch.json b/.vscode/launch.json new file mode 100644 index 0000000..dfc8f04 --- /dev/null +++ b/.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}" + } + ] +} \ No newline at end of file diff --git a/js/tower.js b/js/tower.js index 33b9906..1664cd8 100644 --- a/js/tower.js +++ b/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) {