Problem with detecting collisions algorithm

Question

Problem with detecting collisions algorithm

Here is the jsfiddle I've been working on: http://jsfiddle.net/TLYZS/

Upon debugging the code and inspecting the collision function, it's evident that the collision is functioning properly when the user overlaps with the other character. However, in a fighting game scenario, the collision should not work in this manner:

It's noticeable that when I attempt to punch or kick the character from a slight distance, the collision detection function fails to register the impact even though it appears visually on the screen that the user is engaging with the character.

How can I adjust the collision detection function to enhance its accuracy?

function Collision(r1, r2) {
        return !(r1.x > r2.x + r2.w || r1.x + r1.w < r2.x || r1.y > r2.y + r2.h || r1.y + r1.h < r2.y);
    }

javascript

Answer 1

Answer №1

Below is a vintage JS implementation of flash.geom.Rectangle. Feel free to incorporate it into your current project:

function Rectangle(x, y, w, h) {  //  constructor
    if(x==null) x=y=w=h=0;
    this.x = x;      this.y = y;
    this.width = w;  this.height = h;       
}
Rectangle.prototype.isEmpty = function() {  // : Boolean
    return (this.width<=0 || this.height <= 0);
}
Rectangle.prototype.intersection = function(rec) {  // : Rectangle
    var l = Math.max(this.x, rec.x);
    var r = Math.min(this.x+this.width , rec.x+rec.width );
    var u = Math.max(this.y, rec.y);
    var d = Math.min(this.y+this.height, rec.y+rec.height);
    if(r<l || d<u) return new Rectangle();
    else           return new Rectangle(l, u, r-l, d-u);
}

Simply use the following code snippet:

var r1 = new Rectangle( 0, 0,100,100);
var r2 = new Rectangle(90,90,100,100);
// r1.intersection(r2) would be Rectangle(90,90,10,10)
if( !r1.intersection(r2).isEmpty() ) ... // there is a collision

Answer 2

Below is a vintage JS implementation of flash.geom.Rectangle. Feel free to incorporate it into your current project:

function Rectangle(x, y, w, h) {  //  constructor
    if(x==null) x=y=w=h=0;
    this.x = x;      this.y = y;
    this.width = w;  this.height = h;       
}
Rectangle.prototype.isEmpty = function() {  // : Boolean
    return (this.width<=0 || this.height <= 0);
}
Rectangle.prototype.intersection = function(rec) {  // : Rectangle
    var l = Math.max(this.x, rec.x);
    var r = Math.min(this.x+this.width , rec.x+rec.width );
    var u = Math.max(this.y, rec.y);
    var d = Math.min(this.y+this.height, rec.y+rec.height);
    if(r<l || d<u) return new Rectangle();
    else           return new Rectangle(l, u, r-l, d-u);
}

Simply use the following code snippet:

var r1 = new Rectangle( 0, 0,100,100);
var r2 = new Rectangle(90,90,100,100);
// r1.intersection(r2) would be Rectangle(90,90,10,10)
if( !r1.intersection(r2).isEmpty() ) ... // there is a collision

Problem with detecting collisions algorithm

Answer №1

Similar questions

What is the method to invoke a function within another function in Angular 9?

How can you capture the VIRTUAL keyCode from a form input?

Utilize CSS with dynamically created elements

What is the best way to send data from ajax to a django view?

What could be causing the ERROR TypeError in an Angular form where "_co.service.formData" is undefined?

How to access the api variable in JavaScript

My component is not executing the onClick function as expected

What is the best way to show the totals on a calculator screen?

Setting up jade includes with gulp-jade: A comprehensive guide

Trouble with Background Image Display in Internet Explorer 8

Employing useEffect within Material-UI tabs to conceal the third tab

When additional elements follow, the button ceases to function properly in JavaScript

Utilize the data storage API within Next.js or directly in the user's

What happens when Google Polymer platform is used without defining _polyfilled?

What is the best way to incorporate npm packages and ES6 features into Django?

Filtering arrays of objects dynamically using Typescript

Node js - Looping Through Loading

Troubleshooting Knockout.JS: Why self.myObservable is not working and the importance of code organization

AngularJS $scope variable can be initialized only once using an HTTP GET request

Can $refs cause issues with interpolation?