Creating Checkers Game with JavaScript

Question

I know the Checkers game is a game that has a lot of ways in implementing its javascript after writing its HTML and CSS.

I created my checkers game board using div classes.

I'm really confused when creating the javascript to fit the div class implementation in order to play the game and assign moves to my pieces.

The tutorials I've been seeing so far on creating the game board were using tables which were a bit confusing.

I'm seeing jQuery has to come into the fray, and that makes it more than I can handle already.

any help would be appreciated.

Code snippet demonstration :

// getting the game board, assigning it to variable 'board'.
let board = document.getElementsByClassName("chessboard")[0];

// creating variables for player 1 and 2.
let player1 = '\u2659';
let player2 = '\u2658';

let from;
let selected;
let index1 = -1;
let index2 = -1;
let player1total = 12;
let player2total = 12;

console.log (board.children[3].innerHTML);

// function for player 1
Array.from(board.children).forEach(function(cell, index) {
  // Add a click listener to each square
  cell.onclick = function(elem) { 
    // Check if a piece was selected
    if (elem.target.innerHTML == player1) {
      selected = player1;
    } 
    else if (elem.target.innerHTML == player2) {
      selected = player2;
    }
    if (elem.target.innerHTML === player1 || elem.target.innerHTML === player2) {
      //get exact selected code
        from = elem.target;
        index1 = index;
    }
    // Check if a move can be made
    else if (from && isLegalMove(from, elem.target)) {
      index2 = index;

      if(playerRules(selected,index1,index2)) {
        // Put a piece within the selected square
        var total = index1 - index2;
        console.log("player" + selected + " index"+ index1 + " " + index2 + " DIFF: " + total);
        elem.target.innerHTML = selected;
        // Remove it from the old square
        from.innerHTML = '';
        // Clear the `from` variable
        from = null;
        index1 = -1;
        index2 = -1;
      }
    }
  }
});

function printElem (id, content) {
  document.getElementById(id).innerHTML = content;
}

// function to determine if a move is legal
function isLegalMove(from, to) {
  let result = to.innerHTML !== player1 && to.innerHTML !== player2;
  result = result && to.className.indexOf('yellow') > -1;
  return result;
}

let flag = false;
function playerRules(sel, from, to) {
  //rule - one cannot move backward
  var moveDiff = from - to;
  console.log(moveDiff);
  if (sel == player1) {
    flag = (to < from);
    if (flag) {
      printElem('pturn',"Player 2" + player2);
    }
    if(flag && moveDiff == 14)  {
      //get doublecross
      dc = from - 7;
      flag = (board.children[dc].innerHTML == player2);
      //is double crossed// minus player2 and clear field
      if(flag) {
        player2total -= 1;
        console.log("This" + player2total);
        printElem ('p2card', player2total);
        board.children[dc].innerHTML = '';
        
       checkWinner (player1total, player2total);
      }
    }
    else if (flag && moveDiff == 18) {
      //get double cross
      dc = from - 9;
      flag = (board.children[dc].innerHTML == player2);
      //is double crossed// minus player2 and clear field
      if(flag) {
        player2total -= 1;
        printElem('p2card', player2total);
        board.children[dc].innerHTML= '';       
      }
    }
  }
  //Do same for player 2
  else if (sel == player2) {
    flag = (to > from);
    if(flag) {
      printElem ('pturn', "Player 1" + player1);
    }

    if (flag && moveDiff == -14) {
      //get doublecross
      dc = from + 7;
      flag = (board.children[dc].innerHTML == player1);
      //is double crossed// minus player2 and clear field
      if (flag) {
        player1total -= 1;
        printElem ('p1card', player1total);
        board.children[dc].innerHTML = '';
        checkWinner (player1total, player2total);
      }
    }
    else if (flag && moveDiff == -18) {
      //get doublecross
      dc = from + 9;
      flag = (board.children[dc].innerHTML == player1);
      //is double crossed// minus player2 and clear field
      if (flag) {
        player1total -= 1;
        printElem ('p1card', player1total);
        board.children[dc].innerHTML = '';
      }
    }   
  } 
  return flag;
}

// check for winner at each move
function checkWinner(p1count, p2count) {
  console.log('Check!');
  if (p1count <= 0) {
   c = confirm ("Game won! by player 1, Restart?");
   console.log('Check!');
   if (c) window.location = 'gamepage.php';
  }
  else if (p2count <= 0) {
   c = confirm ("Hurray! Game won by player 2, Restart?");
   console.log('Check!');
   if (c) window.location = 'gamepage.php';
  }
}

 .chessboard {
width: 480px;
height: 480px;
margin: 1px;
border: 2px solid #F44336;
}

.red, .yellow {
    float: left;
    width: 60px;
    height: 60px;
    font-size:50px;
    text-align:center;
    display: table-cell;
    vertical-align:middle;
    box-sizing: border-box;
}

.red {
    background-color: #F44336;
}

.yellow {
    background-color: #FFEB3B;
}

HTML

<body>
	<!-- Card info for both players -->
	<div style= "padding: 1px">
		Player one card: <b id="p1card">12</b> || Player two card: <b id="p2card">12</b>
		Turn: <b id="pturn">Any</b>
	</div>
<div class="chessboard">
    <!-- 1st -->
	<div class="yellow">&#9816;</div>
    <div class="red"></div>
    <div class="yellow">&#9816;</div>
    <div class="red"></div>
    <div class="yellow">&#9816;</div>
    <div class="red"></div>
    <div class="yellow">&#9816;</div>
    <div class="red"></div>

    <!-- 2nd -->
    <div class="red"></div>
    <div class="yellow">&#9816;</div>
    <div class="red"></div>
    <div class="yellow">&#9816;</div>
    <div class="red"></div>
    <div class="yellow">&#9816;</div>
    <div class="red"></div>
    <div class="yellow">&#9816;</div>

    <!-- 3rd -->
    <div class="yellow">&#9816;</div>
    <div class="red"></div>
    <div class="yellow">&#9816;</div>
    <div class="red"></div>
    <div class="yellow">&#9816;</div>
    <div class="red"></div>
    <div class="yellow">&#9816;</div>
    <div class="red"></div>

    <!-- 4th -->
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>

    <!-- 5th -->
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <div class="yellow"></div>
    <div class="red"></div>

    <!-- 6th -->
    <div class="red"></div>
    <div class="yellow">&#9817;</div>
    <div class="red"></div>
    <div class="yellow">&#9817;</div>
    <div class="red"></div>
    <div class="yellow">&#9817;</div>
    <div class="red"></div>
    <div class="yellow">&#9817;</div>

    <!-- 7th -->
    <div class="yellow">&#9817;</div>
    <div class="red"></div>
    <div class="yellow">&#9817;</div>
    <div class="red"></div>
    <div class="yellow">&#9817;</div>
    <div class="red"></div>
    <div class="yellow">&#9817;</div>
    <div class="red"></div>

    <!-- 8th -->
    <div class="red"></div>
    <div class="yellow">&#9817;</div>
    <div class="red"></div>
    <div class="yellow">&#9817;</div>
    <div class="red"></div>
    <div class="yellow" >&#9817;</div>
    <div class="red"></div>
    <div class="yellow">&#9817;</div>
</div>

<script src="script.js"></script>
 
</body>

How the javascript comes in is where I'm having a difficulty wrapping my head around. I'm doing tutorials for it, but I don't know how I'll implement it into my own code. Do I create an array of the board in javascript then go from there? — Audu Ibrahim
– Audu Ibrahim, Commented Dec 16, 2017 at 3:22
Yep, that would be a good start. Unfortunately, without a specific problem to solve, this question is going to be hard to answer — user184994
– user184994, Commented Dec 16, 2017 at 3:24
var board =[ ['0','1','0','1','0','1','0','1'], ['0','1','0','1','0','1','0','1'], ['0','1','0','1','0','1','0','1'], ['0','1','0','1','0','1','0','1'], ['0','1','0','1','0','1','0','1'], ['0','1','0','1','0','1','0','1'], ['0','1','0','1','0','1','0','1'], ['0','1','0','1','0','1','0','1'] ]; — Audu Ibrahim
– Audu Ibrahim, Commented Dec 16, 2017 at 4:07

user184994 · Accepted Answer · 2017-12-16 10:39:20Z

Here is a very basic start, but you will need to build on it.

First, we need to get each cell. We can do this by getting the board element:

let board = document.getElementsByClassName("chessboard")[0];

And then iterating through the child elements:

Array.from(board.children).forEach(function (cell) {});

We can then add a click listener to each cell. Within this click listener, we want to handle some of the logic.

In my example, if you click on a piece, that will make it selected. If you then click on an empty square, that will move the piece to the empty square.

You will need to add to this logic to disallow certain moves, and allow taking of other pieces.

let board = document.getElementsByClassName("chessboard")[0];
let pieceCode = '\u2659';
//let blackPieceCode = '\u265f';

let from;

Array.from(board.children).forEach(function(cell) {
  // Add a click listener to each square
  cell.onclick = function(elem) { 
    // Check if a piece was selected
    if (elem.target.innerHTML === pieceCode) {
        from = elem.target;
    // Check if a move can be made
    } else if (from && isLegalMove(from, elem.target)) {
        // Put a piece within the selected square
        elem.target.innerHTML = pieceCode;
        // Remove it from the old square
        from.innerHTML = '';
        // Clear the `from` variable
        from = null;
    }
  }
});

function isLegalMove(from, to) {
  let result = Math.abs(from.dataset.row - to.dataset.row) === 1;
  result = result && to.innerHTML !== pieceCode;
  result = result && to.className.indexOf('yellow') > -1;
  return result;
}

.chessboard {
        width: 480px;
        height: 480px;
        margin: 1px;
        border: 2px solid #F44336;
    }

    .red, .yellow {
        float: left;
        width: 60px;
        height: 60px;
        font-size:50px;
        text-align:center;
        display: table-cell;
        vertical-align:middle;
        box-sizing: border-box;
    }

    .red {
        background-color: #F44336;
    }

    .yellow {
        background-color: #FFEB3B;
    }

<div class="chessboard">
            <!-- 1st -->
            <div class="yellow" data-row="1">&#9817;</div>
            <div class="red"></div>
            <div class="yellow" data-row="1">&#9817;</div>
            <div class="red"></div>
            <div class="yellow" data-row="1">&#9817;</div>
            <div class="red"></div>
            <div class="yellow" data-row="1">&#9817;</div>
            <div class="red"></div>

            <!-- 2nd -->
            <div class="red"></div>
            <div class="yellow" data-row="2">&#9817;</div>
            <div class="red"></div>
            <div class="yellow" data-row="2">&#9817;</div>
            <div class="red"></div>
            <div class="yellow" data-row="2">&#9817;</div>
            <div class="red"></div>
            <div class="yellow" data-row="2">&#9817;</div>

            <!-- 3rd -->
            <div class="yellow" data-row="3">&#9817;</div>
            <div class="red"></div>
            <div class="yellow" data-row="3">&#9817;</div>
            <div class="red"></div>
            <div class="yellow" data-row="3">&#9817;</div>
            <div class="red"></div>
            <div class="yellow" data-row="3">&#9817;</div>
            <div class="red"></div>

            <!-- 4th -->
            <div class="red"></div>
            <div class="yellow" data-row="4"></div>
            <div class="red"></div>
            <div class="yellow" data-row="4"></div>
            <div class="red"></div>
            <div class="yellow" data-row="4"></div>
            <div class="red"></div>
            <div class="yellow" data-row="4"></div>

            <!-- 5th -->
            <div class="yellow" data-row="5"></div>
            <div class="red"></div>
            <div class="yellow" data-row="5"></div>
            <div class="red"></div>
            <div class="yellow" data-row="5"></div>
            <div class="red"></div>
            <div class="yellow" data-row="5"></div>
            <div class="red"></div>

            <!-- 6th -->
            <div class="red"></div>
            <div class="yellow" data-row="6">&#9817;</div>
            <div class="red"></div>
            <div class="yellow" data-row="6">&#9817;</div>
            <div class="red"></div>
            <div class="yellow" data-row="6">&#9817;</div>
            <div class="red"></div>
            <div class="yellow" data-row="6">&#9817;</div>

            <!-- 7th -->
            <div class="yellow" data-row="7">&#9817;</div>
            <div class="red"></div>
            <div class="yellow" data-row="7">&#9817;</div>
            <div class="red"></div>
            <div class="yellow" data-row="7">&#9817;</div>
            <div class="red"></div>
            <div class="yellow" data-row="7">&#9817;</div>
            <div class="red"></div>

            <!-- 8th -->
            <div class="red"></div>
            <div class="yellow" data-row="8">&#9817;</div>
            <div class="red"></div>
            <div class="yellow" data-row="8">&#9817;</div>
            <div class="red"></div>
            <div class="yellow" data-row="8">&#9817;</div>
            <div class="red"></div>
            <div class="yellow" data-row="8">&#9817;</div>
        </div>

Collectives™ on Stack Overflow

Creating Checkers Game with JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related