國際象棋棋盤使用JavaScript和DOM

enter image description here

我確實創造了一個表，並don'r知道如何顏色故。 A還需要打印板名（如A1，A2，... H8），並且能夠在任何單元格中剔除任何圖形。

對於啓動，這是創建一個表的代碼：

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>ChessBoard</title> 

    <script type="text/javascript"> 
     function CreateTable(){ 
      var poz = document.getElementById('space'); 

      // createing table adn inserting into document 
      tab = document.createElement('table'); 
      poz.appendChild(tab); 

      tab.border = '5'; 

      for (var i = 0; i < 8; i++){ 
       // creating row and inserting into document 
       var row = tab.insertRow(i); 

       for(var j = 0; j < 8; j++){ 
        // creating cells and fill with data (numbers) 
        var cell = row.insertCell(j); 
        cell.innerHTML = i*j; 
        cell.style.backgroundColor = 'blue'; 
        cell.style.color = 'white'; 
        cell.style.height = '50px'; 
        cell.style.width = '50px'; 

       }; 
      }; 

     } 
    </script> 
</head> 

<body onload="CreateTable()" id ="space"> 

</body> 
</html>

如何填寫特定的細胞與數字（如A3，E5，H8，...）？圖是imgages。

第2部分：我的確在您的幫助下創建了一個電路板。現在我試圖從這段代碼做更多的事情。

如何將幾個不同的圖像放到幾個單元格中？我試圖獲得正確的工作代碼，但沒有成功。這個圖像應該在tabel被加載時出現（當我按下CreateTable按鈕時）。我嘗試使用此代碼創建：
在這一點上，我想將數字放在船上。當我創建表時，它應該是空白的。然後會有按鈕添加數字。在開始的時候對每個不同的人物自己的按鈕

是這樣的：

function addKing(idStr){ 
    cell = document.getElementById(idStr);  
    if(cell != null){ 
    // works for color, doesn't work for images!! 
    // cell.style.backgroundColor = 'red'; 
     cell.src = 'http://akramar.byethost8.com/images/SplProg/DN3/images/50px/king_m.png' 
    } 
}

按鈕addKing在HTML：

<button id="king" onclick="addKing(prompt('Insert field'))">Add King</button>

升級previousu代碼甚至更好，如果我可以放在一起，並選擇我喜歡插入哪一個（promtpt窗口1：什麼數字：'國王，女王，...'，提示窗口2：在什麼位置你想插入：'A1，B3，...'））。

function addImage（type，position）var img = ?? }

當我PRES按鈕添加圖像提示窗口應該出現，並要求型（國王，王后，根，...）和位置（A1，B4，...）（進一步更新，甚至可能是彩色（黑色或白色），但讓逐步構建）。

所有這是棋盤我想建立只在JavaScript和DOM。

鏈接不工作的exaple：jsfiddle

來源

2013-03-26 Phantom

如何使用CSS背景圖片？ – 2013-03-26 23:30:33

到目前爲止您嘗試了哪些解決方案？有不同的方法可以完成這一點。 – 2013-03-26 23:31:03

您應該在創建單元時將單元存儲在數組中。 innerHTML線是奇怪的;那會寫'0,0,0,0,0,0,0,0; 0,1,2,3,4,5,6,7; 0,2,4，...'。要寫一個字母，你可以使用一個字符串「ABCDEFG」和'charAt' – Dave 2013-03-26 23:32:05

頂循環中創建一個新變量保存行（如A，B，C）的「信」的名字。

// creating row and inserting into document 
var row = tab.insertRow(i); 
var row_letter = String.fromCharCode(65 + i);

然後在第二個循環中合併行號和列號。

cell.innerHTML = row_letter + j;

來源

2013-03-26 23:32:59 Wireblue

假設你需要只支持現代瀏覽器中，棋盤是完全做，能夠與使用計數器CSS和生成內容：

table { 
    empty-cells: show; 
} 

td { 
    width: 2em; 
    height: 2em; 
    line-height: 2em; 
    text-align: center; 
    border: 1px solid #000; 
} 

tbody tr:nth-child(odd) td:nth-child(even), 
tbody tr:nth-child(even) td:nth-child(odd) { 
    color: #fff; 
    background-color: #00f; 
} 

tbody tr:nth-child(even) td:nth-child(even), 
tbody tr:nth-child(odd) td:nth-child(odd) { 
    background-color: #999; 
} 

tbody { 
    counter-reset: rowNumber; 
} 

tr { 
    counter-increment: rowNumber; 
    counter-reset: cellNumber; 
} 

td { 
    counter-increment: cellNumber; 
} 

td::before { 
    content: counter(rowNumber, upper-alpha) counter(cellNumber, decimal); 
}

JS Fiddle demo。

上述內容在Chromium 24和Firefox 19上都進行了測試，都在Ubuntu 12.10上進行了測試。

而對於一個JavaScript方法：

var chess = { 
    createBoard: function (dimension) { 
     if (!dimension || isNaN(dimension) || !parseInt(dimension, 10)) { 
      return false; 
     } else { 
      dimension = typeof dimension === 'string' ? parseInt(dimension, 10) : dimension; 
      var table = document.createElement('table'), 
       tbody = document.createElement('tbody'), 
       row = document.createElement('tr'), 
       cell = document.createElement('td'), 
       rowClone, 
       cellClone; 
      table.appendChild(tbody); 
      for (var r = 0; r < dimension; r++) { 
       rowClone = row.cloneNode(true); 
       tbody.appendChild(rowClone); 
       for (var c = 0; c < dimension; c++) { 
        cellClone = cell.cloneNode(true); 
        rowClone.appendChild(cellClone); 
       } 
      } 
      document.body.appendChild(table); 
      chess.enumerateBoard(table); 
     } 
    }, 
    enumerateBoard : function (board) { 
     var rows = board.getElementsByTagName('tr'), 
      text = document.createTextNode(), 
      rowCounter, 
      len, 
      cells; 
     for (var r = 0, size = rows.length; r<size; r++){ 
      rowCounter = String.fromCharCode(65 + r); 
      cells = rows[r].getElementsByTagName('td'); 
      len = cells.length; 
      rows[r].className = r%2 == 0 ? 'even' : 'odd'; 
      for (var i = 0; i<len; i++){ 
       cells[i].className = i%2 == 0 ? 'even' : 'odd'; 
       cells[i].appendChild(text.cloneNode()); 
       cells[i].firstChild.nodeValue = rowCounter + i; 
      } 
     } 
    } 
}; 

chess.createBoard(10);

JS Fiddle demo。

來源

2013-03-26 23:39:41

哇，多麼神奇，不錯：D +1 – ceruleus 2013-03-26 23:52:02

@ceruleus：謝謝你的親切！ =） – 2013-03-27 00:26:11

如何添加圖像？我編輯我的問題上的帖子 – Phantom 2013-03-28 18:57:12

您可以將ID綁定到單元格，然後根據需要使用該ID來引用和更新背景。下面是使用代碼一個例子：http://jsfiddle.net/7Z6hJ

function CreateTable(){ 
      var poz = document.getElementById('space'); 

      // createing table adn inserting into document 
      tab = document.createElement('table'); 
      poz.appendChild(tab); 

      tab.border = '5'; 

      for (var i = 0; i < 8; i++){ 
       // creating row and inserting into document 
       var row = tab.insertRow(i); 

       for(var j = 0; j < 8; j++){ 
        // creating cells and fill with data (numbers) 
        var cell = row.insertCell(j); 
        var idStr = String.fromCharCode(97 + i).toUpperCase() + (j+1); 
        cell.innerHTML = idStr; 
        cell.id = idStr; 
        cell.style.backgroundColor = 'blue'; 
        cell.style.color = 'white'; 
        cell.style.height = '50px'; 
        cell.style.width = '50px'; 

       }; 
      }; 

     } 
function updateRow(idStr) 
{ 
    cell = document.getElementById(idStr);  
    if(cell != null) 
    { 
     cell.style.backgroundColor = 'red'; 
    } 
}

如一些人所提到的，有可能是一個更好的方式去了解這（使用CSS和jQuery等），但這個答案棍棒與你有什麼至今。

來源

2013-03-26 23:41:28 Nate

其實，你需要做一些正確的着色和添加標籤的數學。這裏是做魔法的部分代碼：

   1  cell.innerHTML = String.fromCharCode(65 + i) + (j + 1); 
      2  if((i+j)%2){ cell.style.backgroundColor = 'white'; } 
      3  else{ cell.style.backgroundColor = 'blue'; } 
      4  cell.style.color = 'black'; 
      5  cell.style.height = '50px'; 
      6  cell.style.width = '50px';

讓我解釋一下。在第一行中，您採用常量65，即字母'A'的ASCII碼。當你逐行改變字母的時候，你可以給它添加i計數器，所以你可以得到65 + 0，65 + 1，...，65 + 7。他們的ASCII等價物（你可以用String.fromCharCode()得到）是A，B，...，H.現在，當你有這個字母時，很容易將它的單元格數量增加到(j + 1)。您可以刪除'1'並僅留下j，並使內部循環從1到8.

第2,3行：顏色交替顯示 - 每隔一行都有相同的顏色。所以，只要測試我是否可以將i + j除以2.

對於添加圖，您必須使某些功能可以執行cell.innerHTML = <SOME IMAGE>。但是，我想，這是第二個問題。

希望我幫你理解了邏輯。

來源

2013-03-26 23:50:16 ceruleus

如果有人正在尋找一種使用JS來形象化棋盤的方法（正如我正在做的，並且意外地來到了這個問題），這裏有一個很好的JS library來做到這一點。

的JavaScript

var ruyLopez = 'r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R'; 
var board = new ChessBoard('board', ruyLopez);

HTML

：

它可以只通過執行以下命令來創建這樣的

enter image description here

在任何時間

以及更多

<div id="board" style="width: 400px"></div>

來源

2013-11-24 11:15:43

國際象棋棋盤使用JavaScript和DOM

回答

相關問題