Ball Bounce Component

Question

Ball Bounce Component

I'm having an issue with a bouncing ball function that I created. The function displays a green bouncing ball on the screen and bounces it around. However, each time the function is called, the ball seems to pick up speed and its velocity increases dramatically.

function throwBall() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        if (!ballState.paused) {
            requestAnimationFrame(throwBall);
        }

        if (ballState.cx + ballRadius >= canvas.width) {
            ballState.vx = -ballState.vx * damping;
            ballState.cx = canvas.width - ballRadius;
        } else if (ballState.cx - ballRadius <= 0) {
            ballState.vx = -ballState.vx * damping;
            ballState.cx = ballRadius;
        }
        if (ballState.cy + ballRadius + floor >= canvas.height) {
            ballState.vy = -ballState.vy * damping;
            ballState.cy = canvas.height - ballRadius - floor;
            // traction here
            ballState.vx *= traction;
        } else if (ballState.cy - ballRadius <= 0) {
            ballState.vy = -ballState.vy * damping;
            ballState.cy = ballRadius;
        }

        ballState.vy += gravity;

        ballState.cx += ballState.vx;
        ballState.cy += ballState.vy;

        ctx.beginPath();
        ctx.arc(ballState.cx, ballState.cy, ballRadius, 0, 2 * Math.PI, false);
        ctx.fillStyle = '#2ed851';
        ctx.fill();
    }

Your assistance in resolving this problem would be greatly appreciated.

typescript vscode-extensions

Answer 1

Answer №1

Upon repeated use of this function, the ball starts to accelerate significantly with each call, resulting in a drastic increase in speed.

The issue lies within this block of code:

function throwBall() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  if (!ballState.paused) {
    requestAnimationFrame(throwBall);
  }

When you call this function, it continues to invoke itself for every frame using

requestAnimationFrame(throwBall);

. Subsequently calling the function again leads to multiple instances of throwBall being executed per frame, causing the position and velocity to update multiple times. This can result in an unintended speed increase.

To address this, it is advisable to separate the rendering and updating functions from the event-related animations. The current function mainly updates the ball's properties and renders it but lacks the actual 'throwing' action.

Rename the function as follows:

function updateAndDrawBall() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  if (!ballState.paused) {
    requestAnimationFrame(updateAndDrawBall);
  }
  //...
}

Call this function only once after initializing the canvas:

updateAndDrawBall();

To simulate throwing the ball, simply adjust its velocity and let updateAndDrawBall handle these changes during rendering:

function throwBall() {
  ballState.vx = 10
  ballState.vy = -10
}

Invoke this function whenever you want to give the ball a push, without worrying about increasing speed unintentionally.

Check out the working example below:

// JavaScript code snippet will be provided here.
// HTML code snippet will also be included.

View Typescript example on Code Sandbox

Answer 2

Upon repeated use of this function, the ball starts to accelerate significantly with each call, resulting in a drastic increase in speed.

The issue lies within this block of code:

function throwBall() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  if (!ballState.paused) {
    requestAnimationFrame(throwBall);
  }

When you call this function, it continues to invoke itself for every frame using

requestAnimationFrame(throwBall);

. Subsequently calling the function again leads to multiple instances of throwBall being executed per frame, causing the position and velocity to update multiple times. This can result in an unintended speed increase.

To address this, it is advisable to separate the rendering and updating functions from the event-related animations. The current function mainly updates the ball's properties and renders it but lacks the actual 'throwing' action.

Rename the function as follows:

function updateAndDrawBall() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  if (!ballState.paused) {
    requestAnimationFrame(updateAndDrawBall);
  }
  //...
}

Call this function only once after initializing the canvas:

updateAndDrawBall();

To simulate throwing the ball, simply adjust its velocity and let updateAndDrawBall handle these changes during rendering:

function throwBall() {
  ballState.vx = 10
  ballState.vy = -10
}

Invoke this function whenever you want to give the ball a push, without worrying about increasing speed unintentionally.

Check out the working example below:

// JavaScript code snippet will be provided here.
// HTML code snippet will also be included.

View Typescript example on Code Sandbox

Ball Bounce Component

Answer №1

Similar questions

Encountering an error code TS5055 when attempting to call an API within a TypeScript constructor

Ensuring that the app closes completely before launching a new instance with webpack hot module reload

Ways to retrieve the name of the chosen option from a dropdown menu

Achieve the capability to upload multiple files in Next.js using the upload.io integration feature

Use the IONIC CAPACITOR application to send a 20-byte command to a BLE device

Tips for saving a variable in Angular that is being received through a subscription as JSON:

What steps can I take to troubleshoot and fix the issue of a Duplicate identifier 'DateType' error during the React/Typescript building process

What is the best way to calculate the total sum of dynamically changing inputs in Angular 2?

What is the method for obtaining the number of weeks since the epoch? Is it possible to

Enhancing IntelliSense to recognize exports specified in package.json

What is the best way to retrieve a specific property from an array of objects in Angular 6 using typescript?

Incorporating lodash in a project with TypeScript and jspm

What steps should be taken in order to resolve the error message "Type is missing an index signature"?

Incorporating TypeScript into a React-Native Expo development venture

Typescript compiler: Unable to locate the definition for 'Map' data type

The distribution of intersection types is not properly handled by Typescript's array.map function

TypeScript encountered an error (TS2403) stating that subsequent variable declarations must have matching types

Tips for utilizing array.items in joiful validation?

What is the rationale behind assigning a random value to the `(keyup)` event in order to update template local variables in Angular2?

String validation using regular expressions