[Javascript] How do I make a hitbox?

  • Java
  • Thread starter lionely
  • Start date
  • Tags
    Javascript
In summary, the player is not able to interact with the objects in the game, and the collision checking code does not seem to be using the correct boundaries.
  • #1
lionely
576
2
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);

noStroke();
fill(0, 0, 0);

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

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



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

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?
 
Technology news on Phys.org
  • #2
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:
  • #5
oh Okay thank you
 
  • #6
But what exactly is wrong with mine?? I don't really want to start over the programming :(
 
  • #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.
 
  • #8
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.
 
  • #9
I thought had the correct boundaries ,my collision check is the final if statement
 
Last edited:
  • #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:

1. How do I create a hitbox using Javascript?

To create a hitbox using Javascript, you can use the createElement() method to create a new element on the webpage and then use setAttribute() to add the necessary attributes (such as id and class) to the element. You can then use appendChild() to add the hitbox element to the desired location on the webpage.

2. How do I detect collision with a hitbox in Javascript?

In order to detect collision with a hitbox in Javascript, you can use the getBoundingClientRect() method to get the coordinates of the hitbox element. Then, you can use the offsetTop, offsetLeft, offsetWidth, and offsetHeight properties to determine the position and size of the hitbox. Finally, you can use conditional statements and eventListeners to check for collision with other elements on the webpage.

3. How can I make my hitbox draggable in Javascript?

To make a hitbox draggable in Javascript, you can use the mousedown, mousemove, and mouseup events. You can use the mousedown event to detect when the user clicks on the hitbox, and then use mousemove and mouseup events to track the movement of the hitbox. You can use the style property to change the position of the hitbox based on the user's mouse movements.

4. How do I resize a hitbox using Javascript?

To resize a hitbox using Javascript, you can use the style property to change the width and height values of the hitbox element. You can also use the offsetWidth and offsetHeight properties to get the current size of the hitbox and perform calculations to resize it accordingly.

5. Is there a library or framework I can use to create hitboxes in Javascript?

Yes, there are several libraries and frameworks available for creating hitboxes in Javascript, such as jQuery, Phaser, and Box2D. These libraries provide built-in functions and methods for creating hitboxes and detecting collisions, making it easier to implement hitboxes in your code. It is recommended to research and compare different options to find the one that best fits your project's needs.

Similar threads

  • Programming and Computer Science
Replies
15
Views
1K
  • Programming and Computer Science
Replies
4
Views
5K
  • Programming and Computer Science
Replies
1
Views
1K
  • Programming and Computer Science
Replies
5
Views
3K
  • Programming and Computer Science
Replies
6
Views
2K
  • Programming and Computer Science
Replies
1
Views
2K
  • Introductory Physics Homework Help
Replies
2
Views
7K
  • Mechanics
Replies
1
Views
2K
Replies
2
Views
5K
Back
Top