I am trying to build a checkers game with basic CSS, JS and HTML. The code assumes a player one starts and set a Boolean value for that player to be true and the Boolean value for the second player to start to false. I have drawn the Checker Board using a table element and then looped through the table cells while adding checker box styles and pieces using CSS. I have decided to start programming the behavior of the bottom pieces and here is a pseudocode for the expected behavior.
1. Listen for a square tap
2. Check whose turn it is to play
3. If that player has turn first check if there are any pending captures
If there are pending captures then force the player to complete the capture to the last box
4. If the player has no pending capture then just wait for him to make a move
5. update the turn such that it is the turn of the other player to be true and the turn of the current player to be false
I have made some progress with the code below but cannot complete these functions
I need a function to check if a piece is movable before highlighting the potential empty squares it can move to
I also need a function to check for multiple jump overs and listen to jump over multiple pieces to the last box, help me beat this
What I have tried:
<pre><!DOCTYPE html>
<html>
<head>
<!--
<link rel="stylesheet" href="bootstrap/bootstrap.min.css"/>
<!--
<link rel="stylesheet" href="styles.css"/>
<script src="index.js"></script>
</head>
<body>
<table id="checkertable" class="table">
</table>
</body>
</html>
body{
background: black;
}
.square{
width:80px;
height:80px;
margin:auto;
}
.table{
width:640px;
height:640px;
margin:auto;
padding:0px;
}
.black {
background-color: chocolate
;
}
.white {
background-color: white;
}
.top-piece {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
background-color: black;
width: 80%;
height: 80%;
border-radius: 50%;
margin: 10%;
}
.bottom-piece {
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
background-color:darkorchid;
width: 80%;
height: 80%;
border-radius: 50%;
margin: 10%;
}
.highlight-cell{
border:2px solid black;
}
JavaScript
let playertwo = true;
let playerone = false;
let previousplayertwotap = false;
let lastpurple = {}
function createCheckerboard() {
const table = document.getElementById('checkertable');
for (let row = 0; row < 8; row++) {
const newRow = table.insertRow();
for (let col = 0; col < 8; col++) {
const newCell = newRow.insertCell();
newCell.classList.add('square');
if ((row + col) % 2 === 0) {
newCell.classList.add('white');
} else {
newCell.classList.add('black');
if (row < 3) {
const piece = document.createElement('div');
piece.classList.add('top-piece');
newCell.appendChild(piece);
}
if (row >= 5) {
const piece = document.createElement('div');
piece.classList.add('bottom-piece');
newCell.appendChild(piece);
}
newCell.addEventListener('click', function (event) {
if (event.target.classList.contains('bottom-piece')) {
if (playertwo) {
console.log("player two has clicked a piece and wants to move it");
let x1 = row - 1; let y1 = col - 1;
let x2 = row - 1; let y2 = col + 1;
let cell1 = getTableCell(table, x1, y1);
let cell2 = getTableCell(table, x2, y2);
const allPieces = document.querySelectorAll('.square');
allPieces.forEach(function (element) {
element.classList.remove('highlight-cell');
});
if (purplepieceMovable) {
lastpurple["lastpurplemove"] = [row, col];
previousplayertwotap = true;
if (cell1 != null) {
cell1.classList.add('highlight-cell');
}
if (cell2 != null) {
cell2.classList.add('highlight-cell');
}
} else {
}
} else {
return;
}
}
if (!event.target.classList.contains('top-piece') && !event.target.classList.contains('bottom-piece')) {
if (playertwo) {
console.log("it is the turn of player two and an empty square has been clicked");
if (previousplayertwotap) {
let square = lastpurple["lastpurplemove"];
if ((square[0]-row) == 2) {
if (square[1] > col) {
let x1 = square[0] - 1; let y1 = square[1] - 1;
let cellBetween = getTableCell(table, x1, y1);
let childCell = cellBetween.querySelector('.top-piece');
if (childCell != null) {
cellBetween.removeChild(childCell);
let targetCell = getTableCell(table, row, col);
const piece = document.createElement('div');
piece.classList.add('bottom-piece');
targetCell.appendChild(piece);
}
}
}
console.log(square[0] + ":" + square[1]);
if (square[0] > row) {
if ((square[0] - row) == 1) {
const piece = document.createElement('div');
piece.classList.add('bottom-piece');
let parentCell = getTableCell(table, row, col);
parentCell.appendChild(piece);
let cellA = getTableCell(table, square[0], square[1]);
let childCell = cellA.querySelector('.bottom-piece');
cellA.removeChild(childCell);
const allPieces = document.querySelectorAll('.square');
allPieces.forEach(function (element) {
element.classList.remove('highlight-cell');
});
playerone = true;
playertwo = false;
} else {
console.log("a piece cannot jump over an empty square unless it is capturing");
}
} else {
console.log("a piece cannot be moved backwards");
}
} else {
console.log("no previous square piece square clicked");
}
} else {
console.log("player two tries to play when it is the turn of player one");
}
}
});
}
}
}
}
function purplepieceMovable(table, row, col) {
let x1 = row - 1; let y1 = col - 1;
let x2 = row - 1; let y2 = col + 1;
let cell1 = getTableCell(table, x1, y1);
let cell2 = getTableCell(table, x2, y2);
if (cell1.classList.contains('.top-piece')) {
}
}
function getTableCell(table, rowIndex, colIndex) {
if (table && rowIndex >= 0 && rowIndex < table.rows.length) {
const row = table.rows[rowIndex];
if (row && colIndex >= 0 && colIndex < row.cells.length) {
return row.cells[colIndex];
}
}
return null;
}
window.onload = () => createCheckerboard();