From 02724e050873ff160217f3980e6eb8c2d356fdc9 Mon Sep 17 00:00:00 2001
From: GniLudio <50866361+GniLudio@users.noreply.github.com>
Date: Sat, 27 Jan 2024 03:11:56 +0100
Subject: [PATCH] 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 <will@bootbonnet.ca>

* 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 <will@bootbonnet.ca>
---
 .../tutorial/advanced_animations/index.md     | 50 +++++++++++++++----
 1 file changed, 40 insertions(+), 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
index 8bf52a9440d5c78..3dd4c97af38981f 100644
--- 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;
   }