用HTML设计五子棋界面
时间: 2023-07-16 12:11:48 浏览: 45
以下是一个简单的 HTML 五子棋界面设计示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>五子棋</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
#board {
display: inline-block;
margin-top: 50px;
border: 2px solid black;
background-color: #FCD29D;
}
.square {
width: 50px;
height: 50px;
border: 1px solid black;
display: inline-block;
box-sizing: border-box;
cursor: pointer;
background-color: #FFE4B5;
}
.square:hover {
background-color: #FFDAB9;
}
.piece {
width: 40px;
height: 40px;
border-radius: 50%;
margin: 5px;
box-sizing: border-box;
display: inline-block;
}
.piece.white {
background-color: white;
border: 1px solid black;
}
.piece.black {
background-color: black;
border: 1px solid white;
}
h1 {
margin-top: 20px;
}
</style>
</head>
<body>
<h1>五子棋</h1>
<div id="board">
<div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><br>
<div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><br>
<div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><br>
<div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><br>
<div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><div class="square"></div><br>
</div>
<script>
var squares = document.getElementsByClassName("square");
for (var i = 0; i < squares.length; i++) {
squares[i].addEventListener("click", function() {
if (!this.hasChildNodes()) {
var piece = document.createElement("div");
piece.classList.add("piece");
if (turn % 2 === 0) {
piece.classList.add("black");
this.appendChild(piece);
} else {
piece.classList.add("white");
this.appendChild(piece);
}
turn++;
}
});
}
var turn = 0;
</script>
</body>
</html>
```
这个示例使用了 HTML 和 CSS 来设计五子棋界面,使其看起来像一个五子棋棋盘。它还包括一个 JavaScript 代码块,用于添加棋子和交替玩家回合。