目录
一、项目演示
无
二、项目测试环境
三、项目关键源码
1.游戏页面
Page({
data: {
hidden: false,
start: "开始游戏",
num: [],
score: 0,
bestScore: 0, // 最高分
endMsg: '',
over: false // 游戏是否结束
},
// 页面渲染完成
onReady: function () {
if(!wx.getStorageSync("highScore"))
wx.setStorageSync('highScore', 0);
this.gameStart();
},
gameStart: function() { // 游戏开始
var main = new Main(4);
this.setData({
main: main,
bestScore: wx.getStorageSync('highScore')
});
this.data.main.__proto__ = main.__proto__;
this.setData({
hidden: true,
over: false,
score: 0,
num: this.data.main.board.grid
});
},
gameOver: function() { // 游戏结束
this.setData({
over: true
});
if (this.data.score >= 2048) {
this.setData({
endMsg: '恭喜达到2048！'
});
wx.setStorageSync('highScore', this.data.score);
} else if (this.data.score > this.data.bestScore) {
this.setData({
endMsg: '创造新纪录！'
});
wx.setStorageSync('highScore', this.data.score);
} else {
this.setData({
endMsg: '游戏结束！'
});
}
},
// 触摸
touchStartX: 0,
touchStartY: 0,
touchEndX: 0,
touchEndY: 0,
touchStart: function(ev) { // 触摸开始坐标
var touch = ev.touches[0];
this.touchStartX = touch.clientX;
this.touchStartY = touch.clientY;
},
touchMove: function(ev) { // 触摸最后移动时的坐标
var touch = ev.touches[0];
this.touchEndX = touch.clientX;
this.touchEndY = touch.clientY;
},
touchEnd: function() {
var disX = this.touchStartX - this.touchEndX;
var absdisX = Math.abs(disX);
var disY = this.touchStartY - this.touchEndY;
var absdisY = Math.abs(disY);
if(this.data.main.isOver()) { // 游戏是否结束
this.gameOver();
} else {
if (Math.max(absdisX, absdisY) > 10) { // 确定是否在滑动
this.setData({
start: "重新开始",
});
var direction = absdisX > absdisY ? (disX < 0 ? 1 : 3) : (disY < 0 ? 2 : 0); // 确定移动方向
var data = this.data.main.move(direction);
this.updateView(data);
}
}
},
updateView(data) {
var max = 0;
for(var i = 0; i < 4; i++)
for(var j = 0; j < 4; j++)
if(data[i][j] != "" && data[i][j] > max)
max = data[i][j];
this.setData({
num: data,
score: max
});
},
onShareAppMessage: function() {
return {
title: '2048小游戏',
desc: '来试试你能达到多少分',
path: '/page/user?id=123'
}
}
})1. 基本结构
- 使用微信小程序Page构造器创建页面
- 引入两个模块：Board(网格)和Main(主逻辑)
- 包含data对象存储游戏状态数据
2. 核心数据
- 存储游戏板状态(num数组)
- 记录当前分数(score)和最高分(bestScore)
- 游戏状态标志(over表示是否结束)
- 结束提示信息(endMsg)
3. 生命周期函数
- onReady: 页面渲染完成后初始化游戏
- 初始化时检查本地存储中的最高分记录
4. 游戏控制函数
- gameStart(): 初始化游戏实例，重置状态
- gameOver(): 处理游戏结束逻辑，判断是否破纪录
- updateView(): 更新视图数据
5. 触摸事件处理
- touchStart/touchMove记录触摸位置
- touchEnd计算滑动方向
- 判断有效滑动(移动距离>10px)
- 根据方向调用移动逻辑(0:上,1:右,2:下,3:左)
6. 游戏特色功能
- 2048达成时有特殊祝贺消息
- 破纪录时更新本地存储的最高分
- 支持分享功能(onShareAppMessage)
7. 状态管理
- 使用setData更新视图
- 通过wx.setStorageSync持久化最高分
- 游戏状态(开始/结束)通过hidden和over控制
8. 游戏逻辑
- 委托Main类处理核心游戏规则
- 通过原型继承保持方法可用性
- 移动后检查游戏是否结束
9. UI交互
- 开始/重新开始按钮
- 实时显示当前分数和最高分
- 游戏结束显示提示信息
10. 优化点
- 滑动阈值(10px)防止误触
- 只更新变化的视图数据
- 本地存储保存最佳记录
2.启动页
<!--index.wxml-->
<view class="container">
<view>
<image class='logo' src='../../img/logo.png'></image>
<view class='load'>
<text class='{{current == 0 ? "sct": ""}}'></text>
<text class='{{current == 1 ? "sct": ""}}'></text>
<text class='{{current == 2 ? "sct": ""}}'></text>
<text class='{{current == 3 ? "sct": ""}}'></text>
</view>
</view>
</view>
1. 功能
- 该文件是微信小程序的启动页（或加载页），用于实现一个数字递增动画，2秒后自动跳转到2048游戏主页面。
2. 核心数据
- current: 0：控制动画的当前帧（0~3循环变化）。
3. 执行流程
- onReady() 页面加载完成后调用 load() 方法启动动画。
- load() 方法使用 setInterval 每400ms更新一次 current，循环5次后跳转至 ../2048/2048。
4. 动画逻辑
- current 从0开始递增，超过3时归零，共循环5次（总时长2秒）。
- 可能是模拟加载进度或数字滚动效果。
5. 跳转逻辑
- 动画结束后，使用 wx.redirectTo 关闭当前页并进入2048游戏页。
四、项目源码
👇👇👇👇👇快捷方式👇👇👇👇👇