0

I created a small game using JavaScript canvas. It's a 2D shooting game where the controller is the mouse and enemies spawn randomly within the canvas.

I am trying to get the JavaScript to detect if my cursor is overlaying my "enemy" component For example. The logic statement is

onclick, If aimcursor is overlapping enemy enemy spawns at random location.

My only problem is how to check if my aimcursor is overlapping enemy

The If statement I'm using right now is what I have learnt from a website but it doesn't seem to be working.

document.addEventListener("mousedown", function(){
    var gunshot = new Audio('gunshot.mp3');
    gunshot.play();
    if(aimcursor.x >= enemy.x && enemy.y  >= aimcursor.y&&
     enemy.y <= aimcursor.y && enemy.y <= aimcursor.y){}
TheUnKnown
  • 681
  • 5
  • 29
Coben Yap
  • 69
  • 8
  • How big (horizontal X vertical) is your aim cursor, and ditto for your enemy? I think the issue is you aren't taking the enemy size into account, just the enemy's position. (I'm not sure how you are tracking widths/heights etc. but this is the logic you want: `if(aimcursor.x >= enemy.minX && aimcursor.x <= enemy.maxX && aimcursor.y >= enemy.minY && aimcursor.y <= enemy.maxY){...}` – scunliffe Jun 12 '19 at 13:28

1 Answers1

1

Keep a separate gamestate object which contains x/y positions of all objects. Each time you draw on the canvas you use these coordinates. You might already be doing this. So lets say enemy.x and enemy.y are currently available within scope.

The next thing to do is getting the cursors's x/y position. You can get this by checking the MouseEvent instance provided by the mousedown callback.

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

The MouseEvent instance contains the clientX and clientY properties. These will reflect the coordinates of te cursor based on the client area, not the canvas, so we need to convert this first. Please see this answer:

How do I get the coordinates of a mouse click on a canvas element?

Once you actually got the coordinates. You need to check whether the mouse x/y coordinate is within a certain boundary around the enemy coordinate. This is because modern screens have high resolutions, and most likely no person is precise enough to click that correct 1 pixel area on the screen.

The boundary which is acceptable as valid input is called a "bounding box" and is typically a square or a rectangle the size of the image used to represent the enemy. If the enemy is a 50x50 px image placed on the center of it's x/y coordinate. the bounding box will start at x - 25px, y - 25px and will stretch to x + 25px, y + 25px.

You need to take the bounding box into account and validate whether the user clicked within that region. This will probably look somewhat like.

if(mouse.x >= enemy.x - 25 && mouse.x <= enemy.x + 25 && mouse.y >= enemy.y - 25 && mouse.y <= enemy.y + 25)`

(from the top of my head).

If the calculated mouse position on click matches that condition can consider that a hit.

Sven van de Scheur
  • 1,809
  • 2
  • 15
  • 31