Saya akan membawa anda langkah demi langkah untuk membangunkan permainan backgammon menggunakan Vue!

Artikel ini akan menunjukkan kepada anda cara menggunakan sintaks asas Vue untuk menulis permainan backgammon saya harap ia akan membantu anda.

Dalam artikel sebelum ini, saya menulis permainan backgammon menggunakan sintaks asas JS Hari ini saya akan menulis satu menggunakan sintaks asas Vue untuk merasai perbezaan antara keduanya . . Mengenai bagaimana untuk menilai keputusan, saya menyalin dan menampal kaedah dari artikel sebelum ini Jika anda ingin memahami logik ini, anda boleh membaca artikel saya sebelum ini. (Belajar perkongsian video: tutorial video vuejs)

1 Lukiskan kawasan permainan dan elemen permainan

Sebelum anda mula menulis kod, anda mesti ingat untuk membungkus fail Vue. . Papan catur masih dipaparkan menggunakan tatasusunan dua dimensi Anda boleh menggunakan kaedah Array(15).fill(0).map(()=>Array(15).fill(0)) untuk menjana tatasusunan dengan cepat.

    //创建Vue实例
    let vm = new Vue({
      //挂载到对应的盒子上
      el: '#app',
      data: {
        //快速生成用来渲染棋盘的数组,15*15，默认值是0
        list: Array(15).fill(0).map(()=>Array(15).fill(0))
      },
    })

Selepas tatasusunan dijana, anda boleh menggunakan kaedah v-for untuk menghasilkan Html. Gelung peringkat pertama menjana teg tr, dan gelung peringkat kedua menjana teg td. Kemudian hantar dua parameter indeks dan indeks02 ke dalam fungsi acara klik, dan gunakan pengikatan gaya vue untuk mengikat gaya hitam dan putih dalam td.

 <div id="app">
    <table>
      <!-- 渲染tr -->
      <tr v-for="(item,index) in list">
        <!-- 渲染td,绑定点击事件，并把参数传递到事件中 -->
        <td v-for="(item02,index02) in item" @click="doClick(index,index02)"
          :class="{&#39;bgc1&#39;:item02==1,&#39;bgc2&#39;:item02==2}"></td>
      </tr>
    </table>
    <!-- 悔棋按钮 -->
    <button @click="withdraw">悔棋</button>
  </div>

Lampirkan gaya 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 Klik acara

Mula-mula gunakan pembolehubah bendera untuk menentukan susunan Othello. Nilai lalai dalam tatasusunan adalah semua 0. Prinsip klik untuk bermain catur adalah untuk menukar nilai ini Dalam pengikatan gaya td di atas, jika nilai berubah kepada 1, gaya bgc1 diberikan, iaitu hitam. Nilai 2 menjadikan putih. Dalam acara ini, selepas nilai tatasusunan berubah, halaman tidak akan dipaparkan semula, jadi anda perlu menggunakan kaedah this.$set() untuk memaksa v-for mengemas kini. Oleh kerana kami menggunakan sintaks Vue, fungsi acara ini perlu ditulis ke dalam kaedah.

    //所有黑棋数组
    let blackArr = []
    //所有白棋数组
    let whiteArr = []
    //下棋顺序变量
    let flag = true
    
    //创建Vue实例
   let vm = new Vue({
      //挂载到对应的盒子上
      el: '#app',
      data: {
        //用来渲染棋盘的数组,15*15
        list: Array(15).fill(0).map(()=>Array(15).fill(0))
      },
      methods: {
        //点击事件，参数a,b对应td里的index,index02
        doClick(a, b) {
          //判断是黑棋还是白棋
          if (flag) {
            //判断格子内是否已经有棋子
            if (this.list[a][b] == 0) {
              //改变点击的td对应的数组元素的值,并且强制更新数组渲染页面
              this.$set(this.list[a], b, 1)
              flag = !flag
              //将对应的棋子坐标添加至总数组中，后面判断胜负需要用
              blackArr.push([a, b])
            }
          } else {
            this.$set(this.list[a], b, 2)
            flag = !flag
            whiteArr.push([a, b])
          }
        },
      },
    })

3. Fungsi catur penyesalan

Prinsip catur penyesalan ialah menukar nilai buah catur terakhir kepada 0. Bagaimana untuk mengetahui sekeping catur mana yang terakhir? Bukankah dua tatasusunan global diisytiharkan di atas? Selepas nilai berubah kepada 0, elemen ini mesti dipadamkan daripada tatasusunan global, kerana tatasusunan ini bukan sahaja digunakan apabila menyesali langkah itu, tetapi juga digunakan untuk menentukan hasil kemudiannya Jika ia tidak dipadamkan, ia akan mengganggu penentuan hasil. Fungsi peristiwa langkah penyesalan juga mesti ditulis dalam kaedah.

        //悔棋事件
        withdraw() {
          //判断前面一步下的是黑棋还是白棋
          if (!flag) {
            //获取最后一颗棋子的位置
            const a = blackArr[blackArr.length - 1][0]
            const b = blackArr[blackArr.length - 1][1]
            //将最后一刻棋子对应的数组元素的值改为0，并且强制更新数组渲染页面
            this.$set(this.list[a], b, 0)
            //把这个棋子从总数组里面删除，否则会影响到输赢判断
            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 Menilai keputusan

Saya telah pun menulis tentang logik menilai keputusan dalam artikel saya sebelum ini, jadi saya tidak akan menerangkan secara terperinci di sini. Jika anda berminat, anda boleh membaca artikel sebelumnya tentang cara menulis backgammon dengan JS asli. Hanya ambil kaedah di sini dan panggilnya dalam acara klik Ingat untuk menghantar parameter

  //横轴获胜逻辑
    function XWin(a, b) {
      //当前X轴的所有棋子集合数组
      let xAllArr = []
      //判断横轴胜负逻辑的X轴棋子数组
      let xWinArr = []
      //判断下的是黑棋还是白棋
      if (!flag) {
        blackArr.map(item => {
          if (item[0] == a) {
            //将当前排的所有棋子加入对应数组
            xAllArr.push(item[1])
          }
        })
      } else {
        whiteArr.map(item => {
          if (item[0] == a) {
            xAllArr.push(item[1])
          }
        })
      }
      //把横排总数组排序，方便比较
      xAllArr.sort((a, b) => a - b)
      for (let i = 1; i < xAllArr.length; i++) {
        if (xAllArr[i] == (+xAllArr[i - 1] + 1)) {
          //如果相邻的两个棋子数量相差1，就将其添加至胜负逻辑数组
          xWinArr.push(xAllArr[i])
        } else {
          //否则得清空
          xWinArr = []
        }
      }
      //获胜条件
      if (xWinArr.length == 4) {
        //这里要用定时器将弹框变成异步任务，否则第五颗棋子渲染不出来就提示获胜了
        if (!flag) {
          setTimeout(function () {
            alert(&#39;黑棋获胜!&#39;)
            location.reload()
          }, 100)
        } else {
          setTimeout(function () {
            alert(&#39;白棋获胜!&#39;)
            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(&#39;黑棋获胜!&#39;)
            location.reload()
          }, 100)
        } else {
          setTimeout(function () {
            alert(&#39;白棋获胜!&#39;)
            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(&#39;黑棋获胜!&#39;)
            location.reload()
          }, 100)
        } else {
          setTimeout(function () {
            alert(&#39;白棋获胜!&#39;)
            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(&#39;黑棋获胜!&#39;)
            location.reload()
          }, 100)
        } else {
          setTimeout(function () {
            alert(&#39;白棋获胜!&#39;)
            location.reload()
          }, 100)
        }
      }
    }

dan tuliskannya dalam. Akhirnya

Fungsi backgammon telah ditulis di sini Sintaks asas Vue adalah lebih mudah daripada sintaks DOM asli. Mengenai logik menilai keputusan, saya masih menyalin artikel sebelum ini Jika anda berminat, anda boleh membaca artikel saya sebelum ini:

"Cara menggunakan JS asli untuk menulis permainan backgammon dengan cepat" <. . cadangan:>bahagian hadapan web

】

Atas ialah kandungan terperinci Saya akan membawa anda langkah demi langkah untuk membangunkan permainan backgammon menggunakan Vue!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!