Question

我使用JavaScript / TypeScript创建了一个棋盘。我试图将棋子添加到起始位置，我不知道该怎么做。如果有人可以给我一个标题，那就太棒了！

for (let i=0; i< 64; i++){
    document.getElementById("ChessBoard").
    appendChild(document.createElement("div")).
    style.backgroundColor = parseInt((i / 8) + i) % 2 == 0 ? 'white' : 'black';    
}

http://jsfiddle.net/bellwater99/4Ap4M/217/

Answer 1

国际象棋人物的HTML字符从 ♔ 映射到 ♟

♔   ♕   ♖   ♗   ♘   ♙

♚   ♛   ♜   ♝   ♞   ♟

＆＃13;

//               W = 9812..9817;  B = 9818..9823       (- 9811 =)
// (EMPTY = 0)   W = 1..6;        B = 7..12

let board = document.getElementById("ChessBoard");
let map = [
  3, 5, 4, 2, 1, 4, 5, 3,
  6, 6, 6, 6, 6, 6, 6, 6,
  0, 0, 0, 0, 0, 0, 0, 0,
  0, 0, 0, 0, 0, 0, 0, 0,
  0, 0, 0, 0, 0, 0, 0, 0,
  0, 0, 0, 0, 0, 0, 0, 0,   
  12,12,12,12,12,12,12,12,
  9,11,10, 8, 7,10,11, 9,
];

for (let i=0; i< 64; i++){
  let tile = document.createElement("div");
  tile.style.backgroundColor = parseInt((i / 8) + i) % 2 == 0 ? 'white' : 'lightgray';
  tile.innerHTML = !map[i] ? "" : "&#"+ (9811+map[i]) +";";
  board.appendChild(tile);
}

＆＃13;

#ChessBoard{
  width:420px;
  height:420px;
  border:1px solid black;
}
div{
  width:52px;
  height:52px;
  float:left;
  font-size:40px;
  line-height:52px;
  text-align:center;
}

＆＃13;

<div id="ChessBoard"></div>

＆＃13;

在开发实际游戏时，使用游戏阵列map也很有用，并继续参考当前的数字位置。

Answer 2

这应该让你开始：

var rook = [0,7,56,63];
var knight = [1,6,57,62];
var bishop = [2,5,58,61];
var king = [3,59];
var queen = [4,60]
var pawn = [8,9,10,11,12,13,14,15,48,49,50,51,52,53,54,55];

for (let i=0; i< 64; i++){
    var div = document.createElement("div");
    document.getElementById("ChessBoard").
    appendChild(div).
    style.backgroundColor = parseInt((i / 8) + i) % 2 == 0 ? 'white' : 'black';    
    div.innerHTML = i;
    if(rook.indexOf(i) !== -1){
        div.innerHTML = 'r';
    }
    if(knight.indexOf(i) !== -1){
        div.innerHTML = 'n';
    }
    if(bishop.indexOf(i) !== -1){
        div.innerHTML = 'b';
    }
    if(king.indexOf(i) !== -1){
        div.innerHTML = 'k';
    }
    if(queen.indexOf(i) !== -1){
        div.innerHTML = 'q';
    }
    if(pawn.indexOf(i) !== -1){
        div.innerHTML = 'p';
    }
}

我们可以根据for循环中的'i'为每个div设置innerhtml。这可以扩展为一个case语句，根据它的'i'将img附加到div。

如何将棋子（图像）放入我的div标签？

2 个答案: