Detecting collisions using CSS animation

Question

Detecting collisions using CSS animation

I'm currently working on a unique "game" project. Check out the code snippet here: jsfiddle

function update() {
  coyote.applyForce(gravity);
  coyote.edges();
  coyote.update();
  cactus.update();
  if (coyote.intersects(cactus)){
    alert("colision");
  }
}

One issue I've encountered is that when the coyote character jumps, the div size increases and creates blank spots causing unintended collisions.

I'm looking for possible solutions to improve collision detection. I've thought about implementing an inner hitbox, but haven't quite figured out how to do it yet. Any suggestions?

javascript html css collision-detection

Answer 1

Answer №1

It took me some time to grasp the concept of what you were doing.

However, by setting a fixed width and height for your player, you should be able to resolve the issue.

constructor(){
    this.coyote = new Entity();
    this.coyote.pos.set(0,222);
    this.coyote.vel.set(0,0);
    this.coyote.acc.set(0,0);
    this.coyote.width = 78;
    this.coyote.height = 128;
    this.isGrounded = true;
    this.state = States.RUNNING;
}

intersects(other) {
    let div = document.getElementById("player");
    let left = this.coyote.pos.x;
    let right = this.coyote.width;
    let top = this.coyote.pos.y;
    let bottom = this.coyote.height;
    let oLeft = other.left;
    let oRight = other.right;
    let oTop = other.top;
    let oBottom = other.bottom;
    return !(left > oRight || right < oLeft || top > oBottom || bottom < oTop);
}

This solution should address the issue at hand.

Some Tips:
1. Start with a canvas as a base.
2. Ensure that your code is easily readable.
3. Don't forget to include comments and summaries.

Answer 2

It took me some time to grasp the concept of what you were doing.

However, by setting a fixed width and height for your player, you should be able to resolve the issue.

constructor(){
    this.coyote = new Entity();
    this.coyote.pos.set(0,222);
    this.coyote.vel.set(0,0);
    this.coyote.acc.set(0,0);
    this.coyote.width = 78;
    this.coyote.height = 128;
    this.isGrounded = true;
    this.state = States.RUNNING;
}

intersects(other) {
    let div = document.getElementById("player");
    let left = this.coyote.pos.x;
    let right = this.coyote.width;
    let top = this.coyote.pos.y;
    let bottom = this.coyote.height;
    let oLeft = other.left;
    let oRight = other.right;
    let oTop = other.top;
    let oBottom = other.bottom;
    return !(left > oRight || right < oLeft || top > oBottom || bottom < oTop);
}

This solution should address the issue at hand.

Some Tips:
1. Start with a canvas as a base.
2. Ensure that your code is easily readable.
3. Don't forget to include comments and summaries.

Detecting collisions using CSS animation

Answer №1

Similar questions

PhantomJS: Saving SVG for Future Use

Can someone show me the method to retrieve the book title based on a particular ID using linqjs?

What is the process for converting a URL or HTML document to a PDF using the html2pdf JavaScript library?

What is preventing Google Chrome from locating my app.js file?

How to apply a series of spaces using span/tspan with jquery/javascript

Ensure exclusive access to variables for sequential updates in jQuery or JavaScript

Executing an Angular 4 script using a scheduled CRON job

What's the most efficient way to iterate through this Array and display its contents in HTML?

Inquiry on integrating Spotify with Axios for my debut solo project (beginner inquiry)

Ways to conceal a component based on a specific condition?

"Enhance user interactions: Zooming in on input fields in

Unable to manipulate the marker with the leaflet library

AngularJS- Efficiently loading components asynchronously within the application

Out of the box, Next.js is equipped with a standard error message stating: "TypeError: Cannot read properties of null (reading 'useContext')"

Embedding an Iframe in the Main URL

Dropdown trigger changing image with AJAX

Locate a deeply nested element within an array of objects using a specific string identifier

PHP programming language for opening, editing, and saving HTML files

What is the recommended way to adjust the width of a paper-textarea element in Polymer 1.0?

Guidelines on centering an AJAX spinning animation within a parent div