猜词游戏的实现思路与体验优化

项目技术栈

• 原生微信小程序

需实现的功能

一个猜词游戏，需具备以下基本功能：

1. 首页展示目前已有的不同类型的词库
2. 游戏前，可选择游戏时长
3. 游戏中，倒计时显示剩余时间
4. 游戏中，画面中间显示待猜词语
5. 游戏中，需要有一种方式来判断当前词语是猜对或者跳过，进行操作后，进行切词（随机）
6. 游戏结束，显示答对题数、再玩一次和回到首页

实现思路

根据所需功能，初步分析，需要新建四个页面，分别为首页（词库列表页）、游戏开始页、游戏游玩页和游戏结束页。

这类猜词游戏市面上已经有很多，所以可以进行参考，主要参考页面的布局、样式及游玩的过程，看看能不能对我们所需要的功能的开发有所帮助。

通过对小程序上的猜词游戏和猜词的 APP 的使用，得出下面的结论：

1. 在游戏正式开始倒计时前，有 3 秒的倒计时，用于将手机对着，需要表演的一方
2. 采用手机晃动的方式进行猜对或跳过的判断
3. 页面跳转逻辑：首页 -> 开始页 -> 游玩页（结束页） -> 首页

每一点的作用：

1. 用于增加游戏的体验
2. 确定猜对和跳过的方式
3. 修改之前设想的页面，只有首页、开始页和游玩页（结束页）。将游玩页和结束页变为一个页面，在页面返回逻辑上，可以通过微信小程序默认的返回，到开始页。如果为两个不同的页面，首先从游戏页到结束页，会有页面跳转的感觉；其次使用默认的返回，不能从结束页返回到开始页。

遇到的问题

采用监听手机晃动（对应小程序为 加速计 相关 api）进行猜对和跳过的判断，灵敏度难以掌握，要么太灵敏，要么太不灵敏，操作的反馈不一定准确，很容易误操作。

需要换一种判断方式：将页面分为左右两块区域，用不同的背景色进行区分，点击左边为猜对，点击右边为跳过。强制游戏页为横屏：

1. 配置指定页面的 配置项，添加

{
  // 其他配置,
  // landscape 横屏
  "pageOrientation": "landscape"
}

pageOrientation 的值可为 auto、 portrait 或 landscape。

缺点不好动态切换横屏和竖屏。

2. 使用 page-meta （页面属性配置节点）的 page-orientation 属性。属性值：页面的方向，可为 auto、 portrait 或 landscape。

可以通过代码进行页面横竖屏的控制，但经过测试，发现如果想转向，会先在原来的方向保持然后突然转向。

体验改进

1. 开始游戏按钮和游戏中的点击左边或右边区域需要添加防抖，避免短时间内多次点击
2. 没有开始正式倒计时（剩余时间等于选择的游戏时长），点击猜对和跳过区域不会有反应
3. 进行猜对和跳过反馈时，游戏时间暂停 1 秒，1 秒后，切换到下一个词
4. 游戏中，倒计时区域，改为左边关闭图标（可点击区域要大一些，可以加上内边距），中间为倒计时进度条，右边为倒计时剩余时间
5. 开始页和游戏页，时间数字的变化显示，因为是非等宽字体，所以不一样的数字宽度会不一样，就导致布局的改变。需要给数字容器设置一个指定的宽度。css 属性，font-variant-numeric 值 为 tabular-nums 时，强制每个数字等宽。
6. 游戏音效的添加。321倒计时的音效、猜对音效、猜错音效、时间快到了的音效和游戏结束的音效（InnerAudioContext）
7. 点击猜对或猜错区域，对应区域的背景色进行闪动（背景色透明度改变，添加动画效果）

结语

记录一次自己开发猜词游戏实现的大体思路和过程。如有更好的建议或改进，欢迎交流。