如何实现未结束的Connect4游戏中途恢复 浏览器意外关闭后可续局

方案1：纯前端本地存储（优先推荐） #

无需额外开发后端、无需引入第三方框架或数据库，基于浏览器原生API即可实现，完全满足关闭浏览器后恢复对局的需求
你可以直接使用浏览器自带的localStorageAPI实现本地永久存储，只要用户不主动清理浏览器缓存，存档就会一直保留。

实现逻辑 #

• 每次玩家完成落子操作后，将当前对局的全部核心状态序列化后存入localStorage
• 玩家点击「Play」按钮时，优先读取localStorage中的存档，若存在未完成的对局则直接恢复，否则初始化新对局
• 对局结束（玩家获胜/平局）后自动清除存档，避免影响下次新开对局

示例代码 #

// 存储当前对局状态
const saveGame = () => {
  const gameState = {
    board: currentBoard, // 你的棋盘二维数组，常规四子棋为6行7列，0表示空位，1、2分别表示两位玩家的棋子
    activePlayer: activePlayer, // 当前待落子的玩家编号
    isGameFinished: isGameFinished, // 对局是否已结束
    totalMoves: totalMoves // 已落子总数，可选字段
  }
  localStorage.setItem('connect4_archive', JSON.stringify(gameState))
}

// 读取本地存档
const getSavedGame = () => {
  const archive = localStorage.getItem('connect4_archive')
  return archive ? JSON.parse(archive) : null
}

// 清除已结束的对局存档
const clearGameArchive = () => {
  localStorage.removeItem('connect4_archive')
}

// 落子逻辑中埋点存档
function handleDropPiece(columnIndex) {
  // 原有落子逻辑：判断列是否已满、写入棋盘、判断胜负、切换玩家
  // ...
  // 落子完成后保存状态
  saveGame()
}

// Play按钮点击逻辑
document.getElementById('play-btn').addEventListener('click', () => {
  const savedGame = getSavedGame()
  // 存在未完成的存档则恢复
  if (savedGame && !savedGame.isGameFinished) {
    currentBoard = savedGame.board
    activePlayer = savedGame.activePlayer
    isGameFinished = savedGame.isGameFinished
    totalMoves = savedGame.totalMoves
    // 调用你已有的棋盘渲染函数恢复界面
    renderBoard()
  } else {
    // 无存档则新开对局
    initNewGame()
  }
})

// 对局结束时调用清除存档
function handleGameOver(winner) {
  // 原有结束逻辑：展示获胜提示、禁用落子
  // ...
  clearGameArchive()
}

方案2：跨设备存档（仅需多设备同步时使用） #

如果需要实现用户换设备也能恢复对局，才需要搭建后端服务，可选技术栈如下：

• 后端语言：优先选Node.js（和前端JS技术栈统一，学习成本低），也可选择Python、Go、Java等
• 数据库：小体量使用轻量关系型数据库SQLite即可，用户量高可替换为MySQL、PostgreSQL，也可使用MongoDB这类NoSQL数据库
• 后端框架：Node.js生态可选择Express、Koa这类轻量框架快速开发接口
  实现逻辑为给每个用户生成唯一身份标识存在本地，每次落子将对局状态同步上传到后端存储，点击Play时请求接口拉取对应用户的存档即可。

内容的提问来源于stack exchange，提问作者Dinuka Kumara