From 83e8316956ead9488f75edc5d72aca0542954658 Mon Sep 17 00:00:00 2001 From: vineet man singh Date: Thu, 9 May 2024 14:54:44 +1000 Subject: [PATCH 1/2] added functions for touch in mobile --- .vscode/launch.json | 16 ++++++++++++++ js/tower.js | 52 +++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 66 insertions(+), 2 deletions(-) create mode 100644 .vscode/launch.json 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..43b485c 100644 --- a/js/tower.js +++ b/js/tower.js @@ -98,7 +98,54 @@ gradient2.addColorStop('1.0', 'blue'); mainLoop(); drawCharacter(); - +//Check for mobile device +document.body.addEventListener("touchstart",(e)=>{ + +}) +//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; + // 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)=>{ @@ -195,7 +242,7 @@ const moveChar = { // Set the flag to indicate that the character is in the middle of a jump gameState.inMiddleOfJump = true; }, - left: function(){ character.distanceX = -2; }, + left: function(){ character.distanceX = -2; console.log("character",character)}, right: function(){ character.distanceX = 2; } } @@ -437,6 +484,7 @@ function mainLoop() { if (gameState.isGameOver == false) { if (keyboard.any) { + console.log("this is called"); context.clearRect(0, 0, canvas.width, canvas.height); if (keyboard.up) { moveChar.up(); } else { gameState.inMiddleOfJump = false; } if (keyboard.left) { moveChar.left(); } From decf6b6da94feefc8b982d6d909940ab5ba8d4bb Mon Sep 17 00:00:00 2001 From: vineet man singh Date: Thu, 16 May 2024 01:45:51 +1000 Subject: [PATCH 2/2] tap to jump implemented --- js/tower.js | 41 +++++++++++++++++++++++++++++++---------- 1 file changed, 31 insertions(+), 10 deletions(-) diff --git a/js/tower.js b/js/tower.js index 43b485c..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, @@ -99,18 +99,21 @@ gradient2.addColorStop('1.0', 'blue'); mainLoop(); drawCharacter(); //Check for mobile device -document.body.addEventListener("touchstart",(e)=>{ - -}) + //Put events for touch based actions let canvasElement = document.querySelector("canvas"); let touchStartX = 0; let touchStartY=0; let touchEndX=0; -let touchEndY=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) @@ -133,8 +136,8 @@ canvasElement.addEventListener("touchmove",(e)=>{ console.log("down"); } else { - keyboard.up=true; - document.getElementById('score-span').innerHTML = "up"; + // keyboard.up=true; + // document.getElementById('score-span').innerHTML = "up"; } } else console.log("tap") @@ -232,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 @@ -241,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(){ + gameState.moveLeft = true; + if (!gameState.inMiddleOfJump){ + character.distanceX = -2; + } }, - left: function(){ character.distanceX = -2; console.log("character",character)}, - right: function(){ character.distanceX = 2; } + right: function(){ + gameState.moveRight=true; + if(!gameState.inMiddleOfJump){ + character.distanceX = 2; + } + } } function randomMinMax(min, max) { @@ -484,7 +506,6 @@ function mainLoop() { if (gameState.isGameOver == false) { if (keyboard.any) { - console.log("this is called"); context.clearRect(0, 0, canvas.width, canvas.height); if (keyboard.up) { moveChar.up(); } else { gameState.inMiddleOfJump = false; } if (keyboard.left) { moveChar.left(); }