Bouncing logic respects ball radius (#31922)

* Bouncing logic respects ball radius * Update files/en-us/web/api/canvas_api/tutorial/advanced_animations/index.md Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Wraps long code Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Wraps long code Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Wraps long code Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Wraps long code Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Wraps long code Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Wraps long code Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Fix typo Co-authored-by: wbamberg <[email protected]> * Wraps long code Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Wraps long code Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * Wraps long code --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: wbamberg <[email protected]>
mdn · Jan 27, 2024 · 02724e0 · 02724e0
1 parent f7daf15
commit 02724e0
Showing 1 changed file with 40 additions and 10 deletions.
diff --git a/files/en-us/web/api/canvas_api/tutorial/advanced_animations/index.md b/files/en-us/web/api/canvas_api/tutorial/advanced_animations/index.md
@@ -90,10 +90,16 @@ ball.draw();
 Without any boundary collision testing our ball runs out of the canvas quickly. We need to check if the `x` and `y` position of the ball is out of the canvas dimensions and invert the direction of the velocity vectors. To do so, we add the following checks to the `draw` method:
 
 ```js
-if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+if (
+  ball.y + ball.vy > canvas.height - ball.radius ||
+  ball.y + ball.vy < ball.radius
+) {
   ball.vy = -ball.vy;
 }
-if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+if (
+  ball.x + ball.vx > canvas.width - ball.radius ||
+  ball.x + ball.vx < ball.radius
+) {
   ball.vx = -ball.vx;
 }
 ```
@@ -137,10 +143,16 @@ function draw() {
   ball.x += ball.vx;
   ball.y += ball.vy;
 
-  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  if (
+    ball.y + ball.vy > canvas.height - ball.radius ||
+    ball.y + ball.vy < ball.radius
+  ) {
     ball.vy = -ball.vy;
   }
-  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  if (
+    ball.x + ball.vx > canvas.width - ball.radius ||
+    ball.x + ball.vx < ball.radius
+  ) {
     ball.vx = -ball.vx;
   }
 
@@ -214,10 +226,16 @@ function draw() {
   ball.vy *= 0.99;
   ball.vy += 0.25;
 
-  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  if (
+    ball.y + ball.vy > canvas.height - ball.radius ||
+    ball.y + ball.vy < ball.radius
+  ) {
     ball.vy = -ball.vy;
   }
-  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  if (
+    ball.x + ball.vx > canvas.width - ball.radius ||
+    ball.x + ball.vx < ball.radius
+  ) {
     ball.vx = -ball.vx;
   }
 
@@ -288,10 +306,16 @@ function draw() {
   ball.vy *= 0.99;
   ball.vy += 0.25;
 
-  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  if (
+    ball.y + ball.vy > canvas.height - ball.radius ||
+    ball.y + ball.vy < ball.radius
+  ) {
     ball.vy = -ball.vy;
   }
-  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  if (
+    ball.x + ball.vx > canvas.width - ball.radius ||
+    ball.x + ball.vx < ball.radius
+  ) {
     ball.vx = -ball.vx;
   }
 
@@ -360,10 +384,16 @@ function draw() {
   ball.x += ball.vx;
   ball.y += ball.vy;
 
-  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
+  if (
+    ball.y + ball.vy > canvas.height - ball.radius ||
+    ball.y + ball.vy < ball.radius
+  ) {
     ball.vy = -ball.vy;
   }
-  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
+  if (
+    ball.x + ball.vx > canvas.width - ball.radius ||
+    ball.x + ball.vx < ball.radius
+  ) {
     ball.vx = -ball.vx;
   }