持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第21天，点击查看活动详情。

前言

之前我发布过一次联机五子棋，支持了禁手，但是不支持复盘。

今天，我终于开发完了复盘模式！非常好用！

开发过程中产出的技术文章如下，欢迎关注专栏《教你做小游戏》，欢迎关注我HullQin，你的支持是我开发免费工具的最大动力！

截图

介绍

如何开启复盘功能

玩家在「本地对战」、「单机演练」模式下，可以通过点击页面上方的按钮「复盘模式」，打开「复盘」。
玩家在「联机对战」结束后，点击右上角按钮「对局复盘」，也可进入复盘模式。

1021复盘入口.png

复盘功能特点

在复盘模式，所有棋子上都会展示一个数字：落子顺序。第一个落子数字为1。
玩家可以通过操控棋盘下方的「上一步」「下一步」，使棋盘回滚到某个步骤，观察当时的局面。
当玩家处于最新局面（即「下一步」不可点击），且尚未有人胜利时，可以继续落子，保持复盘模式。
当玩家处于棋局的中间步骤时（通过「上一步」到达的中间步骤），不可以在当前棋局下棋。
如果玩家期望在中间步骤下棋，可以点击「需要在此局面下棋」，会新窗口打开一个复盘模式的本地对战，当前中间步骤的棋局被复制过去，玩家可以继续下棋。

1021复盘功能.png

如何开发？

我在本地对战的URL中新增了一个参数s，全名step。

如果有参数s，表明处于复盘模式。否则，就是非复盘模式。逻辑跟以前兼容。

s的值是一个数字。s为0时，表明处于最新的一步。s每增加1，就要回退1步。直到s为棋子数目-1，到达棋局第一步，不可以再回退「上一步」了。

例如：

https://game.hullqin.cn/wzq/?p=7786886697a8a67995b79975aabbb99b84&b=&s=0

容错处理

由于URL是暴露给用户的，玩家可能随意修改它，所以我做了兼容，当s的值不是数字、或者是负数、或者数字过大、或者是小数时，我做了兼容处理。无论怎样改，我都争取给玩家最好的体验！不能报错！

具体逻辑如下：

const getStep = (s: string | null, pieces: number[]) => {
  if (s === null) return null;
  if (pieces.length <= 1) return 0;
  const step = Math.floor(Number(s)) || 0;
  if (step < 0) return 0;
  if (step > pieces.length - 1) return pieces.length - 1;
  return step;
};

写在最后

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，联系我，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋、象棋等游戏，不收费无广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这2个专栏里分享：《教你做小游戏》、《极致用户体验》。

联机五子棋！复盘功能上线！

前言

截图

介绍

如何开启复盘功能

复盘功能特点

如何开发？

容错处理

写在最后