vue实现2048小游戏功能思路详解
试玩地址
项目地址
使用方法:
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(发邮件时,请将#更换为@)进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。