javascript - 如何用css和javascript绘制围棋棋盘

Question

我正在尝试使用 html/css/js 绘制棋盘，但我想不出一个好的方法。这就是我所做的:

#Board {position: relative; left:100; top:100; height:570; width:570;}
.Square {position: absolute; height:30; width:30; background-color:#DCB579; border-color: black; border-width: 1; border-style: solid;}

.lineh0{top:0;}
.lineh1{top:30;}
.lineh2{top:60;}
.lineh3{top:90;}
.lineh4{top:120;}
.lineh5{top:150;}
.lineh6{top:180;}
.
.
.lineh18{top:540;}

.linev0{left:0;}
.linev1{left:30;}
.linev2{left:60;}
.linev3{left:90;}
.linev4{left:120;}
.linev5{left:150;}
.linev6{left:180;}
.
.
.linev18{left:540;}

我使用这些在板上绘制正方形的方式是我在 Board 元素内创建元素，其中包含 Square 类和 lineh和 linev 类取决于正方形的位置。例如左上角和右下角的正方形:

<div id="Board">
<div class="Square lineh0 linev0"></div>
<div class="Square lineh18 linev18"></div>
</div>

问题是围棋棋盘上有 361 个方 block ，用手全部打出来不是很好的技术。我的问题是什么是更好的方法？

Answer 1

准备你的 #Board 作为具有正确列数和行数的网格(提示:grid-template-columns: repeat(19, 30px); )

通过 grid-row 和 grid-column 定位您的 .Square，通过 javascript 在 div 的样式属性中设置，而不是使用类。