项目概述
这是一个将经典益智游戏 2048 与沙盒游戏 《我的世界》 相结合的趣味作品。原版网页游戏经过重新设计,使用 uniapp 框架重构,技术栈基于 Vue.js,可实现小程序、Android、H5 等多端适配。
主要功能
经典 2048 玩法:通过滑动屏幕合并相同数字的方块,合成新的矿物方块。
合成动画:合并时方块会有缩放、弹幕效果,操作反馈强。
背景音乐与音效:添加了轻快的背景音乐,合并时伴有音效,提升沉浸感。
多端支持:基于 uniapp 编译,一套代码可生成微信小程序、H5 网页、Android/iOS App,覆盖主流平台。
技术实现
前端框架:Vue + uniapp,利用其跨端能力快速构建界面与交互。
核心算法:
滑动处理:采用“矩阵转置”处理上下左右四个方向。例如,向右滑动相当于矩阵转置后向左滑动,再转置回来,代码复用率高。
方块生成:每次移动后,在空白格随机生成一个 2 或 4方块。
胜负判断:检测是否无空格且无法合并(失败)。
动画实现:使用 CSS3 transition 和 keyframes 实现方块的合并缩放、弹幕出现的淡入效果,并通过 Vue 的 :class 绑定动态触发。
项目亮点
跨界融合:将数学益智游戏与《我的世界》美术风格结合,吸引两个群体的用户。
优雅的算法设计:矩阵转置法简化了方向逻辑,代码清晰且易于扩展。
细节打磨:矿物纹理的渐进设计、合并动画、背景音乐开关等,提升用户体验。
备注:部分安卓设备上多个音频同时播放存在抢占和延迟问题,虚拟机则不出现此问题,尝试过使用不同页面、不同应用分开播放,效果不尽如人意,代码层面难以解决。因此在安卓版本上删除了背景音乐,只保留音效。