<html>
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container" id="main">
<span id="turn">X first</span>
<div class="box" id="box1"></div>
<div class="box" id="box2"></div>
<div class="box" id="box3"></div>
<div class="box" id="box4"></div>
<div class="box" id="box5"></div>
<div class="box" id="box6"></div>
<div class="box" id="box7"></div>
<div class="box" id="box8"></div>
<div class="box" id="box9"></div>
</div>
<button onclick="replay()">Play Again</button>
</body>
<script src="script.js">
</script>
</html>
在div结构中显示游戏板,而不是以表格形式。游戏应该是3条水平线和3条垂直线
发布于 2018-06-05 00:24:30
在HTML文件更改中:
<span id="turnleft">Play X</span>
<span id="turnright">Play O</span>
至:
<div id="turnleft">
<span>Play X</span>
<ul id="playerX-moves"></ul>
</div>
<div id="turnright">
<span>Play O</span>
<ul id="playerO-moves"></ul>
</div>
在CSS文件中添加:
ul
{
margin-top:.2em;
padding-left:1em;
}
在Javascript文件更改中:
document.getElementById("turnleft").textContent = "PLayerX moves in tile " + /[0-9]/.exec(this.id)[0];
document.getElementById("turnright").textContent = "PLayerO moves in tile " + /[0-9]/.exec(this.id)[0];
至:
var li =document.createElement("li");
li.textContent = "tile " + /[0-9]/.exec(this.id)[0];
document.getElementById("playerX-moves").appendChild(li);
var li =document.createElement("li");
li.textContent = "tile " + /[0-9]/.exec(this.id)[0];
document.getElementById("playerO-moves").appendChild(li);
https://stackoverflow.com/questions/50683415
复制相似问题