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 相关文章推荐
JSON扫盲帖 JSON.as类教程
Feb 16 Javascript
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
js Dialog 去掉右上角的X关闭功能
Apr 23 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
Dec 09 Javascript
JS实现密码框的显示密码和隐藏密码功能示例
Dec 26 Javascript
js实现贪吃蛇小游戏(容易理解)
Jan 22 Javascript
vue组件父子间通信之综合练习(聊天室)
Nov 07 Javascript
vue-music关于Player播放器组件详解
Nov 28 Javascript
vue中对象数组去重的实现
Feb 06 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
Feb 07 Javascript
VUE 实现element upload上传图片到阿里云
Aug 12 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 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的explode和implode的使用说明
2011/07/17 PHP
PHP页面转UTF-8中文编码乱码的解决办法
2015/10/20 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
PHP基于redis计数器类定义与用法示例
2018/02/08 PHP
js 模拟气泡屏保效果代码
2010/07/10 Javascript
jQuery ajax 路由和过滤器使用说明
2011/08/02 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
2011/09/15 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
node.js Web应用框架Express入门指南
2014/05/28 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
JavaScript搜索字符串并将搜索结果返回到字符串的方法
2015/04/06 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
js简单判断移动端系统的方法
2016/02/25 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
js+html5实现半透明遮罩层弹框效果
2020/08/24 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
node.js实现上传文件功能
2019/07/15 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
Python2.7.10以上pip更新及其他包的安装教程
2018/06/12 Python
结束运行python的方法
2020/06/16 Python
英国最大的独立家具零售商:Furniture Village
2016/09/06 全球购物
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
IWOOT美国:新奇的小玩意
2018/04/27 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
《乌鸦和狐狸》教学反思
2014/02/08 职场文书
教师党员整改措施
2014/10/24 职场文书
2014年教务工作总结
2014/12/03 职场文书
单位工作证明范本
2015/06/15 职场文书
教师教育心得体会
2016/01/19 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS