javascript - 使用 javascript 在表格中移动图像

Question

我终于从头开始完成了一个棋盘的小标记。代码非常简单，可能可以更容易地完成，但是我想在回去看看我可以做得更好之前完成该项目。

话虽这么说，我在尝试移动棋盘上的棋子时遇到了很多问题，所以我希望有人能给我一些下一步该去哪里的建议。

结帐https://github.com/kevin6767/Chessboard.js

希望有人能快速浏览一下并很快找出答案或为我指出正确的方向

我研究了 onclick 和 onmousedown 选项，但是一旦我让图像中的代码保持不变，我就不会收到错误或任何错误，它们只是保持相同的行为。

Answer 1

问题是您的 genBoard 函数没有动态数据，因此每次调用它时它总是会生成完全相同的板。

这就是问题所在:

function genBoard (){
  // these image sets are always the same
  var urls1 = ["image/a0.png",/* ...etc */]
  var urls2 = ["image/a8.png",/* ...etc */]
  var urls3 = ["image/a16.png",/* ...etc */]
  var urls4 = ["image/a24.png",/* ...etc */]

  // the rest renders the board using the image sets that never change
}

我不确定您打算通过什么交互来允许用户移动棋子，但您需要跟踪哪些棋子被移动到哪里并重新渲染这些棋子。我将有一个单独的函数来渲染棋盘和棋子。这可能看起来像这样:

const whitePieces = [
  { id: "wr1", name: "rook", color: "white", position: "A8" },
  { id: "wk1", name: "knight", color: "white", position: "B8" },
  { id: "wb1", name: "bishop", color: "white", position: "C8" },
  { id: "wk", name: "king", color: "white", position: "D8" },
  { id: "wq", name: "queen", color: "white", position: "E8" },
  { id: "wb2", name: "bishop", color: "white", position: "F8" },
  { id: "wk2", name: "knight", color: "white", position: "G8" },
  { id: "wr2", name: "rook", color: "white", position: "H8" },
  { id: "wp1", name: "pawn", color: "white", position: "A7" },
  { id: "wp2", name: "pawn", color: "white", position: "B7" },
  { id: "wp3", name: "pawn", color: "white", position: "C7" },
  { id: "wp4", name: "pawn", color: "white", position: "D7" },
  { id: "wp5", name: "pawn", color: "white", position: "E7" },
  { id: "wp6", name: "pawn", color: "white", position: "F7" },
  { id: "wp7", name: "pawn", color: "white", position: "G7" },
  { id: "wp8", name: "pawn", color: "white", position: "H7" }
];

const blackPieces = [
  { id: "br1", name: "rook", color: "black", position: "A1" },
  { id: "bk1", name: "knight", color: "black", position: "B1" },
  { id: "bb1", name: "bishop", color: "black", position: "C1" },
  { id: "bk", name: "king", color: "black", position: "D1" },
  { id: "bq", name: "queen", color: "black", position: "E1" },
  { id: "bb2", name: "bishop", color: "black", position: "F1" },
  { id: "bk2", name: "knight", color: "black", position: "G1" },
  { id: "br2", name: "rook", color: "black", position: "H1" },
  { id: "bp1", name: "pawn", color: "black", position: "A2" },
  { id: "bp2", name: "pawn", color: "black", position: "B2" },
  { id: "bp3", name: "pawn", color: "black", position: "C2" },
  { id: "bp4", name: "pawn", color: "black", position: "D2" },
  { id: "bp5", name: "pawn", color: "black", position: "E2" },
  { id: "bp6", name: "pawn", color: "black", position: "F2" },
  { id: "bp7", name: "pawn", color: "black", position: "G2" },
  { id: "bp8", name: "pawn", color: "black", position: "H2" }
];

function genBoard() {
  var columns = ["A", "B", "C", "D", "E", "F", "G", "H"];
  var table = document.createElement("table");
  table.setAttribute("id", "myTable");

  for (var i = 0; i < 8; i++) {
    var row = document.createElement("tr");
    for (var j = 0; j < 8; j++) {
      var cell = document.createElement("td");
      cell.id = columns[j] + (i + 1);
      if (i % 2 == j % 2) {
        cell.className += "white" + (j + 1);
      } else {
        cell.className += "grey" + (j + 1);
      }
      row.appendChild(cell);
    }
    table.appendChild(row);
  }

  document.body.appendChild(table);
}

function placePieces() {
  whitePieces.concat(blackPieces).forEach(function(piece) {
    var tile = document.getElementById(piece.position);
    var img = document.createElement("img");
    var name = piece.name + "-" + piece.color;
    img.src = "image/" + name + ".png";
    img.id = piece.id;
    img.alt = name;
    tile.appendChild(img);
  });
}

genBoard();
placePieces();

然后，您需要跟踪点击次数以了解有人想要移动哪一 block 以及移动到哪里。根据片段的 ID 更新其位置并重新渲染片段。