HTML写一个五子棋小游戏

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title>五子棋</title>
    <link rel="stylesheet" href="gobangCss.css">
</head>
<body>
<div class="main">
    <div class="tip">
        <h4>欢迎来到该五子棋游戏</h4>
        <div class="check">
            <p>点击下图案选择先行棋子:<span id="checkColor">暂未选择</span></p>
            <div class="blackPut" onclick="selctAdvanceColor(1)"></div>
            <div class="whitePut" onclick="selctAdvanceColor(0)"></div>
        </div>
    </div>
    <div class="canvas"></div>
    <button onclick="repentChess()" class="repentButton">悔棋</button>
    <button onclick="repent()" class="repent">重开</button>
</div>
</body>
<script src="gobanJS.js"></script>
</html>

CSS代码

*{
    padding: 0;
    margin: 0;
}
.main{
    width: 100%;
    height: 100%;
}
.tip{
    width: 100%;
    height: 100%;
    display: inline-block;
    text-align: center;
}
.canvas{
    display: grid;
    grid-template-columns: repeat(13,25px);
    grid-template-rows: repeat(13,25px);
    width: calc(13*25px);
    height: calc(13*25px);
    background-color: #D8E2F2;
    margin-left: calc((100% - 13*25px)/2);
}
.box{
    border: 1px solid black;
    height: 24px;
    width: 24px;
}
.whitePut{
    border: solid #000000;
    background-color: White;
    border-radius: 50%;
    height: 21px;
    width: 21px;
    display: inline-block;
}
.blackPut{
    border: solid black;
    background-color: black;
    border-radius: 50%;
    height: 21px;
    width: 21px;
    display: inline-block;
}
.repentButton{
    width: 32px;
    height: 20px;
    margin-left: calc((100% - 2*34.5px)/2);
    margin-top: 2px;
}
.repent{
    width: 32px;
    height: 20px;
    margin-left: 5px;
}

JS代码

let saveAdvanceColor=undefined
let divElement
//存放白棋ID数组
let saveWhiteID=[]
//存放黑棋ID数组
let saveBlackID=[]
//对相同棋子的计数 方便判断是否5个
let allCount=0

//创建棋盘
function createBox() {
  divElement = document.getElementsByClassName('canvas')[0]
  for (let i =0;i<169;i++){
    let element=document.createElement('div')
    element.className="box"
    element.id=i+1
    element.style.border="1px black solid"
    element.addEventListener('click',(event)=>{
      checkGrid(event)
    })
    divElement.appendChild(element)
  }
}
createBox()

//选择先行棋子
function selctAdvanceColor(controlMath) {
  //controlMath 0-白色 1-黑色
  divElement=document.getElementById('checkColor')
  divElement.innerText=controlMath?"黑棋先行":"白棋先行"
  document.getElementsByClassName("blackPut")[0].style.pointerEvents="none"
  document.getElementsByClassName("whitePut")[0].style.pointerEvents="none"
  saveAdvanceColor=controlMath?1:0
}

//得到点击DIV周围的DIV数
function satisfyDivArr(id) {
  //左边界
  if (id%13===1)
    return [id-13,id-12,id+1,id+13,id+14]
  //右边距
  if (id%13===0)
    return [id-14,id-13,id-1,id+12,id+13]
  //右边界
  if (id%13!==1&amp;&amp;id%13!==0)
    return [id-14,id-13,id-12,id-1,id+1,id+12,id+13,id+14]
}

//对得到的DIV进行过滤过滤
function divArrFilter(id) {
  let divIdArr=satisfyDivArr(id)
  divIdArr=divIdArr.filter(item=>{
    return item>=1&amp;&amp;item<=169
  })
  return divIdArr
}

//白色查询
function searchWhite(nextId,controlMath) {
  if (saveWhiteID.includes(nextId)){
    allCount++
    ergodicDirection(nextId,controlMath)
  }
}
//黑色查询
function searchBlack(nextId,controlMath) {
  if (saveBlackID.includes(nextId)){
    allCount++
    ergodicDirection(nextId,controlMath)
  }
}

//根据差值选择遍历方向
function ergodicDirection(nextId,controlMath) {
  console.log("NextID:"+nextId)
  nextId=nextId-controlMath
  switch (controlMath) {
    //斜上左
    case 14:
      if (saveAdvanceColor){
        searchBlack(nextId,controlMath)
      }else {
        searchWhite(nextId,controlMath)
      }
      break
    //正上方
    case 13:
      if (saveAdvanceColor){
        searchBlack(nextId,controlMath)
      }else {
        searchWhite(nextId,controlMath)
      }
      break
    //斜上右
    case 12:
      if (saveAdvanceColor){
        searchBlack(nextId,controlMath)
      }else {
        searchWhite(nextId,controlMath)
      }
      break
    //左边
    case 1:
      if (saveAdvanceColor){
        searchBlack(nextId,controlMath)
      }else {
        searchWhite(nextId,controlMath)
      }
      break
    //右边
    case -1:
      if (saveAdvanceColor){
        searchBlack(nextId,controlMath)
      }else {
        searchWhite(nextId,controlMath)
      }
      break
    //斜向左
    case -12:
      if (saveAdvanceColor){
        searchBlack(nextId,controlMath)
      }else {
        searchWhite(nextId,controlMath)
      }
      break
    //正下
    case -13:
      if (saveAdvanceColor){
        searchBlack(nextId,controlMath)
      }else {
        searchWhite(nextId,controlMath)
      }
      break
    //斜向右
    default:
      if (saveAdvanceColor){
        searchBlack(nextId,controlMath)
      }else {
        searchWhite(nextId,controlMath)
      }
      break
  }
}

//对过滤后的DIV进行遍历判断是否继续判断
function findSameColorID(id) {
  let controlMath
  let divIdArr=divArrFilter(id)
  for (let i of divIdArr){
    if (!saveAdvanceColor){
      //白色
      console.log("白")
      if (saveWhiteID.includes(i)){
        controlMath=id-i
        allCount++
        ergodicDirection(i,controlMath)
        if (allCount+1===5){
          setTimeout(()=>{
            alert("白棋获胜!")
            location.reload()
          },100)
        }
        allCount=0
      }
    }else{
      //黑色
      console.log("黑")
      if (saveBlackID.includes(i)){
        controlMath=id-i
        allCount++
        ergodicDirection(i,controlMath)
        if (allCount+1===5){
          setTimeout(()=>{
            alert("黑棋获胜！")
            location.reload()
          },100)
        }
        allCount=0
      }
    }
  }
}
//悔棋按钮
function repentChess() {
  if(saveAdvanceColor){
    saveAdvanceColor--
    divElement=document.getElementById(saveWhiteID[saveWhiteID.length-1])
    divElement.style.pointerEvents="auto"
    divElement.children[0].remove()
    saveWhiteID.pop()
  }else{
    saveAdvanceColor++
    divElement=document.getElementById(saveBlackID[saveBlackID.length-1])
    divElement.style.pointerEvents="auto"
    divElement.children[0].remove()
    saveBlackID.pop()
  }
}

//重开
function repent() {
  location.reload()
}

//点击改变DIV事件
function checkGrid(event) {
  if (saveAdvanceColor===undefined){
    alert("抱歉，您还未选择先行棋子")
  }else{
    divElement=event.path[0]
    divElement.innerText=""
    findSameColorID(Number(divElement.id))
    if (saveAdvanceColor){
      saveAdvanceColor--
      divElement.style.pointerEvents="none"
      divElement.innerHTML="<div class='blackPut'/>"
      saveBlackID.push(Number(divElement.id))
    }else{
      saveAdvanceColor++
      divElement.style.pointerEvents="none"
      divElement.innerHTML="<div class='whitePut'/>"
      saveWhiteID.push(Number(divElement.id))
    }
  }
}