here is the jsfiddle i am working on so far : http://jsfiddle.net/TLYZS/

if you debug the code and check the collision function you can see that the collision is working fine when the user overlap with the other character wish in a fighting game the collision should not work like this :

  1. you can see that when i punch or kick the character from a little distance the collision detection function does not work even if you can see it on the screen that the user is punishing the character
  2. how can i fix this collision detection function to make it work fine ?

    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);

enter image description here

enter image description here

  • \$\begingroup\$ why are all these conditions inverted... doesn't that make it extra confusing? \$\endgroup\$ – Timothy Groote Apr 2 '14 at 7:51
  • \$\begingroup\$ what do you mean by inverted ? \$\endgroup\$ – Sora Apr 2 '14 at 7:54
  • \$\begingroup\$ which requires less thinking, !(r1.x > r2.x + r2.w) or r1.x < r2.x + r2.w ? ;) \$\endgroup\$ – Timothy Groote Apr 2 '14 at 7:55
  • \$\begingroup\$ i don't know .to save more lines :P i guess it's easy to read like this No ? \$\endgroup\$ – Sora Apr 2 '14 at 7:56
  • 2
    \$\begingroup\$ heheh "saving lines" should never be your goal when writing code. keep it readable, keep it simple, and try to do it without sacrificing performance for it. You'll find coding way more enjoyable when you make your code readable ;) \$\endgroup\$ – Timothy Groote Apr 2 '14 at 8:01

This is not a collision test issue.
This is a 'my whole code is a mess' issue.

There are many many points to fix :
1- reuse existing code,
2- use parameters instead of hard-coding constants,
3- check that your characters are drawn where you expect them to be (it is not the case),
4- check that you are using the right character width (not the case),
5- check your animation frames are correctly defined (not the case),
6- do not draw in your update method (...),
7- do not confuse width with current frame width (...)
8- Have a more friendly animation constructor to avoid 100 lines per animation (...)
9- In fact your whole animation loading is a mess.
10- do not launch a game before its assets are loaded.
- ...

I did a few fix on some of the above issues (1+2+3), you can find them here : http://jsfiddle.net/gamealchemist/TLYZS/9/

I hope my remarks will help.

Happy coding.


Here's an implementation of a fairly simple rectangle hittest algorithm, which looks like what you were trying to achieve

function Collision(r1, r2)
    return ((r1.X + r1.Width >= r2.X) && 
            (r1.X <= r2.X + r2.Width) && 
            (r1.Y + r1.Height >= r2.Y) && 
            (r1.Y <= r2.Y + r2.Height)
  • \$\begingroup\$ but this is not my actual problem .i really appreciate helping me to fix the syntax of my collision function but this is not my question \$\endgroup\$ – Sora Apr 2 '14 at 8:22
  • \$\begingroup\$ i have edited my question please check it \$\endgroup\$ – Sora Apr 2 '14 at 8:31
  • \$\begingroup\$ hmm ok if the collision detection works fine, why post its source? It also looks like your game has other sizing related issues : the width and height of frames inside the animations should vary, but you're passing them all the same width and height (that of the character's current / default width and height) which causes glitchy rendering in some browsers, and the problem you're describing in others. Try changing the width and height of the characters to fit the sprites during the animation. \$\endgroup\$ – Timothy Groote Apr 2 '14 at 8:37
  • \$\begingroup\$ i knew this point and as you can see not all the animation have the same width and height of the character for example the walk and the punch the walk have ken.width wish is 53 and the punch is 63 \$\endgroup\$ – Sora Apr 2 '14 at 8:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.