快捷導(dǎo)航

教你用Vue基礎(chǔ)語(yǔ)法來(lái)寫一個(gè)五子棋小游戲

更新時(shí)間：2022年06月22日 10:31:05 作者：逍丶

在布局上,五子棋相比那些目標(biāo)是隨機(jī)運(yùn)動(dòng)的游戲,實(shí)現(xiàn)起來(lái)相對(duì)簡(jiǎn)單許多,思路也很清晰,下面這篇文章主要給大家介紹了關(guān)于用Vue基礎(chǔ)語(yǔ)法來(lái)寫一個(gè)五子棋小游戲的相關(guān)資料,需要的朋友可以參考下

前言

在之前的文章中，用JS的基礎(chǔ)語(yǔ)法寫了一個(gè)五子棋小游戲# 如何使用原生JS，快速寫出一個(gè)五子棋小游戲今天用Vue的基礎(chǔ)語(yǔ)法來(lái)寫一個(gè)，感受一下兩者的區(qū)別。。至于怎么判斷勝負(fù)，我還是把上篇文章的方法復(fù)制粘貼過(guò)來(lái)了，如果想了解這個(gè)邏輯，可以看我之前的那篇文章。

1.繪制游戲區(qū)域和游戲元素

開始寫代碼之前，一定要記得先導(dǎo)包Vue文件。棋盤還是用二維數(shù)組來(lái)渲染，可以使用Array(15).fill(0).map(()=>Array(15).fill(0))方法來(lái)快速生成數(shù)組。

    //創(chuàng)建Vue實(shí)例
    let vm = new Vue({
      //掛載到對(duì)應(yīng)的盒子上
      el: '#app',
      data: {
        //快速生成用來(lái)渲染棋盤的數(shù)組,15*15，默認(rèn)值是0
        list: Array(15).fill(0).map(()=>Array(15).fill(0))
      },
    })

數(shù)組生成之后，就可以用v-for方法對(duì)Html進(jìn)行渲染了。第一層循環(huán)生成tr標(biāo)簽，第二層循環(huán)生成td標(biāo)簽。然后將index和index02這兩個(gè)參數(shù)傳入點(diǎn)擊事件函數(shù)中，并且使用vue樣式綁定，將黑棋和白棋這兩種樣式綁定在td中。

 <div id="app">
    <table>
      <!-- 渲染tr -->
      <tr v-for="(item,index) in list">
        <!-- 渲染td,綁定點(diǎn)擊事件，并把參數(shù)傳遞到事件中 -->
        <td v-for="(item02,index02) in item" @click="doClick(index,index02)"
          :class="{'bgc1':item02==1,'bgc2':item02==2}"></td>
      </tr>
    </table>
    <!-- 悔棋按鈕 -->
    <button @click="withdraw">悔棋</button>
  </div>

附上CSS樣式

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      list-style: none;
    }

    table {
      position: relative;
      width: 730px;
      height: 730px;
      margin: 0 auto;
      border: 5px solid black;
      background: url(./src=http___pic45.nipic.com_20140804_2372131_155038114014_2.jpg&refer=http___pic45.nipic.webp) no-repeat;
      background-size: 100%;
      background-position: center;
      padding: 24px 12px;
    }

    td {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      margin-right: 13px;
      margin-bottom: 11px;
      cursor: pointer;
    }

    .bgc1 {
      background-color: black;
    }

    .bgc2 {
      background-color: white;
    }

    button {
      position: absolute;
      width: 200px;
      height: 100px;
      bottom: 100px;
      right: 200px;
      text-align: center;
      line-height: 100px;
      font-size: 25px;
    }
  </style>

2.點(diǎn)擊事件

首先用flag變量來(lái)判斷黑白棋順序。數(shù)組里的默認(rèn)值都是0，點(diǎn)擊下棋的原理就是改變這個(gè)值，上面td的樣式綁定中，如果值變?yōu)?，就渲染出bgc1樣式，也就是黑色。值為2就渲染出白色。在這個(gè)事件中，數(shù)組的值改變后，頁(yè)面不會(huì)重新渲染，所以需要用this.$set()方法，讓v-for強(qiáng)制更新。因?yàn)槲覀冇玫氖荲ue語(yǔ)法，這個(gè)事件函數(shù)要寫入methods中。

    //所有黑棋數(shù)組
    let blackArr = []
    //所有白棋數(shù)組
    let whiteArr = []
    //下棋順序變量
    let flag = true
    
    //創(chuàng)建Vue實(shí)例
   let vm = new Vue({
      //掛載到對(duì)應(yīng)的盒子上
      el: '#app',
      data: {
        //用來(lái)渲染棋盤的數(shù)組,15*15
        list: Array(15).fill(0).map(()=>Array(15).fill(0))
      },
      methods: {
        //點(diǎn)擊事件，參數(shù)a,b對(duì)應(yīng)td里的index,index02
        doClick(a, b) {
          //判斷是黑棋還是白棋
          if (flag) {
            //判斷格子內(nèi)是否已經(jīng)有棋子
            if (this.list[a][b] == 0) {
              //改變點(diǎn)擊的td對(duì)應(yīng)的數(shù)組元素的值,并且強(qiáng)制更新數(shù)組渲染頁(yè)面
              this.$set(this.list[a], b, 1)
              flag = !flag
              //將對(duì)應(yīng)的棋子坐標(biāo)添加至總數(shù)組中，后面判斷勝負(fù)需要用
              blackArr.push([a, b])
            }
          } else {
            this.$set(this.list[a], b, 2)
            flag = !flag
            whiteArr.push([a, b])
          }
        },
      },
    })

3.悔棋功能

悔棋的原理就是將最后一顆棋子的值變?yōu)?。如何知道哪顆棋子是最后一顆呢，上面不是聲明了兩個(gè)全局?jǐn)?shù)組嗎，數(shù)組里的最后一個(gè)元素不就是最后一顆棋子了。值改變?yōu)?后，要把這個(gè)元素從全局?jǐn)?shù)組中刪除，因?yàn)檫@個(gè)數(shù)組不僅是悔棋的時(shí)候用到，后面判斷勝負(fù)也會(huì)用到，不刪除的話會(huì)干擾到判斷勝負(fù)?；谄迨录暮瘮?shù)同樣要寫在methods里面。

        //悔棋事件
        withdraw() {
          //判斷前面一步下的是黑棋還是白棋
          if (!flag) {
            //獲取最后一顆棋子的位置
            const a = blackArr[blackArr.length - 1][0]
            const b = blackArr[blackArr.length - 1][1]
            //將最后一刻棋子對(duì)應(yīng)的數(shù)組元素的值改為0，并且強(qiáng)制更新數(shù)組渲染頁(yè)面
            this.$set(this.list[a], b, 0)
            //把這個(gè)棋子從總數(shù)組里面刪除，否則會(huì)影響到輸贏判斷
            blackArr.splice(blackArr.length - 1, 1)
            flag = !flag
          } else {
            const a = whiteArr[whiteArr.length - 1][0]
            const b = whiteArr[whiteArr.length - 1][1]
            this.$set(this.list[a], b, 0)
            whiteArr.splice(whiteArr.length - 1, 1)
            flag = !flag
          }
        }

4.判斷勝負(fù)

判斷勝負(fù)的邏輯我前面的文章中已經(jīng)寫過(guò)一遍了，這里我就不做贅述了。感興趣的可以去看前面一篇文章，如何用原生JS寫五子棋。這里直接把方法拿過(guò)來(lái)，在點(diǎn)擊事件里面調(diào)用就可以了，記得參數(shù)要傳進(jìn)去

  //橫軸獲勝邏輯
    function XWin(a, b) {
      //當(dāng)前X軸的所有棋子集合數(shù)組
      let xAllArr = []
      //判斷橫軸勝負(fù)邏輯的X軸棋子數(shù)組
      let xWinArr = []
      //判斷下的是黑棋還是白棋
      if (!flag) {
        blackArr.map(item => {
          if (item[0] == a) {
            //將當(dāng)前排的所有棋子加入對(duì)應(yīng)數(shù)組
            xAllArr.push(item[1])
          }
        })
      } else {
        whiteArr.map(item => {
          if (item[0] == a) {
            xAllArr.push(item[1])
          }
        })
      }
      //把橫排總數(shù)組排序，方便比較
      xAllArr.sort((a, b) => a - b)
      for (let i = 1; i < xAllArr.length; i++) {
        if (xAllArr[i] == (+xAllArr[i - 1] + 1)) {
          //如果相鄰的兩個(gè)棋子數(shù)量相差1，就將其添加至勝負(fù)邏輯數(shù)組
          xWinArr.push(xAllArr[i])
        } else {
          //否則得清空
          xWinArr = []
        }
      }
      //獲勝條件
      if (xWinArr.length == 4) {
        //這里要用定時(shí)器將彈框變成異步任務(wù)，否則第五顆棋子渲染不出來(lái)就提示獲勝了
        if (!flag) {
          setTimeout(function () {
            alert('黑棋獲勝!')
            location.reload()
          }, 100)
        } else {
          setTimeout(function () {
            alert('白棋獲勝!')
            location.reload()
          }, 100)
        }
      }
    }
    //豎軸獲勝邏輯
    function YWin(a, b) {
      let yAllArr = []
      let yWinArr = []
      if (!flag) {
        blackArr.map(item => {
          if (item[1] == b) {
            yAllArr.push(item[0])
          }
        })
      } else {
        whiteArr.map(item => {
          if (item[1] == b) {
            yAllArr.push(item[0])
          }
        })
      }
      yAllArr.sort((a, b) => a - b)
      for (let i = 1; i < yAllArr.length; i++) {
        if (yAllArr[i] == (+yAllArr[i - 1] + 1)) {
          yWinArr.push(yAllArr[i])
        } else {
          yWinArr = []
        }
      }
      if (yWinArr.length == 4) {
        if (!flag) {
          setTimeout(function () {
            alert('黑棋獲勝!')
            location.reload()
          }, 100)
        } else {
          setTimeout(function () {
            alert('白棋獲勝!')
            location.reload()
          }, 100)
        }
      }
    }
    //正斜軸獲勝邏輯
    function X_YWin(a, b) {
      let x_yAllArr = []
      let x_yWinArr = []
      if (!flag) {
        blackArr.map(item => {
          if ((item[0] - a) == (item[1] - b)) {
            x_yAllArr.push(item[1])
          }
        })
      } else {
        whiteArr.map(item => {
          if ((item[0] - a) == (item[1] - b)) {
            x_yAllArr.push(item[1])
          }
        })
      }
      x_yAllArr.sort((a, b) => a - b)
      for (let i = 1; i < x_yAllArr.length; i++) {
        if (x_yAllArr[i] == (+x_yAllArr[i - 1] + 1)) {
          x_yWinArr.push(x_yAllArr[i])
        } else {
          x_yWinArr = []
        }
      }
      if (x_yWinArr.length == 4) {
        if (!flag) {
          setTimeout(function () {
            alert('黑棋獲勝!')
            location.reload()
          }, 100)
        } else {
          setTimeout(function () {
            alert('白棋獲勝!')
            location.reload()
          }, 100)
        }
      }
    }
   //反斜軸獲勝邏輯
    function Y_XWin(a, b) {
      let y_xAllArr = []
      let y_xWinArr = []
      if (!flag) {
        blackArr.map(item => {
          if (0 - (item[0] - a) == (item[1] - b)) {
            y_xAllArr.push(item[1])
          }
        })
      } else {
        whiteArr.map(item => {
          if (0 - (item[0] - a) == (item[1] - b)) {
            y_xAllArr.push(item[1])
          }
        })
      }
      y_xAllArr.sort((a, b) => a - b)
      for (let i = 1; i < y_xAllArr.length; i++) {
        if (y_xAllArr[i] == (+y_xAllArr[i - 1] + 1)) {
          y_xWinArr.push(y_xAllArr[i])
        } else {
          y_xWinArr = []
        }
      }
      if (y_xWinArr.length == 4) {
        if (!flag) {
          setTimeout(function () {
            alert('黑棋獲勝!')
            location.reload()
          }, 100)
        } else {
          setTimeout(function () {
            alert('白棋獲勝!')
            location.reload()
          }, 100)
        }
      }
    }