如何检测移动件中是否有一块？

Question

我一直在做我的第一个国际象棋比赛，我遇到了一个我无法解决的问题，我如何能够发现是否有一个在移动的棋子前面的棋子？方式？

例如： 让我们说玩家在第3行第4列选择黑色车，然后点击第0行第4列的插槽

  0 1 2 3  4 
 +----------+
0|_|_|_|_|__| 0,4
1|_|_|_|_|♙| 1,4
2|_|_|_|_|__| 2,4
3|_|_|_|_|♜| 3,4
4|_|_|_|_|__|

问题是，在黑车的0路上，有一个白色的棋子。我怎样才能发现那个白色的棋子？

＆＃13;

＆＃13;

var piece = [{
  "white": [
    "&#9812", //king
    "&#9813", //queen
    "&#9814", //rook
    "&#9815", //bishop
    "&#9816", //knight
    "&#9817" //pawn
  ]
}, {
  "black": [
    "&#9818", //king
    "&#9819", //queen
    "&#9820", //rook
    "&#9821", //bishop
    "&#9822", //knight
    "&#9823" //pawn
  ]
}];
var slot = [];
var board = document.getElementById('main');
var selected = '';

for (var i = 0; i < 8; i++) {
  slot.push(['']);
  for (var j = 0; j < 8; j++) {
    slot[i].push(['']);
  }
}

slot[6][0] = piece[1].black[5];
slot[6][1] = piece[1].black[5];
slot[6][2] = piece[1].black[5];
slot[6][3] = piece[1].black[5];
slot[6][4] = piece[1].black[5];
slot[6][5] = piece[1].black[5];
slot[6][6] = piece[1].black[5];
slot[6][7] = piece[1].black[5];
slot[7][0] = piece[1].black[2];
slot[7][7] = piece[1].black[2];
slot[7][1] = piece[1].black[4];
slot[7][6] = piece[1].black[4];
slot[7][2] = piece[1].black[3];
slot[7][5] = piece[1].black[3];
slot[7][3] = piece[1].black[1];
slot[7][4] = piece[1].black[0];
slot[1][0] = piece[0].white[5];
slot[1][1] = piece[0].white[5];
slot[1][2] = piece[0].white[5];
slot[1][3] = piece[0].white[5];
slot[1][4] = piece[0].white[5];
slot[1][5] = piece[0].white[5];
slot[1][6] = piece[0].white[5];
slot[1][7] = piece[0].white[5];
slot[0][0] = piece[0].white[2];
slot[0][7] = piece[0].white[2];
slot[0][1] = piece[0].white[4];
slot[0][6] = piece[0].white[4];
slot[0][2] = piece[0].white[3];
slot[0][5] = piece[0].white[3];
slot[0][3] = piece[0].white[1];
slot[0][4] = piece[0].white[0];

for (var i = 0; i < 8; i++) {
  for (var j = 0; j < 8; j++) {
    if (i < 2) {
      board.innerHTML += '<div class="slot" id="' + (i + '' + j) + '" style="width:30px;height:30px;top:' + (i * 30) + 'px;left:' + (j * 30) + 'px;"><div class="' + slot[i][j] + ' white" >' + slot[i][j] + '</div></div>';
    }
    if (i > 1 && i < 6) {
      board.innerHTML += '<div class="slot" id="' + (i + '' + j) + '" style="width:30px;height:30px;top:' + (i * 30) + 'px;left:' + (j * 30) + 'px;"></div>';
    }
    if (i > 5 && i < 7) {
      board.innerHTML += '<div class="slot" id="' + (i + '' + j) + '" style="width:30px;height:30px;top:' + (i * 30) + 'px;left:' + (j * 30) + 'px;"><div class="' + slot[i][j] + ' piece black pawn" >' + slot[i][j] + '</div></div>';
    }
    if ((i === 7 && j === 0) || (i === 7) && j === 7) {
      board.innerHTML += '<div class="slot" id="' + (i + '' + j) + '" style="width:30px;height:30px;top:' + (i * 30) + 'px;left:' + (j * 30) + 'px;"><div class="' + slot[i][j] + ' piece black rook" >' + slot[i][j] + '</div></div>';
    }
    if ((i === 7 && j === 1) || (i === 7) && j === 6) {
      board.innerHTML += '<div class="slot" id="' + (i + '' + j) + '" style="width:30px;height:30px;top:' + (i * 30) + 'px;left:' + (j * 30) + 'px;"><div class="' + slot[i][j] + ' piece black knight" >' + slot[i][j] + '</div></div>';
    }
    if ((i === 7 && j === 2) || (i === 7) && j === 5) {
      board.innerHTML += '<div class="slot" id="' + (i + '' + j) + '" style="width:30px;height:30px;top:' + (i * 30) + 'px;left:' + (j * 30) + 'px;"><div class="' + slot[i][j] + ' piece black bishop" >' + slot[i][j] + '</div></div>';
    }
    if ((i === 7 && j === 3)) {
      board.innerHTML += '<div class="slot" id="' + (i + '' + j) + '" style="width:30px;height:30px;top:' + (i * 30) + 'px;left:' + (j * 30) + 'px;"><div class="' + slot[i][j] + ' piece black queen" >' + slot[i][j] + '</div></div>';
    }
    if ((i === 7 && j === 4)) {
      board.innerHTML += '<div class="slot" id="' + (i + '' + j) + '" style="width:30px;height:30px;top:' + (i * 30) + 'px;left:' + (j * 30) + 'px;"><div class="' + slot[i][j] + ' piece black king" >' + slot[i][j] + '</div></div>';
    }
  }
}

$(document).mousedown(function(e) {
  e.preventDefault();
});

//Select Piece
$('.slot > .piece').mousedown(function() {
  $('.slot > .piece').css({
    'background-color': '#fff'
  });
  $(this).css({
    'background-color': '#afa'
  });
  selected = this;
});

//Drop Piece
$('.slot').mousedown(function() {
  var id = [];
  try {
    id.push(
      parseInt($(selected).parent().attr('id').substring(0, 1), 10),
      parseInt($(selected).parent().attr('id').substring(1, 2), 10),
      parseInt($(this).attr('id').substring(0, 1), 10),
      parseInt($(this).attr('id').substring(1, 2), 10)
    );
  } catch (e) {
    console.info('Select one of your pieces!');
  }

  //Pawn Moves
  if (selected !== '' && !$(this).children().hasClass('piece') && id[0] == (id[2] + 1) && id[1] == id[3] && $(selected).hasClass('pawn') && !$(this).children().hasClass('white')) {
    $(this).empty();
    $(this).append(selected);
    selected = '';
  }
  if (selected !== '' && !$(this).children().hasClass('piece') && id[0] == (id[2] + 1) && id[1] !== id[3] && $(selected).hasClass('pawn') && $(this).children().hasClass('white')) {
    $(this).empty();
    $(this).append(selected);
    selected = '';
  }
  if (selected !== '' && !$(this).children().hasClass('piece') && (id[0] == id[2] || id[1] == id[3]) && $(selected).hasClass('rook')) {
    $(this).empty();
    $(this).append(selected);
    selected = '';
  }
  if (selected !== '' && !$(this).children().hasClass('piece') && $(selected).hasClass('knight') && ((id[0] == id[2] - 2 && id[1] == id[3] - 1) || (id[0] == id[2] - 1 && id[1] == id[3] - 2) || (id[0] == id[2] - 2 && id[1] == id[3] + 1) || (id[0] == id[2] - 1 && id[1] == id[3] + 2) || (id[0] == id[2] + 1 && id[1] == id[3] - 2) || (id[0] == id[2] + 2 && id[1] == id[3] - 1) || (id[0] == id[2] + 1 && id[1] == id[3] + 2) || (id[0] == id[2] + 2 && id[1] == id[3] + 1))) {
    $(this).empty();
    $(this).append(selected);
    selected = '';
  }
  if (selected !== '' && !$(this).children().hasClass('piece') && $(selected).hasClass('bishop') && (Math.abs(id[0] - id[2]) === Math.abs(id[1] - id[3]))) {
    $(this).empty();
    $(this).append(selected);
    selected = '';
  }
  if (selected !== '' && !$(this).children().hasClass('piece') && $(selected).hasClass('queen') && (Math.abs(id[0] - id[2]) === Math.abs(id[1] - id[3]) || (id[0] == id[2] || id[1] == id[3]))) {
    $(this).empty();
    $(this).append(selected);
    selected = '';
  }
  if (selected !== '' && !$(this).children().hasClass('piece') && $(selected).hasClass('king') && ((Math.abs(id[0] - id[2]) === 1) || (Math.abs(id[1] - id[3]) === 1) || ((id[0] + 1) == id[2] || (id[1] + 1) == id[3]))) {
    $(this).empty();
    $(this).append(selected);
    selected = '';
  }
});
/*
00 01 02 03 04 05 06 07
10 11 12 13 14 15 16 17
20 21 22 23 24 25 26 27
30 31 32 33 34 35 36 37
40 41 42 43 44 45 46 47
50 51 52 53 54 55 56 57
60 61 62 63 64 65 66 67
70 71 72 73 74 75 76 77
*/

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  <link href='https://fonts.googleapis.com/css?family=Roboto+Condensed' rel='stylesheet' type='text/css'>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=1" />
  <title>Chessisjustlikecheese</title>
  <style>
    html,
    body {
      position: absolute;
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    #main {
      position: absolute;
      width: 240px;
      height: 240px;
      top: calc(50% - 120px);
      left: calc(50% - 120px);
    }
    .slot {
      z-index: 10;
      position: absolute;
      outline: 1px solid #000;
      text-align: center;
      background-color: #fff;
      cursor: crosshair;
    }
    .black,
    .white {
      width: 100%;
      height: 100%;
      zoom: 1.7;
      line-height: 20px;
    }
  </style>
</head>

<body>
  <div id="main">
  </div>
</body>

</html>

＆＃13;

＆＃13;

＆＃13;