用 uniapp 制作一个色觉测试小游戏

为了让自己有个额外变现的途径，制作了一个色觉测试小游戏然后加到了自己的小程序中。这不是那种枯燥的医学测试，而是一个既能测试色觉又充满趣味性的小游戏。玩家需要在一堆相似的色块中找出与众不同的那一个，听起来简单，但随着关卡的推进，难度会逐渐增加，相信能让不少人欲罢不能！

游戏界面设计

首先来看看这个颜值爆表的游戏界面。整体采用了清新的渐变背景配色，再加上毛玻璃效果的游戏区域，看着就让人心情愉悦：

css 复制代码

.container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 20px;
}

.game-area {
  background: white;
  border-radius: 20px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

头部信息区域巧妙地展示了得分和倒计时，这个进度条的动画效果简直不要太舒服：

vue 复制代码

<view class="header">
  <view class="score-board">
    <text class="score-value">{{ score }}</text>
  </view>
  <view class="timer">
    <text class="timer-value">{{ timeLeft }}s</text>
    <view class="progress-bar">
      <view class="progress" :style="{ width: `${(timeLeft/totalTime) * 100}%` }"></view>
    </view>
  </view>
</view>

游戏核心逻辑

这个游戏最有意思的部分就是色块的生成逻辑。随着关卡提升，色差会越来越小，考验玩家的色觉灵敏度：

javascript 复制代码

generateColors() {
  const baseHue = Math.random() * 360
  const baseSaturation = 70 + Math.random() * 20
  const baseLightness = 50 + Math.random() * 20
  
  // 这里的难度计算很巧妙，越到后面色差越小
  const difficulty = Math.max(20 - this.currentLevel, 5)
  const differentHue = baseHue + (Math.random() > 0.5 ? difficulty : -difficulty)
  
  const baseColor = `hsl(${baseHue}, ${baseSaturation}%, ${baseLightness}%)`
  const differentColor = `hsl(${differentHue}, ${baseSaturation}%, ${baseLightness}%)`
  
  // 随机放置不同的色块
  const totalBlocks = this.gridSize * this.gridSize
  this.differentIndex = Math.floor(Math.random() * totalBlocks)
  
  this.currentColors = Array(totalBlocks).fill(baseColor)
  this.currentColors[this.differentIndex] = differentColor
}

每过几关，游戏还会增加色块数量，让玩家措手不及：

javascript 复制代码

nextLevel() {
  this.currentLevel++
  if (this.currentLevel % 3 === 0) {
    this.gridSize = Math.min(this.gridSize + 1, 6)
  }
  this.generateColors()
}

交互体验

游戏的交互体验做得相当到位。点击色块时会有一个轻微的缩放效果，给人很好的触感反馈：

css 复制代码

.color-block {
  aspect-ratio: 1;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.color-block:active {
  transform: scale(0.95);
}

游戏结束时的弹窗效果也是满满的仪式感：

vue 复制代码

<view class="game-over-screen">
  <view class="result-card">
    <text class="final-score">最终得分: {{ score }}</text>
    <view class="stats">
      <view class="stat-item">
        <text class="stat-label">通过关卡</text>
        <text class="stat-value">{{ currentLevel - 1 }}</text>
      </view>
      <view class="stat-item">
        <text class="stat-label">准确率</text>
        <text class="stat-value">{{ accuracy }}%</text>
      </view>
    </view>
  </view>
</view>

小彩蛋

游戏中还藏了一些有趣的细节：

点错色块不会立即结束，而是有个短暂的动画效果，给玩家一个心理缓冲。
得分计算考虑了关卡难度，越难的关卡得分越高。
准确率的计算会影响最终评价，让玩家更在意每一次选择。

技术亮点总结

这个小游戏虽然看起来简单，但用到了不少前端的高级特性：

HSL 色彩空间的灵活运用
CSS Grid 实现自适应布局
优雅的动画过渡效果
响应式设计适配各种屏幕

最后，别忘了在退出游戏时清理定时器，这是一个经常容易被忽略的细节：

javascript 复制代码

beforeDestroy() {
  clearInterval(this.timer)
}

给大家玩一局 (*^_^*)