I have this red and black checkerboard pieces on a checkerboard, but how do I get them to move. For example, if I wanted to move the first checkerboard red piece to the seventeenth cell how would I do that? To clarify, what I want to be done is when I click on the first red highlighted checkerboard piece, I want that to move to next closet unoccupied cell, which in my case would be the seventeenth cell of the checkerboard. Please any examples with any elements on the checkerboard would be much appreciated in order for me to fully learn how to move the checkerboard pieces. I have my three files which are a JavaScript file, CSS file, and HTML file.
Code:
<div class="home">
<div class="board">
<div class="row">
<div class="cell piece red"></div>
<div class="cell piece red"></div>
<div class="cell piece red"></div>
<div class="cell piece red"></div>
<div class="cell piece red"></div>
<div class="cell piece red"></div>
<div class="cell piece red"></div>
<div class="cell piece red"></div>
</div>
<div class="row">
<div class="cell piece red"></div>
<div class="cell piece red"></div>
<div class="cell piece red"></div>
<div class="cell piece red"></div>
<div class="cell piece red"></div>
<div class="cell piece red"></div>
<div class="cell piece red"></div>
<div class="cell piece red"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
</div>
<div class="row">
<div class="cell piece black"></div>
<div class="cell piece black"></div>
<div class="cell piece black"></div>
<div class="cell piece black"></div>
<div class="cell piece black"></div>
<div class="cell piece black"></div>
<div class="cell piece black"></div>
<div class="cell piece black"></div>
</div>
<div class="row">
<div class="cell piece black"></div>
<div class="cell piece black"></div>
<div class="cell piece black"></div>
<div class="cell piece black"></div>
<div class="cell piece black"></div>
<div class="cell piece black"></div>
<div class="cell piece black"></div>
<div class="cell piece black"></div>
</div>
</div>
</div>
</body>
</html>
Code:
.home > .board
{
display: table;
border: 1px solid black;
}
.home > .board > .row
{
display: table;
}
.home > .board > .row > .cell
{
width: 80px;
height: 80px;
border: 1px solid black;
display: inline-block;
}
.piece
{
background-size: 75px 75px;
background-repeat: no-repeat;
background-position: center;
background-origin: content-box;
}
.red
{
background-image: URL('../images/red.png');
}
.black
{
background-image: URL('../images/black.png');
}
Code:
$(document).ready(function()
{
var cells = $(".cell");
var colorCount = 0;
for (var i = 0; i < cells.length; i++)
{
var cell = $(cells[i]);
var isDark = colorCount % 2 == 0;
var isNextRow = (i + 1) % 8 == 0;
colorCount += isNextRow ? 2 : 1;
cell.css("background-color", isDark ? "navy" : "white");
}
$(".cell.piece.red").on({
click: function () {
$(this).css("background-color", "yellow"); }
});
$(".cell.piece.black").on({
click: function () {
$(this).css("background-color", "yellow"); }
});
});