Vue を使用してバックギャモン ゲームを開発する方法をステップバイステップで説明します。

この記事は、Vue の基本的な文法を使用してバックギャモン ゲームを作成するのに役立ちます。皆様のお役に立てれば幸いです。

前回の記事では、JS の基本構文を使用してバックギャモン ゲームを作成しましたが、今日は、両者の違いを感じるために、Vue の基本構文を使用してバックギャモン ゲームを作成してみます。 。 。勝敗の判定方法については前回の記事の方法をコピペしたので、ロジックを理解したい方は前回の記事を読んでください。 (学習ビデオ共有: vuejs ビデオ チュートリアル )

1. ゲーム領域とゲーム要素を描画する

コードを書き始める前に、Vue ファイルをパッケージ化することを忘れないでください。 。チェス盤は引き続き 2 次元配列を使用してレンダリングされます。Array(15).fill(0).map(()=>Array(15).fill(0)) メソッドを使用できます。配列をすばやく生成します。

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

配列が生成されたら、v-for メソッドを使用して HTML をレンダリングできます。第 1 レベルのループは tr タグを生成し、第 2 レベルのループは td タグを生成します。次に、2 つのパラメーター Index と Index02 をクリック イベント関数に渡し、vue スタイル バインディングを使用して 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>

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.イベントをクリック

まずフラグ変数を使ってオセロの順番を決めます。配列のデフォルト値はすべて 0 です。クリックしてチェスをプレイする原則は、この値を変更することです。上記の td スタイル バインディングでは、値が 1 に変更されると、黒の bgc1 スタイルがレンダリングされます。値 2 は白をレンダリングします。このイベントでは、配列の値が変更された後、ページは再レンダリングされないため、this.$set() メソッドを使用して v-for を強制的に更新する必要があります。 Vue 構文を使用しているため、このイベント関数をメソッドに記述する必要があります。

    //所有黑棋数组
    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. リグレット チェスの機能

リグレット チェスの原理は、最後のチェスの駒の値を 0 に変更することです。どのチェスの駒が最後の駒であるかを知る方法はありますか? 上で 2 つのグローバル配列が宣言されませんでしたか? 配列の最後の要素が最後のチェスの駒です。この配列は、移動を後悔するときに使用されるだけでなく、後で結果を判定するためにも使用されるため、値が 0 に変更された後、グローバル配列からこの要素を削除する必要があります。削除しないと判定に支障をきたします。結果の。後悔移動イベントの関数もメソッドで記述する必要があります。

        //悔棋事件
        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. 結果の判定

結果を判定するロジックについては、前回の記事ですでに書きましたので、ここでは詳しく説明しません。ご興味がございましたら、ネイティブ JS でバックギャモンを作成する方法に関する前回の記事をご覧ください。ここでメソッドを取得し、クリック イベントで呼び出すだけです。

  //横轴获胜逻辑
    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)
        }
      }
    }

最後にパラメータを渡すことを忘れないでください

バックギャモンの機能はここに書かれていますが、Vue の基本構文はネイティブの DOM 構文よりもはるかに便利です。勝敗判定のロジックについては前回の記事をそのままコピーしましたので、興味があれば前回の記事

「ネイティブ JS を使ってバックギャモン ゲームを素早く書く方法」# をご覧ください。

##https://juejin.cn/post/7107172938062757925?share_token=83f7dc0c-3038-4310-b9b5-ba8a7c914af4

【関連ビデオチュートリアル推奨事項 ：

ウェブフロントエンド]

以上がVue を使用してバックギャモン ゲームを開発する方法をステップバイステップで説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。