Vue를 사용하여 주사위 놀이 게임을 개발하는 방법을 단계별로 안내해 드리겠습니다!

이 글은 주사위 놀이 게임을 작성하기 위해 Vue 기본 구문을 사용하는 방법을 보여줍니다. 이것이 여러분에게 도움이 되기를 바랍니다.

이전 글에서는 JS의 기본 구문을 이용하여 주사위 놀이 게임을 작성해 보았는데, 오늘은 둘의 차이점을 느껴보기 위해 Vue의 기본 구문을 이용하여 하나 작성해 보겠습니다. . 결과를 판단하는 방법은 이전 글의 방법을 복사하여 붙여넣었습니다. 이 논리를 이해하려면 이전 글을 읽어보세요. (학습 영상 공유: vuejs 영상 튜토리얼)

1. 게임 영역 및 게임 요소 그리기

코드 작성을 시작하기 전에 Vue 파일을 패키징하는 것을 잊지 마세요. 체스판은 여전히 ​​2차원 배열을 사용하여 렌더링됩니다. Array(15).fill(0).map(()=>Array(15).fill(0))을 사용할 수 있습니다. 배열을 빠르게 생성하는 방법입니다. 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进行渲染了。第一层循环生成tr标签，第二层循环生成td标签。然后将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.点击事件

首先用flag变量来判断黑白棋顺序。数组里的默认值都是0，点击下棋的原理就是改变这个值，上面td的样式绑定中，如果值变为1，就渲染出bgc1样式，也就是黑色。值为2就渲染出白色。在这个事件中，数组的值改变后，页面不会重新渲染，所以需要用this.$set()

    //所有黑棋数组
    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])
          }
        },
      },
    })

배열이 생성된 후 v-for 메서드를 사용하여 HTML을 렌더링할 수 있습니다. 첫 번째 수준 루프는 tr 태그를 생성하고 두 번째 수준 루프는 td 태그를 생성합니다. 그런 다음 두 매개변수 index와 index02를 클릭 이벤트 함수에 전달하고 vue 스타일 바인딩을 사용하여 td에서 흑백 스타일을 바인딩합니다.

        //悔棋事件
        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
          }
        }

CSS 스타일 첨부

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

2. 이벤트 클릭

먼저 플래그 변수를 사용하여 오델로의 순서를 결정합니다. 배열의 기본값은 모두 0이다. 체스를 두기 위해 클릭하는 원리는 이 값을 변경하는 것이다. 위의 td 스타일 바인딩에서 값이 1로 변경되면 bgc1 스타일이 렌더링되는데, 이는 검정색이다. 값이 2이면 흰색이 렌더링됩니다. 이 경우 배열 값이 변경된 후에는 페이지가 다시 렌더링되지 않으므로 this.$set() 메서드를 사용하여 v-for를 강제로 업데이트해야 합니다. 우리는 Vue 구문을 사용하고 있기 때문에 이 이벤트 함수를 메소드에 작성해야 합니다.

rrreee3. 후회 체스 기능

후회 체스의 원리는 마지막 체스 말의 값을 0으로 바꾸는 것입니다. 어떤 체스 말이 마지막 것인지 어떻게 알 수 있습니까? 위에서 두 개의 전역 배열이 선언되지 않았습니까? 배열의 마지막 요소가 마지막 체스 말입니다. 값이 0으로 변경된 후에는 이 요소를 전역 배열에서 삭제해야 합니다. 왜냐하면 이 배열은 이동을 후회할 때뿐만 아니라 나중에 결과를 결정하는 데에도 사용되기 때문입니다. 삭제하지 않으면 결정에 방해가 됩니다. 결과의. 후회 이동 이벤트의 함수도 메소드로 작성되어야 합니다. rrreee

4. 결과 결정

결과 결정 논리는 이전 기사에 작성되었으므로 여기서는 자세히 설명하지 않겠습니다. 관심이 있다면 기본 JS로 주사위 놀이를 작성하는 방법에 대한 이전 기사를 읽어보세요. 여기에서 메서드를 가져와서 클릭 이벤트에서 호출하세요. 매개변수를 전달하는 것을 잊지 마세요

rrreee

끝에 작성하세요

이 시점에서 주사위 놀이 함수의 기본 구문이 작성되었습니다. Vue는 기본 구문보다 낫습니다. DOM 구문이 훨씬 더 편리합니다. 결과를 판단하는 논리에 대해서는 여전히 이전 기사를 복사했습니다. 관심이 있으시면 제 이전 기사를 읽어보세요:

"네이티브 JS를 사용하여 주사위 놀이 게임을 빠르게 작성하는 방법"

https://juejin .cn/post/7107172938062757925?share_token=83f7dc0c-3038-4310-b9b5-ba8a7c914af4🎜🎜🎜🎜🎜🎜【추천 관련 동영상 튜토리얼: 🎜웹 프론트엔드🎜】🎜

위 내용은 Vue를 사용하여 주사위 놀이 게임을 개발하는 방법을 단계별로 안내해 드리겠습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!