1.画出棋盘和棋子。让arr=[[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},],[{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},],[{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、]、[{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、]、[{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、]、[{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、]、[{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、]、[{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、]、[{}、{}、{}、{},{},{},{},{},{},{},{},{},{},{},{},],[{},{},{},{},{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、]、[{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、]、[{}、{}、{}、{}、{}、{},{},{},{},{},{},{},{},{},{},],[{},{},{},{},{},{},{}、{}、{}、{}、{}、{}、{}、{}、{}、]、[{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、]、[{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{}、{},{},{},{},],]//封装渲染函数constrender=()=>{document.querySelector('table').innerHTML=''arr.forEach((item,index)=>{lettr=document.createElement('tr')item.forEach((item2,index2)=>{lettd=document.createElement('td')//遍历数组，绘制棋盘//为td设置自定义label属性，作为坐标使用td.dataset.y=indextd.dataset.x=index2tr.appendChild(td)//对数组中的对象进行条件判断，这样就可以渲染颜色if(item2.num===1){td.classList.add('bgc1')}elseif(item2.num===2){td.classList.add('bgc2')}})document.querySelector('table').appendChild(tr)})}render()先创建一个15*15的二维数组，通过数组的二层遍历创建一个15*15的表格，这样棋盘就有了使用数组绘制棋盘的优点是便于查找和筛选。每个td对应一个空对象。下棋的时候给这个对象加上一个num属性。当num为1时，将渲染为黑色，2将渲染为白色。然后稍微调整一下css样式，这样棋盘和棋子就绘制好了。每个td都有自己的自定义属性x和y，类似于坐标，这样可以很方便的将td标签和数组中对应的值关联起来。下面是css代码
