javascript collision detection with css animation

Question

I have the following "game":

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

the problem is that when coyote jumps, the div increase its size and there are some blank spots that cause collision too.

Is there any way to improve the collision detection? I have tried to implement inner hitbox but I didn't figure out how to.

Yes. Compute the intersection. Use a canvas of that size to render the particular areas from both elements and fetch the raw pixel datas for each one of the two elements. Now search the data ,pixel by pixel (4 byte), for a point where both arrays contain a value (other than 0) — Thomas
– Thomas, Commented Oct 21, 2017 at 11:21

TessavWalstijn · Accepted Answer · 2017-10-21 13:37:31Z

1

It took a while to understand what you where doing.

But if you take a static width and height for your player. It should fix your problem.

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 should work out for you.

Tips:
1. use as starter a canvas.
2. the most important is readable code.
3. comments and summaries

answered Oct 21, 2017 at 13:37

TessavWalstijn

1,7343 gold badges23 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rodrigo Vázquez Over a year ago

In this work I'm not allowed to use canvas it would be so much easy haha, also yeah the original code is segmented in multiple js files but jsfiddle didn't allow that (as far as i know)

Collectives™ on Stack Overflow

javascript collision detection with css animation

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related