Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

JavaScript [Javascript] How do I make a hitbox?

  1. Apr 23, 2014 #1
    Alright I'm trying to make a game using Java-Script, it is a 2-D side scroller

    if ( xPositions>this.x && xPositions<this.x+50 && yPositions>y && yPositions<y+50) {
    y-= 5;
    fill(255, 255, 255, 127);

    stroke(0, 0, 0, 127);

    rect(80, 110, 280, 150, 15);

    fill(0, 0, 0);

    textFont(loadFont("Times", 36), 36);

    text("Game Over\n Try again!", 100, 150);

    text("Final Score: " + points, 85, 250);

    Also it might be different from usual Java-Script because I am using Khan academy's compiler.
    The problem is that my character just moves through the objects and nothing happens, when the object touches my character the game should end. I have no idea what to change.

    So could someone please help me?
  2. jcsd
  3. Apr 23, 2014 #2


    User Avatar
    Gold Member

    It's hard to tell exactly what's wrong since you only showed a portion of the code. I can tell from this snippet that you are not encapsulating things as well as you could be.

    I would try to break it down into a simpler problems.

    First, write a function that does only one thing: It checks if two rectangles intersect. Then write tests to check that all the use cases (bottom right edge with top left edge, non-overlapping, exactly overlapping, etc) return the correct result. Then try incorporating that function into the rest of your program.

    Ideally your code should be broken out into functions that are small, have few responsibilities and are easy to verify on their own.

    Maybe you could link to the khan academy problem you are working on so we can give better guidance?
    Last edited: Apr 23, 2014
  4. Apr 23, 2014 #3
  5. Apr 24, 2014 #4


    User Avatar
    Gold Member

  6. Apr 24, 2014 #5
    oh Okay thank you
  7. Apr 24, 2014 #6
    But what exactly is wrong with mine?? I don't really want to start over the programming :(
  8. Apr 24, 2014 #7
    Why is that it wouldn't work with mine? Mine is supposed to check if the ellipses intersect with my bubble's hit box.
  9. Apr 24, 2014 #8


    User Avatar
    Gold Member

    Your code is kind of hard to read, but I see a few things:
    You are not looping through the positions array during the check.
    Your collision checking code does not seem to be using the correct boundries.
  10. Apr 24, 2014 #9
    I thought had the correct boundaries ,my collision check is the final if statement
    Last edited: Apr 24, 2014
  11. May 7, 2014 #10
    I really like that website. I might have to start sending more people there. I thought it was just for maths.

    I would suggest an improvement, make the objects you are dodging/collecting all spherical. Then you can test for collision by distance to the centre. This would alleviate player rage issues caused by extending the hitbox past the boundaries of the player object.
    Last edited: May 7, 2014
Share this great discussion with others via Reddit, Google+, Twitter, or Facebook