教你用Vue基础语法来写一个五子棋小游戏

目录
  • 前言
  • 1.绘制游戏区域和游戏元素
  • 2.点击事件
  • 3.悔棋功能
  • 4.判断胜负
  • 写在最后

前言

在之前的文章中,用JS的基础语法写了一个五子棋小游戏# 如何使用原生JS,快速写出一个五子棋小游戏今天用Vue的基础语法来写一个,感受一下两者的区别。。至于怎么判断胜负,我还是把上篇文章的方法复制粘贴过来了,如果想了解这个逻辑,可以看我之前的那篇文章。

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,快速写出一个五子棋小游戏 。

到此这篇关于教你用Vue基础语法来写一个五子棋小游戏的文章就介绍到这了,更多相关Vue写五子棋小游戏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue实现五子棋游戏

    本文实例为大家分享了vue实现五子棋游戏的具体代码,供大家参考,具体内容如下 思路 1.vue实现五子棋 空棋盘开局. 画网格:网格有 15 行 15 列,共有 225 个交叉点 黑先.白后,交替下子,每次只能下一子 胜负判定 按照简单的规则,从当前下子点位的方向判断().如果有一个方向满足连续5个黑子或白子,游戏结束. 2.支持dom和canvas切换 判断浏览器是否支持canvas: false: 不支持 切换dom方式 true:  支持 使用canvas 3.实现悔棋功能 4.实现撤销悔

  • VUE+Canvas实现简单五子棋游戏的全过程

    前言 在布局上,五子棋相比那些目标是随机运动的游戏,实现起来相对简单许多,思路也很清晰,总共分为: (1)画棋盘: (2)监听点击事件画黑白棋子: (3)每次落子之后判断是否有5子相连,有则赢. 最复杂的恐怕就是如何判断五子棋赢了,那么就先从简单的开始,画个棋盘吧~ 1.画棋盘 棋盘很简单,我们画个15*15的棋盘,横线竖线相交错: drawCheckerboard() { // 画棋盘 let _this = this; _this.ctx.beginPath(); _this.ctx.fil

  • Vue实现五子棋小游戏

    本文实例为大家分享了Vue实现五子棋小游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <title>五子棋</title>     <script src="./configJS/vue.js"></script>     <script src=&q

  • 教你用Vue基础语法来写一个五子棋小游戏

    目录 前言 1.绘制游戏区域和游戏元素 2.点击事件 3.悔棋功能 4.判断胜负 写在最后 前言 在之前的文章中,用JS的基础语法写了一个五子棋小游戏# 如何使用原生JS,快速写出一个五子棋小游戏今天用Vue的基础语法来写一个,感受一下两者的区别..至于怎么判断胜负,我还是把上篇文章的方法复制粘贴过来了,如果想了解这个逻辑,可以看我之前的那篇文章. 1.绘制游戏区域和游戏元素 开始写代码之前,一定要记得先导包Vue文件.棋盘还是用二维数组来渲染,可以使用Array(15).fill(0).map

  • Vue基础语法知识梳理下篇

    目录 计算属性 键盘事件 监视属性 绑定样式 class样式 style样式 条件渲染 v-if v-show 列表渲染 v-for指令 vue监测data中的数据 收集表单数据 计算属性 定义:要用的属性不存在,要通过已有属性计算得来 原理:底层借助了Objcet.defineProperty方法提供的getter和setter get函数什么时候执行? (1).初次读取时会执行一次 (2).当依赖的数据发生改变时会被再次调用 注: 计算属性最终会出现在vm上,直接读取使用即可 如果计算属性要

  • 手把手教你写一个微信小程序(推荐)

    需求 小程序语音识别,全景图片观看,登录授权,获取个人基本信息 一:基础框架 官方开发文档:https://developers.weixin.qq.com/miniprogram/dev/ (其实官方文档写的很清楚了) 1.跟着官方文档一步一步来,新建一个小程序项目就好 2.然后呢,毕竟默认的只是基本骨架,肌肉线条还是要自己填的 app.json 是当前小程序的全局配置 小程序的所有页面路径.界面表现.网络超时时间.底部 tab 需求一:底部tab,我们要像原生APP那样要有是三个常驻的按钮,

  • 教你用Js写一个简单的五子棋小游戏

    目录 棋盘绘制 棋子的绘制 在点击 canvas 的时候获取相对于棋盘数据的坐标点 是否结束 悔棋功能 总结 这里的五子棋只做一些基础的功能,对于相对专业的规则不做处理. 那么该五子棋实现的规则和功能如下: 整体功能采用canvas实现 行列都规定 20 个数量,那么棋子的行列数量是 20 + 1 棋盘数据采用稀疏数组格式 棋子:0 为黑色,1 为白色 可以悔棋 胜负结束判断 棋盘绘制 <template> <div class="gobang"> <ca

  • 教你如何用python开发一款数字推盘小游戏

    今年年初,新一季的<最强大脑>开播了,第一集选拔的时候大家做了一个数字游戏,名叫<数字华容道>,当时何猷君以二十几秒的成绩夺得该项目的冠军,看了这个游戏之后我决定要写一个<数字华容道>的程序,过去了半年,我终于记起了这件事,今天就来实现. 数字推盘游戏(n-puzzle)是一种智力游戏,常见的类型有十五数字推盘游戏和八数字推盘游戏等.十五数字推盘游戏的板上会有十五个方块和一个大小相当于一个方块的空位(供方块移动之用),当15个数字依次排序并且最后一个格子为空位即代表挑战

  • 使用Python写一个贪吃蛇游戏实例代码

    我在程序中加入了分数显示,三种特殊食物,将贪吃蛇的游戏逻辑写到了SnakeGame的类中,而不是在Snake类中. 特殊食物: 1.绿色:普通,吃了增加体型 2.红色:吃了减少体型 3.金色:吃了回到最初体型 4.变色食物:吃了会根据食物颜色改变蛇的颜色 #coding=UTF-8 from Tkinter import * from random import randint import tkMessageBox class Grid(object): def __init__(self,

  • 使用Javascript写的2048小游戏

    最近心血来潮,项目结束了,使用javascript写个小游戏,练练收吧,写的不好还请各位大侠给出批评建议. HTML代码如下 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <link rel="stylesheet" href="2048.css"/> <scri

  • VUE+Canvas 实现桌面弹球消砖块小游戏的示例代码

    大家都玩过弹球消砖块游戏,左右键控制最底端的一个小木板平移,接住掉落的小球,将球弹起后消除画面上方的一堆砖块. 那么用VUE+Canvas如何来实现呢?实现思路很简单,首先来拆分一下要画在画布上的内容: (1)用键盘左右按键控制平移的木板: (2)在画布内四处弹跳的小球: (3)固定在画面上方,并且被球碰撞后就消失的一堆砖块. 将上述三种对象,用requestAnimationFrame()函数平移运动起来,再结合各种碰撞检查,就可以得到最终的结果. 先看看最终的效果: 一.左右平移的木板 最底

  • 又一款MVVM组件 Vue基础语法和常用指令(1)

    前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue也确实挺火,各种入门博文眼花缭乱,博主也不敢说写得多好,就当是个学习笔记,有兴趣的可以看看. 一.MVVM大比拼 关于MVVM,原来在介绍knockout.js的时候有过讲解,目前市面上比较火的MVVM框架也是一抓一大把,比如常见的有Knockout.js.Vue.js.React.Angularj

随机推荐