vue实现2048小游戏功能思路详解

 更新时间:2018年05月09日 11:02:45   作者:dry0106  
这篇文章主要介绍了vue实现2048小游戏功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

试玩地址

项目地址

使用方法:

git clone
npm i
npm run dev

实现思路如下:

  1. 用vue-cli搭建项目,对这个项目可能有点笨重,但是也懒的再搭一个
  2. 4X4的方格用一个二维数组存放,绑定好后只关心这个二维数组,其他事交给vue
  3. 监听键盘事件
  4. 2048的核心部分就是移动合并的算法,因为是一个4X4的矩阵,所以只要实现左移的算法,其他方向的移动只需要将矩阵旋转,移动合并,再旋转回来,渲染dom即可
  5. 绑定不同数值的样式
  6. 分值计算,以及用localstorage存放最高分

关键实现

DOM

<div class="box">
  <div class="row" v-for="row in list">
    <div class="col" :class="'n-'+col" v-for="col in row">{col}}</div>
  </div>
</div>

主要的游戏部分的DOM,很简单,用一个二维数组渲染,并动态绑定样式

左移

主要由以下几种情况:

  • 2 2 2 2 => 4 4 0 0
  • 4 2 2 2 => 4 4 2 0
  • 0 4 2 2=> 4 4 0 0
  • 2 2 4 2 => 4 4 2 0

按单行数据举例,

  1. 遍历单行数组,若存在数据,记为cell,寻找cell往左可移到的最远空位置farthest
  2. 判断farthest的左边是否存在,不存在则直接移到到farthest
  3. 若存在,则判断farthest - 1的值和cell是否相同
  4. 相同=> 合并
  5. 不相同=>移到farthest位置
  6. 移动完后,清空cell
  7. 下一轮

因为一轮移动中,一个数只能合并一次,所以每个格子要有merged参数来记录是否已经合并过。

主要代码:

_list.forEach(item => {
    let farthest = this.farthestPosition(list, item)
    let next = list[farthest - 1]
    if (next && next === item.value && !_list[farthest - 1].merged) {
      //合并
      list[farthest - 1] = next * 2
      list[item.x] = undefined
      item = {
        x: farthest - 1,
        merged: true,
        value: next * 2
      }
      this.score += next * 2
    } else {
      if (farthest != item.x) {
        list[farthest] = item.value
        list[item.x] = undefined
        item.x = farthest
      }
    }
  })

矩阵旋转

因为上移,下移,左移,右移实际上是相同的,写4遍也可以,但是容易出错,所以我直接旋转将矩阵旋转,再进行移动。

以上移为例,只要将矩阵逆时针旋转一次,上移就变成了左移,移动合并成之后,只要再将矩阵逆时针旋转4-1次,矩阵就和单纯上移一样了。

逆时针旋转算法:

rotate(arr, n) {
    n = n % 4
    if (n === 0) return arr
    let tmp = Array.from(Array(this.size)).map(() => Array(this.size).fill(undefined))
    for (let i = 0; i < this.size; i++) {
      for (let j = 0; j < this.size; j++) {
        tmp[this.size - 1 - i][j] = arr[j][i]
      }
    }
    if (n > 1) tmp = this.rotate(tmp, n - 1)
    return tmp
  },

到这时候已经完成了80%了,只要再完善一下,加入分值,重新开始等功能就可以了。

总结

以上所述是小编给大家介绍的vue实现2048小游戏功能思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • vue代码分割的实现(codesplit)

    vue代码分割的实现(codesplit)

    这篇文章主要介绍了vue代码分割的实现(codesplit),做了代码分割后,会将代码分离到不同的bundle中,然后进行按需加载这些文件,需要的朋友可以参考下
    2018-11-11
  • vue 循环加载数据并获取第一条记录的方法

    vue 循环加载数据并获取第一条记录的方法

    今天小编就为大家分享一篇vue 循环加载数据并获取第一条记录的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue.js通过自定义指令实现数据拉取更新的实现方法

    vue.js通过自定义指令实现数据拉取更新的实现方法

    数据拉取更新这个功能相信大家基本都见过,但是如果要做起来却不止如何做起,所以这篇文章给大家分享了vue.js通过自定义指令实现的方法,阅读本文需要对vue有一定理解,有需要的朋友们下面来一起看看吧。
    2016-10-10
  • 写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab

    写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab

    前一段时间小编写一个移动端惯性滑动&回弹Vue导航栏组件 ly-tab,觉的非常实用,大家可能在做项目时会用到,感兴趣的朋友跟随脚本之家小编一起学习吧
    2018-03-03
  • Vue-cli 移动端布局和动画使用详解

    Vue-cli 移动端布局和动画使用详解

    这篇文章主要介绍了Vue-cli和移动端布局和动画使用详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作

    vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作

    这篇文章主要介绍了vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • vue获取form表单的值示例

    vue获取form表单的值示例

    今天小编就为大家分享一篇vue获取form表单的值示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue视频播放暂停代码

    vue视频播放暂停代码

    今天小编就为大家分享一篇vue视频播放暂停代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue-resource安装过程及使用方法解析

    Vue-resource安装过程及使用方法解析

    这篇文章主要介绍了Vue-resource安装过程及使用方法解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-07-07
  • Vue条件循环判断+计算属性+绑定样式v-bind的实例

    Vue条件循环判断+计算属性+绑定样式v-bind的实例

    今天小编就为大家分享一篇Vue条件循环判断+计算属性+绑定样式v-bind的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论