基于vue编写的2048小游戏

具体干了件什么事情
要实现如图所示的小游戏。
规则是有16个格子，初始时会有两个格子上安放了两个数字，每次可以选择上下左右其中一个方向去滑动，每滑动一次，所有的数字方块都会往滑动的方向靠拢外，系统也会在空白的地方随即出现一个数字方块，相同数字的方块在靠拢，相撞时会相加。不断的叠加最终拼凑出8192这个数字就算成功。如果没有了空白的地方，也没有了相同的数字可以靠拢，相撞就游戏失败。
技术难点。
2.1如图的展示，需要做到有滑动效果，相消的效果，
2.2移动原理，还有判断数组相消，游戏结束，游戏胜利
怎么破解技术难点
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.1游戏数字块的移动采用矩阵方式
4.2背景音乐的添加
4.3游戏算法的优化
项目源码

基于vue编写的2048小游戏相关推荐

java 2048游戏_JAVA2048游戏本课程设计是基于java语言的2048小游戏设计联合开发网 - pudn.com...
JAVA2048游戏所属分类:游戏开发工具:Java 文件大小:789KB 下载次数:4 上传日期:2020-11-23 10:57:11 上传者:滴滴滴大萌说明: 本课程设计是基于jav ...
基于 Vue 制作一个猜拳小游戏
目录前言: 项目效果展示: 对应素材: 代码实现思路: 实现代码: 总结: 前言: 在工作学习之余玩一会游戏既能带来快乐,还能缓解生活压力,跟随此文一起制作一个小游戏吧. 描述: 石头剪子布,是一种 ...
用C++编写的2048小游戏
随便写写的一个小游戏这个小游戏算是原理比较简单的一个.用了curses库进行开发.顺便熟悉了一下git的相关操作. 实际写起来还是有一些小bug的,现在改正了一些. 源码请看这里:https://g ...
全志V853开发板移植基于 LVGL 的 2048 小游戏
LVGL 开发实战移植基于 LVGL 的 2048 小游戏这一节将以一个已经编写好的 lvgl 小游戏 2048 描述如何将已经编写完成的 lvgl 程序移植到开发板上. 这里使用的 2048 小 ...
c++2048小游戏编写
一.序言最近编写了一个小游戏,叫作2048,用到了面向对象的知识. 二.头文件与准备 #include<bits/stdc++.h> #include<windows.h> ...
java编写2048小游戏
java版2048小游戏 java编写2048小游戏 java编写2048小游戏 // An highlighted block /*** */ package games;/*** @author ...
基于c++EGE图形库编写的五子棋小游戏
基于c++EGE图形库编写的五子棋小游戏 EGE图形库新手推荐使用 EGE(Easy Graphics Engine),是windows下的简易绘图库,是一个类似BGI(graphics.h)的面向 ...
C语言编写2048小游戏
该博文为原创文章,未经博主同意不得转载,如同意转载请注明博文出处本文章博客地址:https://cplusplus.blog.csdn.net/article/details/104992424 2 ...
2048小游戏编写思路
有点难关键知识点下面请各位读者先学习一下该游戏中涉及到的几个关键知识点,有了这些必备条件,我们才好讲解 2048 游戏的设计思路. 1) 改变文本颜色 2048 游戏设置的格子边框颜色为湖蓝色,其 ...

基于vue编写的2048小游戏

基于vue编写的2048小游戏相关推荐

最新文章

热门文章