On a chessboard, one piece shoots another with a gun, how can I tell if any other pieces are in the crossfire?

Question

Basically I have a grid of spans resembling a chess/checker board with players & ai taking turns moving.

During a players turn, they can "shoot" other players, however I'm having a hard time getting my head around how to tell if there is someone in the crossfire.

I consider a "chess piece" occupying a square as taking up the entire square, so really just need a way to find out if the "bullet" passes through a square as it travels from point a to point b.

Here is a brief example: http://jsfiddle.net/hnxs4cvq/9/

javascript/jquery:

$(window).load(function(){
$(function () {
    $('.skillRangeSquare').click(function () {alert('hit!');})
}) 
});

html:

  <span id="1" class="battlefieldSquare_Base battlefieldSquare_B " name="r1c1"> &nbsp;</span>
<span id="2" class="battlefieldSquare_Base battlefieldSquare_A  skillRangeSquare" name="r1c2">monster</span>
<span id="3" class="battlefieldSquare_Base battlefieldSquare_B " name="r1c3"> &nbsp;</span>
<span id="4" class="battlefieldSquare_Base battlefieldSquare_A " name="r1c4"> &nbsp;</span>
<span id="5" class="battlefieldSquare_Base battlefieldSquare_B " name="r1c5"> &nbsp;</span>
<br>
<span id="11" class="battlefieldSquare_Base battlefieldSquare_A " name="r2c1"> &nbsp;</span>
<span id="12" class="battlefieldSquare_Base battlefieldSquare_B " name="r2c2"> &nbsp;</span>
<span id="13" class="battlefieldSquare_Base battlefieldSquare_A " name="r2c3"> &nbsp;</span>
<span id="14" class="battlefieldSquare_Base battlefieldSquare_B " name="r2c4"> &nbsp;</span>
<span id="15" class="battlefieldSquare_Base battlefieldSquare_A " name="r2c5"> &nbsp;</span>
    <br>
<span id="21" class="battlefieldSquare_Base battlefieldSquare_B " name="r3c1"> &nbsp;</span>
<span id="22" class="battlefieldSquare_Base battlefieldSquare_A skillRangeSquare" name="r3c2"> monster</span>
<span id="23" class="battlefieldSquare_Base battlefieldSquare_B" name="r3c3"> &nbsp;</span>
<span id="24" class="battlefieldSquare_Base battlefieldSquare_A " name="r3c4">&nbsp; </span>
<span id="25" class="battlefieldSquare_Base battlefieldSquare_B " name="r3c5"> &nbsp;</span>
        <br>
<span id="31" class="battlefieldSquare_Base battlefieldSquare_A " name="r4c1"> &nbsp;</span>
<span id="32" class="battlefieldSquare_Base battlefieldSquare_B " name="r4c2"> &nbsp;</span>
<span id="33" class="battlefieldSquare_Base battlefieldSquare_A " name="r4c3">player </span>
<span id="34" class="battlefieldSquare_Base battlefieldSquare_B" name="r4c4"> &nbsp;</span>
<span id="35" class="battlefieldSquare_Base battlefieldSquare_A " name="r4c5"> &nbsp;</span>

The monster closest to the player is ok to hit, there is nothing in the way, however the one further back is "blocked" by the closer one since the projectile would pass through the upper corner of the square it occupies.

I'm looking for a way, in the onclick, to determine that.

Edit: I should have mentioned the projectile would be going from center square to center square.

Answer 1

Hmm, it appears that the bullet passes through the corner shared by the squares (2,3), (3,2), (2,4) and (3,4), if (0,0) is the bottom left most square. Does that count as an obstacle?

Anyway I posted an extremely bad explanation before. I'll rewrite that coherently again here:

I created a diagram to here for visual aid:

https://www.desmos.com/calculator/zm8mayncqi

You know the path of the bullet travels through the columns two and three, so create a function and determine all obstacles in column (other than the player, and target). We have a monster at (2,3) which could potentially be in the way.

Next we find the equation as rupp has described, as represented by the blue line.

If the gradient is negative, we want the opposite (positive) of the equation of the diagonal of the obstacle square, and vice versa.

That, is we want the red dotted line which has a positive gradient.

We use simultaneous equations to determine if the two intersect.

If our two equations are: y=m1*x+c1 y=m2*x+c2

Then we can determine the x-coordinate by this: x=(c1-c2)/(m2-m1)

Now the equation of the bullet only exists between the pixels 105px and 175px horizontally,

So if 105 <= x <= 175 then we know that there is an intersection and thus an obstacle blocking the way.

Hope that helps?

Answer 2

you need to use the equation of the line. This is more a Math problem than a programming problem. But is pretty easy:

• Find the equation for the shoot (line) from the player to the monster
• Find if any of the obstacles lie within this equation -the points belong to the line-

How to find the equation for the line? You can google it, take a look at http://www.webmath.com/equline1.html

In general, a line is defined by an equation

y=mx+b

where "m" is the slope and "b" is an offset. You need to calculate "m" and "b". You can find the equation for a line if you know two points, that you do: the player and the target monster. We'll asume the player is at (x1,y1) and the monster at (x2,y2). So let's calculate m and b like this:

m = (y2 - y1) / (x2 - x1)

and to calculate b, you can use any point you already know.

So, returning to y= m*x + b, we know m:

Y = (y2 - y1) / (x2 - x1) * X + b

and in your case, imagine we shoot from the player, that is at (2,1) to the monster at (1,4), assuming (0,0) is the bottom corner:

• we have m=(4-1) / (1-2) = 3/(-1) = -3

• to calculate b, we use any point we already know such as the player at 2,1 => --> y=mx+b=-3x+b --> 1 = -3*2 + b --> b= 1 + 6 = 7

• You now have the equation for this particular shoot, that is

  y=-3x+7

• Now is trivial to know if any monsters lie within this line, just substitute the x and y and see if the equation works. To do this, substitute a monster's x and check the Y you have is the monster's Y. If this is the case, the monster will be in the middle.

• The obvious problem is the accuracy or resolution. As you work with integer numbers, you have to define how the "line" will connect points. When you check if a monster is in the middle, you use the line equation you calculated previously, and check for a monster's X, the difference between the Y you get and the Monster's Y is less than 1. The lesser than +-1, the closest the bullet is: 0 would be a direct hit, +-0.25 a pretty direct hit, +-0.50 you'd maybe hit a leg, while +-0.80 the bullet would barely hurt it. Over +-1, the monster won't be hit.

Answer 3

Hmm I'm not totally clear on how the 'shooting' works (is it a diagonal or straight shot?) but this one way you could go about it.

Add a 'player' class to the span where the player resides. Get it's 'name' attribute so you know where it is. i.e.

var playerLocation = $('.player').attr('name'); // in this instance r4c3

Get the location of the monster based on the click event i.e.

var monsterLocation = $(event.currentTarget).attr('name'); // in this instance r1c2

So let's say any piece between rows 4 and 1 (occupying 2 and 3) technically block the shot (I know that's probably not how it works but you can tweak the logic for that. From here you can loop through those two rows checking each column to see if a monster is there.

var startingRow = parseInt(playerLocation[1]) + 1; // in this case 2
var endingRow = parseInt(monsterLocation[1]) - 1; // in this case 3

for (var i = startingRow; i < endingRow; i++){
  var tile = "r" + i + "c";
  for (var j = 1; j < 6; j++){
    tile = tile + j; // i.e. r2c1
    if ($('[name=tile]').hasClass('skillRangeSquare') { // using skillRangeSquare because that's what you used in your fiddle
      // if we are here we're blocked
      alert('blocked');
      break;
    }
    tile = tile.substring(0, str.length - 1); // chop off the number we just added to the string
  } 
  alert('hit');
}

So now say you want to base this off of some sort of direct vector from the player to the monster, you'll want to get the x,y position on the page of the player span and the click event, then use logic based on the those coordinates to determine which rows to check (I can give you more detail on this if that's what you're going for). Hope this helps. Note: I didn't actually test out any of this code it's more of a psuedo code example.