微信小程序实现2048小游戏的详细过程

网友投稿 540 2023-11-10

效果图

实例代码

今天我们要用微信小程序实现2048小游戏，效果图如上面所示。游戏的规则很简单，你需要控制所有方块向同一个方向运动，两个相同数字方块撞在一起之后合并成为他们的和，每次操作之后会随机生成一个2或者4，最终得到一个“2048”的方块就算胜利了。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 构造一个空的矩阵[[null,..,size.length],[]]
empty: function() {
var cells = [];
for (var x = 0; x < this.size; x++) {
var row = cells[x] = [];
for (var y = 0; y < this.size; y++) {
row.push(null);
}
}
// [[{x:0,y:0},{x:0,y:1}],[]]
return cells;
},

微信小程序实现2048小游戏的详细过程

首先我们需要做的是把游戏主体分成16个格子。用Grid代表这些格子，然后这些格子还有一下这些操作：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 在空格子中随机挑选出一个格子
randomAvailableCell: function() {
// 获取可填充的格子坐标
availableCells: function() {
// 是否存在空单元格
cellsAvailable: function()
/*
* 获取单元格内容
* @param {object} cell {x:0,y:0} 单元格坐标
*/
cellContent: function(cell) {

上面的函数都是为了使接下来开发更加简便，这样子就可以直接操作了。

一开始进行初始化数据，以90%机率产生2，以10%机率产生4。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
touchStart: function(events) {
// 多指操作
this.isMultiple = events.touches.length > 1;
if (this.isMultiple) {
return;
}
var touch = events.touches[0];
this.touchStartClientX = touch.clientX;
this.touchStartClientY = touch.clientY;
},
touchMove: function(events) {
var touch = events.touches[0];
this.touchEndClientX = touch.clientX;
this.touchEndClientY = touch.clientY;
},
touchEnd: function(events) {
if (this.isMultiple) {
return;
}
var dx = this.touchEndClientX - this.touchStartClientX;
var absDx = Math.abs(dx);
var dy = this.touchEndClientY - this.touchStartClientY;
var absDy = Math.abs(dy);
if (Math.max(absDx, absDy) > 10) {
var direction = absDx > absDy ? (dx > 0 ? 1 : 3) : (dy > 0 ? 2 : 0);
var data = this.GameManager.move(direction) || {
grids: this.data.grids,
over: this.data.over,
won: this.data.won,
score: this.data.score
};
}

进行游戏手势开始移动和移动结束的操作，上面这一段主要是进行了手指移动方向的判断，最后是判断出了direction，传入this.GameManager.move(direction)进行移动操作。

这里面的难点在于数据结构的构建，只要把格子弄明白就比较好办。然后就是手指滑动的判断了，上面代码也比较清楚地展现了。

总结

到此这篇关于微信小程序实现2048小游戏的文章就介绍到这了,更多相关微信小

您可能感兴趣的文章:微信小程序实现的贪吃蛇游戏【附源码-】微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧微信小程序—微信跳一跳,Android游戏助手(外挂)使用教程详解微信小程序版翻牌小游戏微信小程序五子棋游戏AI实现方法【附demo源码-】微信小程序实现拼图小游戏微信小程序五子棋游戏的棋盘，重置，对弈实现方法【附demo源码-】微信小程序实现简单的摇骰子游戏微信小程序实现拼图游戏微信小程序实现扫雷游戏

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 矩阵 数字
上一篇:微信小程序实现分页功能
下一篇:开放银行生态共赢: 改变金融业务模式的未来
相关文章

 发表评论

暂时没有评论，来抢沙发吧~