基于vue编写的2048小游戏

  1. 具体干了件什么事情
    要实现如图所示的小游戏。2040游戏效果图
    规则是有16个格子,初始时会有两个格子上安放了两个数字,每次可以选择上下左右其中一个方向去滑动,每滑动一次,所有的数字方块都会往滑动的方向靠拢外,系统也会在空白的地方随即出现一个数字方块,相同数字的方块在靠拢,相撞时会相加。不断的叠加最终拼凑出8192这个数字就算成功。如果没有了空白的地方,也没有了相同的数字可以靠拢,相撞就游戏失败。

  2. 技术难点。
    2.1如图的展示,需要做到有滑动效果,相消的效果,
    2.2移动原理,还有判断数组相消,游戏结束,游戏胜利

  3. 怎么破解技术难点
    3.1滑动效果可是使用css的样式transform: translate(x,y);这个样式具有移动效果,我们可以把所以的数字块都定位到数字盘的最左上角,为了方便,我们把这个点称之为坐标原点(0,0),那么图中数字块64所在的坐标就为(3,3),由于我们使用的数字盘,和数字块都是矩形规则的,这里我先用的是写死的宽高从(0,0)–>(3,3)体现到样式上的距离就是(3*120px,3*120px),我定位这个数字块用的是transform: translate(3*120px,3*120px);由于我使用的是vue所以就更方便了,我只要准备好数据,这些重复性的工作就交个vue了,我使用了一个数组来装这个16个数字块,使用<span>标签来包裹每一个数字块,通过遍历数组来完成定位代码如下。
    数字块滑动
    3.2数字相消的效果可以使用es6的animate函数,我们其实只是做了个数字块在两毫秒内放大1.3倍然后又缩小回原始尺寸,这样给用户的感觉就是进行了合并,代码如下图所示。
    合并数字块时的样式改变
    3.3数字块移动,我们给数字块设置了如下数据结构{x:x, y:y, num:num, id:id, color:color},其实数字块的位置就是x,y的值,数字块的移动就相当于改变其x,y的值,我就拿一个方向作为例子,其他方向类似,我们按下上箭头,那么处理逻辑是先从y=0这排开始,也就是y=1这排有能够和y=0这排合并的合并,能下移的下移,然后是y=2,y=3,可是我们在新增数字块的时候x,y值是随机一个不存在的数字块坐标,这也就意味着数字中的不是有序的,我们需要首先根据y来进行排序,用排完序的和y-1排的进行比较处理,也就是说为了避免数组越界,我们排序的时候要去掉y=0这一层的,当检测到y-1为空时我们让当前数字块前进一步,并且继续和下一排做比较,如果检测到y-1不为空时,就看看他们的数值是否相同,相同则让下一排成2,本身数字块消失(这里面有个小坑,有的数字块可能面临两次操作,所以我额外记录了一个属性,用来判断当前数字块是否已经被处理过),涉及到的代码逻辑如下。
    排序
    移动函数
    3.4判断游戏是否成功,这个比较好实现,在每次移动的时候都去判断一次是不是有数字块的值达到了8192。
    3.5判读游戏是否失败,这个也是循环整个数组,首先判读数组是不是已经有16块了,其次判读还存不存在相邻的两个数字块的数字相同,如果满足16块且没有相同数字块相邻则判断游戏失败,关键代码如下。
    游戏结束

  4. 下篇博客需要完善的事项有
    4.1游戏数字块的移动采用矩阵方式
    4.2背景音乐的添加
    4.3游戏算法的优化

  5. 项目源码

  • 2
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
基于Vue游戏社交平台是一个基于网络的平台,旨在为游戏玩家提供一个沟通交流的空间。该平台是基于Vue框架开发的,借助Vue的高效渲染和组件化开发,可以实现快速搭建、响应式布局和良好的用户体验。 该平台的主要功能包括: 1. 游戏社区:玩家可以在这里发表自己的心得体会、分享游戏攻略,展示自己的游戏成果,并与其他玩家进行交流和互动。 2. 多人游戏匹配:玩家可以通过平台的多人匹配功能,与其他玩家组队进行游戏,促进团队协作和游戏体验的提升。 3. 社交功能:玩家可以添加好友、建立社交圈子,方便与其他玩家进行私聊、互赠礼物等社交互动。 4. 游戏资讯:平台会及时更新热门游戏的最新资讯,包括新版本发布、赛事活动等,以便玩家第一时间了解游戏动态。 5. 积分系统:玩家在平台上进行游戏互动,参加活动等都可以获得积分和奖励,从而增加玩家的参与度和持久性。 6. 用户个性化设置:平台提供了丰富的个性化设置功能,玩家可以根据自己的喜好选择游戏主题、个人形象等,定制独一无二的游戏社交体验。 通过基于Vue游戏社交平台,玩家能够方便地找到志同道合的游戏伙伴,分享游戏心得,拓展游戏圈子,丰富自己的游戏体验。平台的高效性能和丰富的功能将为玩家带来更加便捷、有趣的游戏社交体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值