fix page

leoncoolmoon · leoncoolmoon · commit 41e6e0070218 · 2024-08-17T00:14:37.000+10:00
diff --git a/07-Ping-Pong-Game/index.html b/07-Ping-Pong-Game/index.html
@@ -3,7 +3,8 @@
 
 <head>
   <title>Ping Pong Game</title>
-  <meta name="viewport" content="user-scalable=no">
+  <meta name="viewport" content="user-scalable=no maximum-scale=1.0">
+
   <!-- Add the Bootstrap CSS file -->
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
 
diff --git a/07-Ping-Pong-Game/script.js b/07-Ping-Pong-Game/script.js
@@ -346,7 +346,7 @@ function actionStart(e) {
   //判断是鼠标左键点击还是触摸
   var leftPt = { pageX: canvas.width, pageY: 0 }, rightPt = { pageX: 0, pageY: 0 };
 
-  if (e.touches) {//如果是触摸
+  if (e.touches && e.touches.length >1) {//如果是触摸
     e.touches.forEach(element => {//记录左半边，最左边的点
       if (element.pageX  - canvas.offsetLeft < canvas.width / 2) {
         leftPt = element.pageX < leftPt.pageX ? element : leftPt;
@@ -357,7 +357,13 @@ function actionStart(e) {
     if (touchYstartLeft == null) { touchYstartLeft = leftPt.pageY; }
     if (touchYstartRight == null) { touchYstartRight = rightPt.pageY; }
     return;
-  } else {//如果是鼠标 touchXstart等于鼠标的x坐标
+  } else if(e.touches && e.touches.length == 1) {//如果是单点触摸
+    if (e.touches[0].pageX - canvas.offsetLeft < canvas.width / 2) {
+      if (touchYstartLeft == null) { touchYstartLeft = e.touches[0].pageY; }
+    } else {
+      if (touchYstartRight == null) { touchYstartRight = e.touches[0].pageY; }
+    }
+  }else {//如果是鼠标 touchXstart等于鼠标的x坐标
     if (e.pageX  - canvas.offsetLeft < canvas.width / 2) {
       if (touchYstartLeft == null) { touchYstartLeft = e.pageY; }
     } else {
@@ -384,7 +390,7 @@ function actionMove(e) {
   //e.preventDefault();
   var distLeft, distRight, leftPt, rightPt;
   //判断是鼠标左键点击还是触摸
-  if (e.touches) {
+  if (e.touches && e.touches.length > 1) {//如果是触摸
     e.touches.forEach(element => {
       if (element.pageX - canvas.offsetLeft < canvas.width / 2) {
         leftPt = element.pageX < leftPt.pageX ? element : leftPt;
@@ -405,7 +411,24 @@ function actionMove(e) {
       if (rightPaddleY < 0) rightPaddleY = 0;
     }
 
-  } else {//如果是鼠标 dist等于鼠标的x坐标x相对touchXstart的移动距离
+  } else if(e.touches && e.touches.length == 1) {//如果是单点触摸
+    if (e.touches[0].pageX  - canvas.offsetLeft < canvas.width / 2) {
+      if (touchYstartLeft != null) {
+        distLeft = e.touches[0].pageY - touchYstartLeft;
+        leftPaddleY = previousPositionLeft + distLeft;
+        if (leftPaddleY + paddleHeight > canvas.height) leftPaddleY = canvas.height - paddleHeight;
+        if (leftPaddleY < 0) leftPaddleY = 0;
+      }
+    } else {
+      if (touchYstartRight != null) {
+        distRight = e.touches[0].pageY - touchYstartRight;
+        rightPaddleY = previousPositionRight + distRight;
+        if (rightPaddleY + paddleHeight > canvas.height) rightPaddleY = canvas.height - paddleHeight;
+        if (rightPaddleY < 0) rightPaddleY = 0;
+      }
+    }
+  
+}else {//如果是鼠标 dist等于鼠标的x坐标x相对touchXstart的移动距离
     if (e.pageX  - canvas.offsetLeft < canvas.width / 2) {
       if (touchYstartLeft != null) {
         distLeft = e.pageY - touchYstartLeft;
diff --git a/07-Ping-Pong-Game/style.css b/07-Ping-Pong-Game/style.css
@@ -3,6 +3,7 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
+  max-height: 75vh;
 }
 
 .button {
@@ -36,3 +37,7 @@
 canvas {
   background: #000;
 }
+body {
+  overscroll-behavior-y: contain;
+  max-height: 80vh;
+}

Original file line number	Diff line number	Diff line change
`@@ -3,6 +3,7 @@`
`3`	`3`	`flex-direction: column;`
`4`	`4`	`align-items: center;`
`5`	`5`	`justify-content: center;`
	`6`	`+ max-height: 75vh;`
`6`	`7`	`}`
`7`	`8`
`8`	`9`	`.button {`
`@@ -36,3 +37,7 @@`
`36`	`37`	`canvas {`
`37`	`38`	`background: #000;`
`38`	`39`	`}`
	`40`	`+body {`
	`41`	`+ overscroll-behavior-y: contain;`
	`42`	`+ max-height: 80vh;`
	`43`	`+}`