JSFiddle - React, Tailwind, and code Playground

HTML

<span id="1" class="battlefieldSquare_Base battlefieldSquare_B skillRangeSquare" 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 skillRangeSquare" name="r1c3">&nbsp;</span>
<span id="4" class="battlefieldSquare_Base battlefieldSquare_A skillRangeSquare" name="r1c4">&nbsp;</span>
<span id="5" class="battlefieldSquare_Base battlefieldSquare_B skillRangeSquare" name="r1c5">&nbsp;</span>
<br>
<span id="11" class="battlefieldSquare_Base battlefieldSquare_A skillRangeSquare" name="r2c1">&nbsp;</span>
<span id="12" class="battlefieldSquare_Base battlefieldSquare_B skillRangeSquare" name="r2c2">&nbsp;</span>
<span id="13" class="battlefieldSquare_Base battlefieldSquare_A skillRangeSquare" name="r2c3">&nbsp;</span>
<span id="14" class="battlefieldSquare_Base battlefieldSquare_B skillRangeSquare" name="r2c4">&nbsp;</span>
<span id="15" class="battlefieldSquare_Base battlefieldSquare_A skillRangeSquare" name="r2c5">&nbsp;</span>
<br>
<span id="21" class="battlefieldSquare_Base battlefieldSquare_B skillRangeSquare" 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 skillRangeSquare" name="r3c3">&nbsp;</span>
<span id="24" class="battlefieldSquare_Base battlefieldSquare_A skillRangeSquare" name="r3c4">&nbsp;</span>
<span id="25" class="battlefieldSquare_Base battlefieldSquare_B skillRangeSquare" name="r3c5">&nbsp;</span>
<br>
<span id="31" class="battlefieldSquare_Base battlefieldSquare_A skillRangeSquare" name="r4c1">&nbsp;</span>
<span id="32" class="battlefieldSquare_Base battlefieldSquare_B skillRangeSquare" name="r4c2">&nbsp;</span>
<span id="33" class="battlefieldSquare_Base battlefieldSquare_A skillRangeSquare" name="r4c3">player</span>
<span id="34"...

CSS

.battlefieldSquare_Base {
    display: inline-block;
    height: 70px;
    width: 70px;
}

.battlefieldSquare_A {
    background-color: gray;
}

.battlefieldSquare_B {
    background-color: beige;
}

JavaScript

var map = [
	[1,1,1,1,1,1,1,1],
	[1,0,2,0,0,0,0,1],
	[1,0,0,0,0,0,0,1],
	[1,0,2,0,0,0,0,1],
	[1,0,0,3,0,0,0,1],
	[1,0,0,0,0,0,0,1],
	[1,1,1,1,1,1,1,1]
];

function isBlocking(x,y) {
	// Return true if the map block is not 0,
	return (map[Math.floor(x)][Math.floor(y)] != 0);
}

	$(function () {
		$('.skillRangeSquare').click(function () {
			//get target's coords
			var res = $(this).attr('name').split('c');
			var intRow = parseInt(res[0].substr(1));
			var intColumn = parseInt(res[1]);

			//we know players's coords [4][3]
			var y1 = 3;
			var x1 = 4;
			//var m = (y2 - y1) / (x2 - x1)
			var m = (intColumn - 3) / (intRow - 4);
			//y=mx+b
			var b = y1 - (m * x1);
			alert('m = ' + m + ' & b = ' + b);

			for (x = x1; x >= intRow; x--) {
				var y = (m * x) + b;				
				alert('x = ' + Math.floor(x) + ' y = ' + Math.floor(y) + 'something in the square = ' + isBlocking(x,y));
			}
        })
	})