好资源导航 » 文章资讯 » vue实现2048小游戏功能思路详解

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

2023-09-13 03:06:05 64

试玩地址

项目地址

使用方法：

gitclone
npmi
npmrundev

实现思路如下：

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

关键实现

DOM



{col}}

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

左移

主要由以下几种情况：

2222=>4400
4222=>4420
0422=>4400
2242=>4420

按单行数据举例，

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

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

主要代码:

_list.forEach(item=>{
letfarthest=this.farthestPosition(list,item)
letnext=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)returnarr
lettmp=Array.from(Array(this.size)).map(()=>Array(this.size).fill(undefined))
for(leti=0;i1)tmp=this.rotate(tmp,n-1)
returntmp
},

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

总结

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

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐