PHP前端开发

微信小程序版2048小游戏

百变鹏仔 4天前 #前端问答
文章标签 小游戏

最近流行微信“跳一跳”小游戏,本站也有文章分享:php实现微信跳一跳小游戏,本文主要分享实现2048的算法以及注意的点,一起来学习吧!(源码地址见文章末尾)。

算法

生成4*4棋盘视图

随机生成2或4填充两个单元格

记录用户touch时的起始位置和结束位置,以此判断滑动方向

根据滑动方向移动单元格,并进行相同值合并

用户一次滑动完成后重复执行步骤2

判断游戏是否结束,并根据游戏结果产生不同提示

难点

确定滑动方向

用户滑动时相同格子合并,并移到滑动方向一侧
实现

视图实现

1、用wxml+wxss生成棋盘视图

2、用wx:for将数据渲染到每个单元格

逻辑实现

1、页面加载完毕随机用数字2或4填充两个单元格

2、判断用户滑动方向

使用touchStart事件函数获取起始位置touchStartX、touchStartY

使用touchMove事件函数获取终点位置touchEndX、touchEndY

var disX = this.touchStartX - this.touchEndX;    var absdisX = Math.abs(disX);    var disY = this.touchStartY - this.touchEndY;    var absdisY = Math.abs(disY);      // 确定移动方向 // 0:上, 1:右, 2:下, 3:左 var direction = absdisX &gt; absdisY ? (disX <p>3、根据滑动方向(假设向右滑动)移动表格以及相同项合并</p><p>将2048的棋盘生成4*4的二维数组list,为空的空格用0表示</p><pre class="brush:php;toolbar:false">// 比如棋盘数据如下 var grid = [    [2, 2, 0, 0],    [0, 0, 0, 0],    [0, 8, 4, 0],    [0, 0, 0, 0]];

根据滑动方向生成4*4二维数组

var list = [    [0, 0, 2, 2],  // 注意是0022不是2200,因为像右滑动所以从右边push入数组    [0, 0, 0, 0],    [0, 4, 8, 0],    [0, 0, 0, 0]];

相应代码(代码中this.board.grid为上面的初始grid):

formList(dir) {  // 根据传入的滑动方向生成list的四个数组 var list = [[], [], [], []];    for(var i = 0; i <p>将list的每一个小数组中的数字提到前面,0放到末尾</p><pre class="brush:php;toolbar:false">list2 = [    [2, 2, 0, 0],     [0, 0, 0, 0],    [4, 8, 0, 0],    [0, 0, 0, 0]];

相应代码:

changeItem(item) {  // 将 [0, 2, 0, 2] 改为 [2, 2, 0, 0] var cnt = 0;    for(var i = 0; i <p>将相同值的单元格加起来,并将后面的一个单元格值变为0</p><pre class="brush:php;toolbar:false">list2 = [    [4, 0, 0, 0],     [0, 0, 0, 0],    [4, 8, 0, 0],    [0, 0, 0, 0]];

相应代码:

combine(list) { // 滑动时相同的合并 for(var i = 0; i <p>将list2回退为list并渲染数据到棋盘视图</p><p>list = [<br>    [0, 0, 0, 4],<br>    [0, 0, 0, 0],<br>    [0, 0, 8, 4],<br>    [0, 0, 0, 0]<br>];<br></p><p>相应代码:</p><pre class="brush:php;toolbar:false">move(dir) {    // 0:上, 1:右, 2:下, 3:左 var curList = this.formList(dir);    var list = this.combine(curList);     var result = [[],[],[],[]];    for(var i = 0; i <p>4、重复步骤1</p><p>5、判断游戏是否结束</p><p>判断标准:4*4单元格填满且任意一个单元格上下左右没有相同值的单元格</p><pre class="brush:php;toolbar:false">isOver() {  // 游戏是否结束,结束条件:可用格子为空且所有格子上下左右值不等 for (var i = 0; i <p>6、根据游戏结果给出相应提示</p><p><img src="https://img.php.cn//upload/image/643/251/892/1516858360233019.jpg" title="1516858360233019.jpg" alt="3.jpg"></p><p>po一个源码地址:windlany/wechat-weapp-2048 有兴趣的可以尝试一下哦,希望能帮助到大家。</p><p>