1. 设计关卡数据与星级规则#

所有关卡数据统一放在 utils/data.js 中。每关由两个 8×8 的二维数组组成：map 是地形层，0 表示空（不绘制且不可通行）、1 是墙、2 是路、3 是终点（草窝）、5 是玩家初始位置（初始化后清成路）；box 是箱子层，0 表示无、4 表示小猪。地形与箱子分层存放，是为了让「箱子在终点上」这一状态可以直接用 box[r][c] === 4 && map[r][c] === 3 判断，不必额外维护终点占用情况。

星级评定以每关最优步数为基准，最优值由 BFS 求解器离线计算得出，写死在 optimal 对象中。步数不超过最优的 1.3 倍评三星，不超过 1.8 倍评二星，否则一星：

1
function getStars(level, steps) {
2
  const opt = optimal[level]
3
  if (!opt || !steps || steps <= 0) return 0
4
  if (steps <= opt * 1.3) return 3
5
  if (steps <= opt * 1.8) return 2
6
  return 1
7
}

每关最佳步数以 sokoban_best 为键存入本地缓存，saveBest 只在成绩更优时覆盖，并返回是否刷新纪录，供弹窗展示。

2. 实现选关首页#

首页 pages/index/index.wxml 由头部标题、关卡卡片网格和底部说明三部分组成。关卡列表在 loadLevels 中组装：读出每关的最佳步数，换算出星级和 cleared 状态，卡片上显示第几关、最佳步数和星级字符串。点击卡片通过 wx.navigateTo 跳转到游戏页并带上关卡参数：

1
chooseLevel(e) {
2
  const level = e.currentTarget.dataset.level
3
  wx.navigateTo({ url: '../game/game?level=' + level })
4
}

由于从游戏页返回首页不会触发 onLoad，星级和最佳步数的刷新放在 onShow 中处理，保证每次返回都能看到最新成绩。

3. 用 canvas 绘制游戏棋盘#

游戏页使用 canvas type="2d" 绘制棋盘。onReady 时通过 wx.createSelectorQuery 拿到 canvas 节点和尺寸，做 DPR 适配后再获取绘图上下文，避免高分屏上画面发虚：

1
const dpr = sysInfo.pixelRatio || 2
2
canvasNode.width = res[0].width * dpr
3
canvasNode.height = res[0].height * dpr
4
ctx.scale(dpr, dpr)
5
cell = res[0].width / COL

素材用 canvasNode.createImage() 预加载，共 stone、pig、bird 三张，全部加载完成后才设置 imagesReady 并首绘，同时把 boardReady 置为 true 让画布淡入显示，避免图片逐张加载时出现「分层闪现」。地板不再使用图片，改为直接自绘棋盘交错的两种草色；终点草窝用虚线圆加半透明填充表示。

drawCanvas 按「格子底色 → 草窝 → 小猪 → 归位动效 → 小鸟」的顺序绘制，所有图元都留出 cell * 0.045 的缝隙并做圆角裁剪，让像素素材呈现贴纸质感。归位的小猪会额外加金色描边和一个对勾。

4. 实现移动、推箱与撤销#

move(dr, dc) 是游戏的核心逻辑。先判断目标格是否可通行（isWalkable 排除了越界、0 空地和 1 墙），若目标格上有小猪，则再检查小猪前方一格是否可通行且没有其它小猪，两个条件都满足才允许推动：

1
move(dr, dc) {
2
  if (this.isWin) return
3
  const nr = this.row + dr
4
  const nc = this.col + dc
5
  if (!this.isWalkable(nr, nc)) return
6

7
  const before = this.doneSet()   // 必须在推箱前记录归位集合
8

9
  if (this.box[nr][nc] === 4) {
10
    const br = nr + dr
11
    const bc = nc + dc
12
    if (!this.isWalkable(br, bc) || this.box[br][bc] === 4) return
13
    this.saveHistory()
14
    this.box[nr][nc] = 0
15
    this.box[br][bc] = 4
16
  } else {
17
    this.saveHistory()
18
  }
19
  this.row = nr
20
  this.col = nc
21
  this.setData({ steps: this.data.steps + 1, boxDone: this.countDone() })
22
  this.drawCanvas()
23
  // 对比 before / after 找出本步新归位的小猪，播放动效
24
  this.checkWin()
25
}

撤销功能通过 history 栈实现：每次移动前调用 saveHistory 把当前玩家坐标和箱子图层深拷贝一份（box.map(r => r.slice())）压栈，栈上限 200 步；点「撤销」时弹栈恢复，步数减一后重绘。

5. 方向键与滑动手势#

控制方式支持两种。方向键用四个 .dirBtn 分别绑定 up / down / left / right，箭头是用 CSS 边框画的三角形。滑动手势则在 boardWrap 上监听 bindtouchstart / bindtouchend，记录起止坐标后比较 dx、dy 的大小决定主轴方向，并设置 25px 的阈值过滤误触：

1
touchEnd(e) {
2
  const dx = e.changedTouches[0].clientX - this.startX
3
  const dy = e.changedTouches[0].clientY - this.startY
4
  if (Math.abs(dx) < 25 && Math.abs(dy) < 25) return
5
  if (Math.abs(dx) > Math.abs(dy)) {
6
    if (dx > 0) this.move(0, 1)
7
    else this.move(0, -1)
8
  } else {
9
    if (dy > 0) this.move(1, 0)
10
    else this.move(-1, 0)
11
  }
12
}

小猪归位时播放金环扩散动效并调用 wx.vibrateShort 轻震动，动效用 canvasNode.requestAnimationFrame 逐帧推进，480ms 内透明度从 1 衰减到 0。

6. 通关判定与结算#

checkWin 在每步移动后调用，当已归位数量等于小猪总数时判定通关：先调 saveBest 写入成绩并拿到是否刷新纪录，再算出星级和距离下一星的差距。由于 canvas 是原生组件、层级永远高于普通 view，弹窗会被画布遮挡，因此在弹窗弹出前先用 wx.canvasToTempFilePath 把当前棋盘导出成临时图片，把 canvas 换成一张 image 显示，从而绕过层级限制：

1
this.snapshotBoard(() => {
2
  this.setData({
3
    showWin: true,
4
    starText: data.starText(stars),
5
    isNewRecord: isNewRecord,
6
    nextStarTip: gap > 0 ? '再少 ' + gap + ' 步可得 ' + (stars + 1) + ' 星' : ''
7
  })
8
})

弹窗提供「选关 / 重玩 / 下一关」三个出口，点「下一关」时直接切换 this.level 并重新初始化地图，最后一关通关后返回选关页并提示「全部关卡已通关」。

7. 编译运行#

完成后在微信开发者工具中编译预览。首页正确显示 4 张关卡卡片和星级；点击进入任意关卡后，棋盘、小鸟、小猪、草窝都能正常绘制；点击方向键或在棋盘上滑动，小鸟会相应移动，遇到小猪时将其推动，撞墙或小猪后方受阻则不移动；点击「撤销」可以逐步回退，「重玩」重置本关；把所有小猪推入草窝后弹出结算弹窗，显示步数、星级和升星提示；返回首页后对应关卡的星级和最佳步数已更新。