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

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

basically have grid of spans resembling chess/checker board players & ai taking turns moving.

during players turn, can "shoot" other players, i'm having hard time getting head around how tell if there in crossfire.

i consider "chess piece" occupying square taking entire square, need way find out if "bullet" passes through square travels point point b.

here 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 player ok hit, there nil in way, 1 farther "blocked" closer 1 since projectile pass through upper corner of square occupies.

i'm looking way, in onclick, determine that.

edit: should have mentioned projectile going center square center square.

you need utilize equation of line. more math problem programming problem. pretty easy:

find equation shoot (line) player monster find if of obstacles lie within equation -the points belong line-

how find equation line? can google it, take @ http://www.webmath.com/equline1.html

in general, line defined equation

y=mx+b

where "m" slope , "b" offset. need calculate "m" , "b". can find equation line if know 2 points, do: player , target monster. we'll asume player @ (x1,y1) , monster @ (x2,y2). let's calculate m , b this:

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

and calculate b, can utilize point know.

so, returning y= m*x + b, know m:

y = (y2 - y1) / (x2 - x1) * x + b

and in case, imagine shoot player, @ (2,1) monster @ (1,4), assuming (0,0) bottom corner:

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

to calculate b, utilize point know such player @ 2,1 => --> y=mx+b=-3x+b --> 1 = -3*2 + b --> b= 1 + 6 = 7

you have equation particular shoot,

y=-3x+7

now trivial know if monsters lie within line, substitute x , y , see if equation works. this, substitute monster's x , check y have monster's y. if case, monster in middle.

the obvious problem accuracy or resolution. work integer numbers, have define how "line" connect points. when check if monster in middle, utilize line equation calculated previously, , check monster's x, difference between y , monster's y less 1. lesser +-1, closest bullet is: 0 direct hit, +-0.25 pretty direct hit, +-0.50 you'd maybe nail leg, while +-0.80 bullet barely wound it. on +-1, monster won't hit.

javascript jquery