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


Posted in Javascript onMay 09, 2018

试玩地址

项目地址

使用方法:

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小游戏功能思路详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
解决js图片加载时出现404的问题
Nov 30 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
JS判断字符串变量是否含有某个字串的实现方法
Jun 03 Javascript
JS简单实现浮动窗口效果示例
Sep 07 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
Nov 10 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
前端构建工具之gulp的配置与搭建详解
Jun 12 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
小程序测试后台服务的方法(ngrok)
Mar 08 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 #Javascript
vue中的provide/inject的学习使用
May 09 #Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 #Javascript
自定义vue组件发布到npm的方法
May 09 #Javascript
React Navigation 使用中遇到的问题小结
May 08 #Javascript
官方推荐react-navigation的具体使用详解
May 08 #Javascript
JavaScript callback回调函数用法实例分析
May 08 #Javascript
You might like
php数据结构 算法(PHP描述) 简单选择排序 simple selection sort
2011/08/09 PHP
web目录下不应该存在多余的程序(安全考虑)
2012/05/09 PHP
php实现遍历目录并删除指定文件中指定内容
2015/01/21 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
对js关键字命名的疑问介绍
2014/04/25 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
jquery获取当前元素索引值用法实例
2015/06/10 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
Vue.js弹出模态框组件开发的示例代码
2017/07/26 Javascript
javascript算法之二叉搜索树的示例代码
2017/09/12 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
QRCode.js二维码生成并能长按识别
2018/10/16 Javascript
vue项目中使用AES实现密码加密解密(ECB和CBC两种模式)
2019/08/12 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
Python的一些用法分享
2012/10/07 Python
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
解决在pycharm运行代码,调用CMD窗口的命令运行显示乱码问题
2019/08/23 Python
NumPy统计函数的实现方法
2020/01/21 Python
Python pip安装第三方库实现过程解析
2020/07/09 Python
pycharm进入时每次都是insert模式的解决方式
2021/02/05 Python
护士在校生自荐信
2014/02/01 职场文书
信息管理应届生求职信
2014/03/07 职场文书
一年级班主任感言
2014/03/08 职场文书
应届毕业生自荐信
2014/05/28 职场文书
好的促销活动方案
2014/08/21 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
2014年质量工作总结
2014/11/22 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
2015年乡镇统计工作总结
2015/04/22 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书