Question

我正在尝试制作国际象棋游戏，而且我真的只是开始学习jquery。我有一块8 * 8的板子，我正试图在右下方的起始位置添加一个车，我该怎么做？我尝试为图像制作一个CSS并添加为id。

HTML 棋

<h1> Game Board </h1>
<table id="gameBoard">
<tbody></tbody>
</table>
<img id="whiterook">
</img>
<footer>
This is an example of creating a chess Game.
</footer>
<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/chess.js"></script></body>
</html>

JS

$(function() {

 var row = new Array(9).join('<td></td>');
 var body = new Array(9).join('<tr>' + row + '</tr>');

 });

CSS

#gameBoard {
 border-collapse: collapse;
 border: solid 1px black;
}
#gameBoard td {
  width: 50px;
  height: 50px;
}
#gameBoard tbody tr:nth-child(2n+1) td:nth-child(2n) {
  background-color: black;
}
#gameBoard tbody tr:nth-child(2n+2) td:nth-child(2n +1) {
  background-color: black;
}
#whiterook{
background-image: url(../images/Chess_tile_rl.png);
width: 40px;
height: 40px;
top:300px;
}

Answer 1

这个设置/解决方案有很多可疑的事情，但我会回答你的问题。

$('#whiterook').attr('src','/images/Chess_tile_rl.png');

如果要将src添加到img标记，则可以删除#whiterook元素的背景图像样式。 img元素是所谓的替换内联元素，它不支持background-image属性。

Answer 2

使用CSS制作游戏会有点困难，我强烈建议您使用html5和javascript，这里有一些简单的棋步游戏教程：

http://www.html5gamedevs.com/topic/11008-learning-to-write-a-javascript-chess-game/

https://geeksretreat.wordpress.com/2012/06/01/html-5-canvas-chess-board/

希望它有所帮助！

在jquery中添加图像

2 个答案: