使用Javascript的簡單國際象棋棋盤

不幸的是，我無法獲得棋子的圖像來填充我製作的棋盤。棋盤看起來不錯，但我已經創建了我插入的代碼來創建主教。我試圖在第二列的廣場上每隔一個添加主教的頂部。不幸的是，我在每塊瓷磚的中心都有一位非常小的主教！這是我的造型，.td1 =白色正方形，.td2 =正規棋盤上的黑色正方形。使用Javascript的簡單國際象棋棋盤

image 
{ 
    position : relative; 
    max-width : 100%; 
    max-height : 100%; 
    height : 100%; 
} 

table 
{ 
    border-collapse : collapse; 
} 

.td1 { 
    padding: 10px; 
    margin : 0px; 
    background-color : gray; 
    border-style: solid; 
    border-width: 1px; 
    border-color : black; 
    position : relative; 
    width : 12px; 
    height : 12px; 
} 


.td2 
{ 
    padding: 10px; 
    margin : 0px; 
    background-color : yellow; 
    border-style: solid; 
    border-width: 1px; 
    border-color : black; 
    position : relative; 
    width : 12px; 
    height : 12px; 
}

下面是javascript代碼，我增加了一個額外的，如果將稍後上更改，語句插入主教圖像上2列每隔一個。

for (x=0; x<rows; x++) 
    { 
     board +="<tr>"; 
     for (y=0; y<cols;y++) 
     { 
     switch1 = x%2; 
     if (y==1 && y%2 == switch1) //just for test purposes 
      board +="<td class=\"" + "td1\">" + "<img src=\"white bishop.png\" width=12px height=12px>" /<---add image here. 
     else if (y%2 == switch1) 
      board +="<td class=\"" + "td1\">" ; 
     else 
      board +="<td class=\"" + "td2\">"; 
     } 
     board +="</tr>"; 
    } 

<link rel="stylesheet" href="styles.css"> 
<script src="sample.js" src="model.js"></script> 
<script src="model.js"></script> 
</head> 


<body onload ="start()"> 
<table> 
<div id ="gridDiv"> </div> 
</table> 
</body>

來源

2014-10-06 zissler

您能否提供一個現場示例？ – enguerranws 2014-10-06 20:30:43

@Shomz隨意做到這一點，但請注意有一些外部資源，所以我很確定我們不能重現它。 – enguerranws 2014-10-06 20:32:17

如果你把你的代碼放在一個codepen中，這將會很有幫助。就像一眼，在CSS你有圖像{}（非常第一行），它可能應該是img。 – coopersita 2014-10-06 20:32:50

的HTML屬性width或height用於<img>元素採取的值以像素爲單位，例如width=100。沒有其他允許的值，如%或em，所以您不需要，實際上也不能將px添加到您的值中。

將board +="<td class=\"" + "td1\">" + "<img src=\"white bishop.png\" width=12px height=12px>"更改爲board +="<td class=\"" + "td1\">" + "<img src=\"white bishop.png\" width=12 height=12>"並試一試。

來源

2014-10-06 20:32:06 lexith

使用Javascript的簡單國際象棋棋盤

回答

相關問題