I'm making the game called Dots and Boxes.
There are a bunch of dots on a grid:
<table>
<tr>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
</tr>
<tr>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
</tr>
</table>
When you click on one side of the box, it turns black:
function addLine(obj) {
console.log("Called")
if (obj.style.backgroundColor != "black") {
obj.style.backgroundColor = "black";
changeTurn()
}
Once you click on the fourth side, closing the box, the box turns the color of the player who clicked the fourth side:
Currently, the players have to manually click the box to change its color. However, I would like it to automatically fill the box with the color when all four sides are black around the box.
How can I use a function in Javascript to check if a the line above, below, left, and right of a box is filled in black?
var playerTurn = "Blue";
changeTurn();
var number = 0;
function addLine(obj) {
console.log("Called")
if (obj.style.backgroundColor != "black") {
obj.style.backgroundColor = "black";
changeTurn()
}
}
function fillBox(obj) {
if (playerTurn == "Blue") {
obj.style.backgroundColor = "red";
}
else if ( playerTurn == "Red") {
obj.style.backgroundColor = "blue";
}
}
function changeTurn() {
if (playerTurn == "Red") {
playerTurn = "Blue";
document.getElementById('turn').style.color = "blue";
}
else if (playerTurn == "Blue") {
playerTurn = "Red";
document.getElementById('turn').style.color = "red";
};
console.log(playerTurn);
document.getElementById('turn').innerHTML = playerTurn + "'s Turn";
}
h3 {
font-family: Arial;
}
table {
border-collapse: collapse;
}
.vLine {
width: 10px;
height: 60px;
}
.box {
width: 60px;
height: 60px;
}
.hLine {
width: 60px;
height: 10px;
}
.gap {
width: 10px;
height: 12px;
background-color: black;
}
.vLine:hover, .hLine:hover {
background-color: black;
}
<h3 id="turn"></h3>
<table>
<tr>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
</tr>
<tr>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
</tr>
<tr>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
</tr>
<tr>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
</tr>
<tr>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
</tr>
<tr>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
</tr>
<tr>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
</tr>
<tr>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
</tr>
<tr>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
</tr>
<tr>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
</tr>
<tr>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
</tr>
<tr>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
<td class="box" onclick="fillBox(this)"></td>
<td class="vLine" onclick="addLine(this)"></td>
</tr>
<tr>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
<td class="hLine" onclick="addLine(this)"></td>
<td class="gap"></td>
</tr>
</table>