2 回答

TA貢獻(xiàn)1812條經(jīng)驗(yàn) 獲得超5個(gè)贊
我會(huì)創(chuàng)建一個(gè)空板并且不再重新創(chuàng)建它。只需為每個(gè)圖塊提供特定的類或 ID 及其坐標(biāo),例如<div id='tile-0-7', class='tile'></div>. 然后,不必刪除并重新創(chuàng)建整個(gè)板,只需清空內(nèi)容并使用以下內(nèi)容填充必要的內(nèi)容即可:
let specialSquares = {
'3xW': [0, 7, 105],
'3xL': [20, 76, 80],
'2xW': [16, 32, 48, 64],
'2xL': [3, 36, 45, 52, 92, 96, 108],
'CS': [112],
};
let boardSide = 15;
$('.tile').html('_');
Object.keys(specialSquares).forEach(squareName => {
let tiles = specialSquares[squareName];
tiles.forEach(tile => {
let x = Math.floor(tile / boardSide);
let y = tile % boardSide;
$(`#tile-${x}-${y}`).html(squareName);
})
})
要?jiǎng)?chuàng)建矩陣,我會(huì)這樣:
function createBoard() {
let specialSquares = {
'3xW': [0, 7, 105],
'3xL': [20, 76, 80],
'2xW': [16, 32, 48, 64],
'2xL': [3, 36, 45, 52, 92, 96, 108],
'CT': [112],
};
let boardSide = 15;
this.board = Array(boardSide).fill(0).map(() => Array(boardSide).fill('_'));
Object.keys(specialSquares).forEach(squareName => {
let tiles = specialSquares[squareName];
tiles.forEach(tile => {
let x = Math.floor(tile / boardSide);
let y = tile % boardSide;
this.board[x][y] = squareName;
});
})
}

TA貢獻(xiàn)1831條經(jīng)驗(yàn) 獲得超4個(gè)贊
我采取了一些自由措施并重新排列了您的內(nèi)容specialSquares,以便更輕松地從循環(huán)中進(jìn)行訪問??纯催@個(gè):
let buildBoard = () => {
let height = 14;
let width = 14;
let board_container = $("#board_container");
let counter = 0;
for (let i=0; i < height; i++) {
if ($(board_container).html()) {
$(board_container).html($(board_container).html()+"<br>");
}
for (let j = 0; j < width; j++) {
//console.log(i, j);
let boardValue = specialSquares[counter];
if (boardValue) {
$(board_container).append(`<div id='cell_${counter}' class='non_blank'>${boardValue}</div>`);
} else {
$(board_container).append(`<div id='cell_${counter}'>${counter}</div>`);
}
counter++;
}
}
}
let specialSquares = {
0: '3xW',7: '3xW',105: '3xW',
20: '3xL',76: '3xL',80: '3xL',
16: '2xW',32: '2xW',48: '2xW',64: '2xW',
3: '2xL', 36: '2xL', 45: '2xL', 52: '2xL', 92: '2xL', 96: '2xL', 108: '2xL',
112: 'CS'
}
buildBoard();
這里有一個(gè) JSFiddle:https ://jsfiddle.net/dbrc12vt/3/
您沒有提供 CSS,因此格式不太漂亮。但只要您認(rèn)為合適,就可以插入您自己的。
另請注意,每個(gè)單元格都有一個(gè)與其索引相對應(yīng)的 ID,例如cell_112。您現(xiàn)在可以將它們用作后續(xù)選擇器操作的參考。
添加回答
舉報(bào)