用JavaScript创建Checkers游戏

Question

我知道Checkers游戏是一款在编写HTML和CSS后有很多方法实现其javascript的游戏。

我使用div类创建了我的跳棋游戏板。

在创建javascript以适应div类实现时，我真的很困惑，以便玩游戏并将动作分配给我的作品。

到目前为止，我在制作游戏板时所看到的教程都使用了一些令人困惑的表格。

我看到jQuery必须加入战斗，这使得它已经超出了我的能力。

任何帮助，将不胜感激。

代码段演示：

// 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>

Answer 1

这是一个非常基本的开始，但您需要在此基础上进行构建。

首先，我们需要获得每个细胞。我们可以通过获取board元素来做到这一点：

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

然后遍历子元素：

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

然后，我们可以为每个单元格添加一个单击侦听器。在这个点击监听器中，我们想要处理一些逻辑。

在我的例子中，如果你点击一个片段，那将使它被选中。然后，如果您单击一个空方块，则会将该块移动到空方块。

您将需要添加此逻辑以禁止某些移动，并允许获取其他部分。

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>