站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

手把手带你使用Vue开发一个五子棋小游戏!

时间:2022-06-23 [网络编程]作者:fabuyuan 浏览:1 次

本篇文章带大家利用Vue基础语法来写一个五子棋小游戏,希望对大家有所帮助!

在之前的文章中,用JS的基础语法写了一个五子棋小游戏,今天用Vue的基础语法来写一个,感受一下两者的区别。。至于怎么判断胜负,我还是把上篇文章的方法复制粘贴过来了,如果想了解这个逻辑,可以看我之前的那篇文章。(学习视频分享:vuejs视频教程

1.绘制游戏区域和游戏元素

开始写代码之前,一定要记得先导包Vue文件。棋盘还是用二维数组来渲染,可以使用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="{'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.点击事件

首先用flag变量来判断黑白棋顺序。数组里的默认值都是0,点击下棋的原理就是改变这个值,上面td的样式绑定中,如果值变为1,就渲染出bgc1样式,也就是黑色。值为2就渲染出白色。在这个事件中,数组的值改变后,页面不会重新渲染,所以需要用this.$set()方法,让v-for强制更新。因为我们用的是Vue语法,这个事件函数要写入methods中。

    //所有黑棋数组
    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。如何知道哪颗棋子是最后一颗呢,上面不是声明了两个全局数组吗,数组里的最后一个元素不就是最后一颗棋子了。值改变为0后,要把这个元素从全局数组中删除,因为这个数组不仅是悔棋的时候用到,后面判断胜负也会用到,不删除的话会干扰到判断胜负。悔棋事件的函数同样要写在methods里面。

        //悔棋事件
        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('黑棋获胜!')
            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)
        }
      }
    }

写在最后

到这里五子棋的功能就写完了,Vue的基础语法比原生的DOM语法要便捷了不少。判断胜负的逻辑,我还是照搬了上篇文章,感兴趣的可以去看我前面的文章:

《如何使用原生JS,快速写出一个五子棋小游戏 》

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

【相关视频教程推荐:web前端】

以上就是手把手带你使用Vue开发一个五子棋小游戏!的详细内容,更多请关注站长家园其它相关文章!

本文标签:  Vuevue.jsvue3

转载请注明来源:手把手带你使用Vue开发一个五子棋小游戏!

本文永久链接地址:https://www.adminjie.com/post/13825.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • 手把手带你使用Vue开发一个五子棋小游戏!

      手把手带你使用Vue开发一个五子棋小游戏!

      本篇文章带大家利用Vue基础语法来写一个五子棋小游戏,希望对大家有所帮助!在之前的文章中,用JS的基础语法写了一个五子棋小游戏,今天用Vue的基础语法来写一个,...

    • docker虚拟化是什么

      docker虚拟化是什么

      docker虚拟化指的是一种资源管理技术,将计算机的实体资源予以抽象转换后呈现出来,主要用来解决高性能的物理硬件产生过生和老的旧硬件产能过低的重组重用;而Doc...

    • docker是哪个公司的产品

      docker是哪个公司的产品

      docker是dotCloud公司的产品;docker最初是dotCloud公司创始人“SolomonHykes”在法国期间发起的一个公司内部项目,它是基于d...

    • 什么是装饰器?聊聊Angular中怎么使用方法装饰器?

      什么是装饰器?聊聊Angular中怎么使用方法装饰器?

      什么是装饰器?本篇文章给大家介绍一下Angular中使用方法装饰器的方法,希望对大家有所帮助!方法装饰器并不是Angular的专属特性,在es6中也有着...

    • docker进程隔离是什么意思

      docker进程隔离是什么意思

      在docker中,进程隔离是将每个容器都运行在自己的进程环境中的意思;Docker主要就是借助Linux内核技术Namespace来做到隔离的,“LinuxN...

    热门文章