What is the process for calculating collisions when creating a game using the Build an HTML5 Game book?

I'm having trouble grasping the concept of authors using login when determining collisions between two circles (bubbles). You can find more information in the Calculating collisions section.

The author explains:

The bubble being fired follows a set of coordinates defined by the equations:

px = ex + tdx py = ey + tdy

where px and py are points on the trajectory of the bubble’s center point. The calculation of px and py happens in jQuery’s animate method and is the standard equation for moving a point along a line. Next, we’ll calculate t at the closest point on this line to the center of the bubble that we’re checking against:

var t = dx * distToBubble.x + dy * distToBubble.y;

I'm puzzled by the purpose of variable t and why it's calculated with the formula:

var t = dx * distToBubble.x + dy * distToBubble.y;
?

Answer №1

While this may seem unrelated to programming, it actually delves into the realm of mathematics. Despite its placement here, I will provide an answer to assist you.

I am confused about what exactly t represents in this context.

The trajectory of the fired bubble is determined by a parametric equation, with "t" serving as the variable within this equation.

Could you explain why the calculation follows that specific formula?

This topic is quite intricate, as the textbook presents only the final outcome of a series of calculations. To determine the distance between a point and a line (in this case, the center of the target bubble and the parametric equation representing the line), one must first calculate this and then derive further to find the minimum distance.

An alternative method involves using the dot product between the target bubble's origin coordinates and the shot bubble's coordinates according to the parametric function. By setting this dot product equal to zero (indicating perpendicular intersection), you can ascertain the value of t.

It is crucial to note that the book has already solved this problem for your convenience, providing the final result for practical application.

Best of luck with your gaming endeavors!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I can see my Angular 2 object displayed on the console, however, the specific properties are not showing up in the template

Below is the template and component code snippet that I am working with: Template: <div *ngIf="newJobCreated"> <h3>Name: {{newJob.name}}</h3> <h3>Job: {{newJob.job}}</h3> <h3>ID: {{newJob.id}}&l ...

Retrieve information from every nested array and present it in sequential order

I need to extract the index of each element in a nested array structure. For example, I have an array with 5 subarrays, each containing multiple elements. My goal is to retrieve the first element from each subarray, then the second element, and so on. Her ...

Is Axios the sole option for API calls when utilizing Next.js with SSG and SSR?

Can someone clarify the best practice for data fetching in Next.js? Should we avoid using axios or other methods in our functional components, and instead rely on SSG/SSR functions? I'm new to Next.js and seeking guidance. ...

Don't forget to save the toggleClass state to local storage in jQuery so it persists after

It's a challenge to maintain the value of toggleClass after refreshing or reloading the page. I have a structured table where rows toggle visibility when clicked. To preserve these toggle values, I utilized localStorage, but unfortunately, the state i ...

Blurring images with a combination of jQuery Backstretch and Blurjs

I have a background image displayed using Backstretch and want to apply Blur.js to blur elements on top of it. However, when I try to use Blur.js on the backstretched image, it doesn't work. I believe this is happening because Blur.js uses the CSS pro ...

Error encountered in CasperJS due to modifications made using WinSCP

I am facing an issue with a casperjs script: var casper = require('casper').create(); console.log("casper create OK"); casper.start("https://my-ip/login_page.html", function() { console.log("Connection URL OK"); // set a waiting condi ...

Transferring a JSON object along with a function to the controller of another directive

I am facing a challenge in sending a JSON object with a function template from app.controller to another directive controller. I have chosen to pass this variable as an attribute of the inner directive's element. The issue arises when attempting to ac ...

Guide on incorporating pinching gestures for zooming in and out using JavaScript

I have been working on implementing pinch zoom in and out functionality in JavaScript. I have made progress by figuring out how to detect these gestures using touch events. var dist1=0; function start(ev) { if (ev.targetTouches.length == 2) {//checkin ...

Sorting numeric ID columns in a Bootstrap table

I've implemented the Boostrap table to display data from my database on my admin page. I saved an array into a json file, and then used the following code to populate the table: <div class=\"row\"> <div class=&bsol ...

Combining additional buttons to function as a single unit

Currently, I have a setup with two buttons that add and remove contacts, along with a third button that retrieves a user's geolocation. Is there a way to make the newly added buttons automatically incorporate the geolocation function? Essentially, whe ...

The Functionality of JQuery Dropdowns

Just dipping my toes into the world of JQuery.. only about 2 hours in. Started working on a drop-down menu for a login box that looks like this: HTML: <button id="loginButton">Login</button> When you hover over the button, this JQuery functio ...

Utilize middleware nesting in Express.js

I am interested in implementing middleware to validate requests based on a RAML file. Below is an outline of my current code: // dependencies let resources = require('osprey-resources'); let errorHandler = require('request-error-handler&apo ...

Employing the 'this' keyword for iterating over a jQuery selector

Having an issue with a jQuery code that logs the values of input fields on button click: Tried using forEach method on inputs but getting an error saying it's not a function. Why is this happening? $("#submit").click(e => { e.preventDefault(); ...

A guide to filtering out items from observables during processing with RxJS and a time-based timer

I have a complex calculation that involves fetching information from an HTTP endpoint and combining it with input data. The result of this calculation is important for my application and needs to be stored in a variable. async calculation(input: MyInputTy ...

Different ways to implement the Vue search select feature in various form structures

I am facing an issue with showing select options of my product in multiple forms. Whenever I choose one option in one form, all the other select forms also change automatically. How can I make each select form unique? Here is what I have tried: My selec ...

Is it feasible to utilize the return value of an Async call to display or conceal an alert message?

Before this gets closed as a duplicate, I have searched through numerous threads on the forum that do not address my specific question. Please take the time to read. Here is the scenario: when a user clicks a button, JavaScript needs to validate whether t ...

I have been working on developing a Chrome extension for a StopWatch, but I am facing an issue where the Stopwatch resets automatically whenever I click

I am currently working on a stopwatch chrome extension and facing an issue where clicking anywhere outside the extension popup resets the stopwatch to zero. I would like the stopwatch to keep running until I manually stop it or close the browser. Can someo ...

Ajax- priorToSend

To avoid encountering the same error twice, I implemented the use of beforeSend in my code. hasSent = false function submit() { if (!hasSent) { $.ajax({ url: "${createLink(controller:'userInvitation', action:'ajaxUp ...

Having difficulty updating the parent for all PortfolioItem/Feature that were copied for a specific PortfolioItem/MMF

I'm facing a challenge in setting the parent for multiple features that I've copied for a specific MMF. However, only the parent of the last feature is being set. Below is the code snippet responsible for setting the parent: Record represents th ...

conceal menu upon click (gradually disappear)

This is a basic HTML/CSS menu. Currently, it is functioning properly for page redirection (href). However, I would like it to hide after being clicked on. I plan to call a function that will initiate an AJAX request upon clicking. Here is the code on JS ...