微信小程序实现2048小游戏的详细过程
作者:诗一样的代码 时间:2024-04-23 09:11:18
效果图
实例代码
今天我们要用微信小程序实现2048小游戏,效果图如上面所示。游戏的规则很简单,你需要控制所有方块向同一个方向运动,两个相同数字方块撞在一起之后合并成为他们的和,每次操作之后会随机生成一个2或者4,最终得到一个“2048”的方块就算胜利了。
// 构造一个空的矩阵[[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;
},
首先我们需要做的是把游戏主体分成16个格子。用Grid代表这些格子,然后这些格子还有一下这些操作:
// 在空格子中随机挑选出一个格子
randomAvailableCell: function() {
// 获取可填充的格子坐标
availableCells: function() {
// 是否存在空单元格
cellsAvailable: function()
/*
* 获取单元格内容
* @param {object} cell {x:0,y:0} 单元格坐标
*/
cellContent: function(cell) {
上面的函数都是为了使接下来开发更加简便,这样子就可以直接操作了。
// 初始化数据
addStartTiles: function() {
for (var x = 0; x < this.startTiles; x++) {
this.addRandomTiles();
}
},
// 在一个随机单元格中随机填充2或4
addRandomTiles: function() {
if (this.grid.cellsAvailable()) {
var value = Math.random() < 0.9 ? 2 : 4;
var cell = this.grid.randomAvailableCell();
var tile = new Tile(cell, value);
this.grid.insertTile(tile); // 插入一个单元格
}
},
一开始进行初始化数据,以90%机率产生2,以10%机率产生4。
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)进行移动操作。
这里面的难点在于数据结构的构建,只要把格子弄明白就比较好办。然后就是手指滑动的判断了,上面代码也比较清楚地展现了。
总结
来源:https://juejin.cn/post/7013162080182206472
标签:微信小程序,2048,小游戏
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
求英文字母或数字或下划线或汉字的js正则表达式
2009-08-04 17:59:00
python的函数和方法(上)
2021-02-04 11:46:16
![](https://img.aspxhome.com/file/2023/4/64274_0s.jpg)
自动化收集SQLSERVER诊断信息的工具选择及使用介绍
2024-01-14 11:01:04
![](https://img.aspxhome.com/file/2023/9/116299_0s.gif)
python实现的爬取电影下载链接功能示例
2023-02-06 20:30:47
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2022-12-28 05:44:11
![](https://img.aspxhome.com/file/2023/5/67925_0s.png)
修改mysql默认字符集的两种方法详细解析
2024-01-27 01:48:17
Mysql 5.6添加修改用户名和密码的方法
2024-01-20 09:02:57
MySQL5.6安装图解(windows7/8_64位)
2024-01-12 13:48:00
![](https://img.aspxhome.com/file/2023/3/87123_0s.jpg)
浅谈Python type的使用
2021-05-17 05:58:59
用JS找出字符串中出现次数最多的字母
2007-11-12 13:40:00
python实现翻转棋游戏(othello)
2022-06-02 10:40:19
![](https://img.aspxhome.com/file/2023/9/125049_0s.jpg)
sql获取存储过程返回数据过程解析
2024-01-20 07:52:47
numpy中nan_to_num的具体使用
2021-10-31 13:04:55
![](https://img.aspxhome.com/file/2023/5/128565_0s.png)
Python用5行代码实现批量抠图的示例代码
2021-04-16 23:56:05
![](https://img.aspxhome.com/file/2023/1/133771_0s.jpg)
python银行卡号码校验Luhn模10算法
2022-03-18 07:32:52
![](https://img.aspxhome.com/file/2023/3/135403_0s.png)
Python后台开发Django会话控制的实现
2022-11-09 22:29:16
通过Python收集汇聚MySQL 表信息的实例详解
2024-01-18 17:25:20
![](https://img.aspxhome.com/file/2023/2/102782_0s.png)
python写入文件自动换行问题的方法
2022-06-13 11:28:18
![](https://img.aspxhome.com/file/2023/4/130644_0s.png)
JS实现在文本指定位置插入内容的简单示例
2024-04-19 10:15:17
浅谈Tensorflow 动态双向RNN的输出问题
2022-10-16 21:30:35
![](https://img.aspxhome.com/file/2023/3/97733_0s.jpg)