原生js實(shí)現(xiàn)五子棋游戲的代碼詳解

發(fā)布時(shí)間：2020-07-21 14:49:26 來(lái)源：億速云閱讀：183 作者：小豬欄目：web開(kāi)發(fā)

這篇文章主要講解了原生js實(shí)現(xiàn)五子棋游戲的代碼詳解，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

html:

<body>
 <h3>五子棋游戲</h3>
 <div id="box">
  <div id="box01"></div>
  <div id="box02">haha</div>
 </div>
</body>

css:

<style type="text/css">
  *{
   margin: 0;
   padding: 0;
  }
  body{
   /*overflow: hidden;*/
   margin-top: 10px;
   text-align: center;
   background-color: #C7C7C7;
  }
  #box{
   position: relative;
   border: 1px solid;
   margin: 20px auto;
   width: 546px;
   height: 546px;
   background-color: #C7C7C7;
  }
  #box .squre{
   width: 40px;
   height: 40px;
   border: 1px solid;
   float: left;
  }
  #box01 .squre:hover{
   background-color: pink;
  }
  #box01{
   position: absolute;
   /*border: 1px solid;*/
   margin: 0 auto;
   width: 588px;
   height: 588px;
   /*background-color: pink;*/
   /*opacity: 0.5;*/
   top: -20px;
   left: -20px;
  }
  #box01 .qz{
   width: 30px;
   height: 30px;
   border: 1px solid #C7C7C7;
   float: left;
   border-radius: 50%;
   margin: 5px;
  }
  #box01 .qz:hover{
   background-color: pink;
  }
  #box02{
   position: absolute;
   line-height: 546px;
   font-size: 50px;
   color: black;
   width: 100%;
   background-color: pink;
   display: none;
   opacity: 0.6;
  }
</style>

script:

<script type="text/javascript">
  window.onload = function () {
   let box = document.getElementById("box");
   let box01 = document.getElementById("box01");
   //畫(huà)棋盤(pán)
   let arr = new Array();
   for (let i=0;i<13;i++){
    arr[i] = new Array();
    for (let j=0;j<13;j++){
     arr[i][j] = document.createElement("div");
     arr[i][j].className = "squre";
     box.appendChild(arr[i][j]);
    }
   }
   //畫(huà)棋子
   let arr01 = new Array();
   for (let i=0;i<14;i++){
    arr01[i] = new Array();
    for (let j=0;j<14;j++){
     arr01[i][j] = document.createElement("div");
     arr01[i][j].className = "qz";
     box01.appendChild(arr01[i][j]);
    }
   }
   for (let m=0;m<14;m++){
    for (let n=0;n<14;n++){
     arr01[m][n].onclick = function () {
      //下棋之前統(tǒng)計(jì)一下黑白棋的個(gè)數(shù)，以便黑白交換下棋
      let count = 0;
      for (let l = 0; l < 14; l++) {
       for (let k = 0; k < 14; k++){
        if (arr01[l][k].style.backgroundColor != "") {
         count++;
        }
       }
      }
      // console.log(count);
      if (this.className == "qz" && count % 2 == 0 && this.style.backgroundColor == "") {
       //下棋
       this.style.backgroundColor = "black";
       //引入判斷函數(shù)
       // console.log(m,n);
       checkGame(m, n);

      } else if (this.className == "qz" && count % 2 != 0 && this.style.backgroundColor == "") {
       //下棋
       this.style.backgroundColor = "white";
       //引入判斷函數(shù)
       checkGame(m, n);
      }
     }
    }
   }

   //判斷哪方輸贏(yíng),四個(gè)方向（橫向、縱向、左斜、右斜）
   //m是y軸，n是x軸
   let a,b;
   let flag = 0;
   let box02 = document.getElementById("box02");
   function checkGame(a,b) {
    //判斷橫向
    let qzColor = arr01[a][b].style.backgroundColor;
    // console.log(qzColor);
    for (let k=(b-4);k<=(b+4);k++){
     if (k>=0 && k < 14){
      if (qzColor == arr01[a][k].style.backgroundColor && arr01[a][k].style.backgroundColor != ""){
       flag++;
       if (flag == 5){
        // alert(qzColor+" win!!");
        box02.innerHTML = qzColor+" win!!";
        box02.style.display = "block";
       }
      } else {
       flag = 0;
      }
     } else {
      flag = 0;
     }
    }

    //判斷縱向
    for (let k=(a-4);k<=(a+4);k++){
     if (k>=0 && k < 14){
      if (qzColor == arr01[k][b].style.backgroundColor && arr01[k][b].style.backgroundColor != ""){
       flag++;
       if (flag == 5){
        // alert(qzColor+" win!!");
        box02.innerHTML = qzColor+" win!!";
        box02.style.display = "block";
       }
      } else {
       flag = 0;
      }
     } else {
      flag = 0;
     }
    }

    //判斷左斜
    let ax = (a-4);//ax用來(lái)記錄橫坐標(biāo)的變化
    for (let k=(b-4);k<=(b+4);k++){
     if (k>=0 && k < 14 && ax>=0 && ax<14){
      if (qzColor == arr01[ax][k].style.backgroundColor && arr01[ax][k].style.backgroundColor != ""){
       flag++;
       if (flag == 5){
        // alert(qzColor+" win!!");
        box02.innerHTML = qzColor+" win!!";
        box02.style.display = "block";
       }
      } else {
       flag = 0;
      }
     } else {
      flag = 0;
     }
     ax++;
    }

    //判斷右斜
    bx = a-4;
    for (let k=(b+4);k>=(b-4);k--){
     if (k>=0 && k < 14 && bx>=0 && bx<14){
      if (qzColor == arr01[bx][k].style.backgroundColor && arr01[bx][k].style.backgroundColor != ""){
       flag++;
       if (flag == 5){
        // alert(qzColor+" win!!");
        box02.innerHTML = qzColor+" win!!";
        box02.style.display = "block";
       }
      } else {
       flag = 0;
      }
     } else {
      flag = 0;
     }
     bx++;
    }
   }
  }
</script>

看完上述內(nèi)容，是不是對(duì)原生js實(shí)現(xiàn)五子棋游戲的代碼詳解有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

原生js實(shí)現(xiàn)五子棋游戲的代碼詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽