请写一个围棋两人对峙的html
时间: 2024-04-30 16:20:44 浏览: 59
双人对垒围棋 源码
以下是一个简单的围棋对弈的HTML代码示例:
```
<!DOCTYPE html>
<html>
<head>
<title>围棋对弈</title>
<style type="text/css">
#board {
width: 500px;
height: 500px;
margin: 0 auto;
background-color: #ffcc66;
position: relative;
}
.line {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid #000;
}
.circle {
position: absolute;
border-radius: 50%;
}
.black {
background-color: #000;
}
.white {
background-color: #fff;
}
</style>
</head>
<body>
<div id="board">
<!-- 棋盘线条 -->
<div class="line" style="width: 33.3%; left: 33.3%;"></div>
<div class="line" style="width: 33.3%; left: 66.6%;"></div>
<div class="line" style="height: 33.3%; top: 33.3%;"></div>
<div class="line" style="height: 33.3%; top: 66.6%;"></div>
<!-- 棋子 -->
<div class="circle black" style="top: 50px; left: 50px;"></div>
<div class="circle white" style="top: 100px; left: 100px;"></div>
<div class="circle black" style="top: 150px; left: 150px;"></div>
<div class="circle white" style="top: 200px; left: 200px;"></div>
<div class="circle black" style="top: 250px; left: 250px;"></div>
<div class="circle white" style="top: 300px; left: 300px;"></div>
<div class="circle black" style="top: 350px; left: 350px;"></div>
<div class="circle white" style="top: 400px; left: 400px;"></div>
</div>
</body>
</html>
```
这个代码创建了一个500x500的棋盘,并在上面绘制了棋盘线条和棋子。你可以通过调整CSS样式和添加JavaScript代码来实现对弈的交互功能。
阅读全文