How to improve hit detection / collision

[AndersCan]

I'm creating a game that is basically a clone of the example Breakout  (http://phaser.io/examples/v2/games/breakout) You can use that as a reference for my code.

 

My issue is that the hit detection is terrible when moving the paddle left to right and hitting the middle of the ball. In the Phaser example you can clearly get the ball to overlap the paddle with no hit detected.

 

I've added an Overlap check to my paddle and the ball that is correctly firing, but it doesn't look good  visually when the ball is actually overlapping the paddle. I

 

I've tried throttling how often you can update the position of the paddle, but this makes the movement of the paddle jittery.

var throttled = _.throttle(doMovement, 17);

My question is if there is a better way to implement the hit detection?

 

I'm new to HTML5 game development, so if there are libraries or best-practices that are supposed to be used for this, please let me know

 

Thanks

[Skeptron]

This kind of bug is weird, collision should work well... Did you try displaying the bodies of the objects (the paddle and the ball)? Maybe the body of the ball has been cropped to some smaller object, thus explaining the collision misses.

[AndersCan]

Did you try the game example on http://phaser.io/examples/v2/games/breakout ? It has the same issue and is a very simple implementation code-wise.

 

The display of  "game.debug.body(paddle);" is basically a 1:1 match of my sprite.

[Skeptron]

I really have no problem whatsoever with collisions in this example... What's your FPS? Poor performances might play a role here

[AndersCan]

I've used several machines, all running at 60FPS.

 

How fast are you moving the paddle and are you hitting the ball on the left or right side of the paddle? I see the error mostly ocurres when I have a high acceleration/speed when moving.

If you still have good hit detection at faster speeds then I will record a video of it when I get home.