国际象棋棋盘使用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

回答

相关问题