Design, implement, debug, revi…

# Cloudflare Workers + Durable Objects 双人五子棋 Demo 方案

一、架构设计

• Worker：入口，负责路由（HTTP 返回页面 + WebSocket 升级）
• Durable Object（DO）：每个对局一个 DO 实例，维护棋盘状态、玩家连接、回合与计时器
• 前端：单页 HTML + Canvas 渲染，WebSocket 与 Worker 通信

二、核心实现要点

1. 项目结构

```

/src

index.js // Worker 入口

game.js // GameRoom DO 类

/wrangler.toml // 配置，需启用 DO + new_sqlite/classes 绑定

/src/index.html // 前端页面

```

2. wrangler.toml 关键配置

```toml

[[durable_objects.bindings]]

name = "GAME_ROOM"

class_name = "GameRoom"

[[migrations]]

tag = "v1"

new_sqlite_classes = ["GameRoom"] # 免费版需用 SQLite 类

```

3. DO 核心逻辑（GameRoom 类）

• 状态：15×15 棋盘数组、black/white 玩家 WebSocket、currentTurn、moveHistory
• 回合制走子：收到 move 消息校验：
• 发送者是否为当前回合方
• 落子位置是否为空
• 通过后广播 {type:"move", x, y, color}
• 每步后检查横向/纵向/两斜线是否连成五子 → 广播 gameover
• 断线重连：
• 客户端携带 roomId + playerId（首次分配，存 localStorage）
• WS 关闭时移除连接但不清空对局状态
• 重连时按 playerId 恢复身份，下发完整棋盘快照（sync 消息）
• 10秒超时判负：

```js

setTurnTimeout() {

this.storage.deleteAlarm(); // 清旧闹钟

this.storage.setAlarm(Date.now() + 10000);

}

async alarm() {

if (Date.now() - this.lastMoveAt >= 10000) {

this.broadcast({type:"timeout", loser: this.currentTurn});

}

}

```

每次落子重置 alarm（DO 的 Alarm API 是实现计时的标准做法）

4. 前端要点

• Canvas 绘制棋盘，点击换算坐标发送 move
• 收到 sync 全量重绘；收到 move 增量落子
• 显示倒计时（服务端时间戳校准，避免本地误差）
• 重连按钮：直接重新 connect 同一 roomId/playerId

三、部署步骤

1. npm i -g wrangler && wrangler login（授权你的账号）

2. wrangler init → 粘贴代码 → wrangler deploy

3. 首次部署 DO 需 migrations 生效；免费版每天约 10 万请求额度

4. 用 wrangler tail 观察日志调