在线体验 | GitHub 源码：TiffanyHoo/gomoku-dominator

项目介绍

「称霸五子棋」是一个基于 WebSocket 的双人实时联机五子棋游戏。无需注册、无需登录，打开浏览器即可与朋友对战。

项目初衷很简单——想忙里偷闲下五子棋，做一个足够轻量、即开即用的在线版本。

✨ 功能

• 房间对战：创建房间生成 6 位房间号，分享给朋友即可加入
• 实时同步：基于 WebSocket，落子即时同步，零延迟体验
• 胜负判定：自动检测五连珠，弹出胜负提示
• 局内聊天：边下棋边聊天，嘲讽对手必备
• 重新开始：一局结束随时再来，无需重新建房间
• 落子预览：鼠标悬停显示半透明棋子预览，精准落子
• 视觉打磨：Canvas 绘制棋盘棋子，径向渐变模拟光泽质感

技术方案

整个项目追求极简，零框架、零构建工具，纯原生实现。

技术栈

层级	技术选型
后端	Node.js + 原生 http 模块
通信	WebSocket（ws 库）
前端	原生 HTML / CSS / JavaScript
渲染	Canvas 2D

架构设计

浏览器 A ←——WebSocket——→ Node.js 服务器 ←——WebSocket——→ 浏览器 B

服务端是整个架构的核心，承担了两个职责：

1. 静态文件服务

使用 Node.js 原生 http 模块托管 public/ 目录下的前端文件，无需 Express 等框架。

2. WebSocket 游戏服务器

基于 ws 库实现实时通信，核心数据结构是一个 rooms Map：

rooms = Map<{
  players: [{ ws, color }],
  board: 15×15 二维数组,
  turn: 当前轮次 (1=黑, 2=白),
  started: boolean
}>

通信协议

客户端与服务端通过 JSON 消息通信，协议设计如下：

消息类型	方向	说明
create	客户端→服务端	创建房间
join	客户端→服务端	加入房间
move	客户端→服务端	落子
restart	客户端→服务端	请求重新开始
chat	双向	聊天消息
created	服务端→客户端	房间创建成功，返回房间号
joined	服务端→客户端	加入房间成功
start	服务端→客户端	对战开始
move	服务端→客户端	对手落子广播
leave	服务端→客户端	对手离开通知
error	服务端→客户端	错误提示

关键实现细节

胜负判定算法：在四个方向（横、竖、两条对角线）上双向延伸计数，时间复杂度 O(1)。

棋子渲染：使用 Canvas 径向渐变（createRadialGradient）模拟棋子光泽，黑子从 #666 渐变到 #111，白子从 #fff 渐变到 #ccc，视觉效果远胜纯色填充。

落子预览：鼠标移动时实时计算最近的交叉点，绘制半透明（globalAlpha = 0.4）的预览棋子，离开棋盘自动清除。

房间号生成：6 位随机字符，排除了容易混淆的 0/O/I/1，使用 ABCDEFGHJKLMNPQRSTUVWXYZ23456789 共 32 个字符，碰撞概率极低。

使用方法

快速开始（本地运行）

# 克隆项目
git clone https://github.com/TiffanyHoo/gomoku-dominator.git
cd gomoku-dominator

# 安装依赖
npm install

# 启动服务
npm start

打开浏览器访问 http://localhost:3000 即可。

该应用已部署到服务器，欢迎来耍~

通过 http://129.226.153.32:3000 访问。

游戏流程

1. 玩家 A 点击「创建房间」，获得 6 位房间号
2. 将房间号分享给朋友
3. 玩家 B 输入房间号，点击「加入房间」
4. 对战开始，黑方先行
5. 五子连珠即获胜，可点击「再来一局」继续

求打赏 ☕

如果你觉得这个项目有趣，欢迎请我吃个包子，以支持我的服务器永不断电！！

微信	支付宝

如果打赏不方便，给项目点个 ⭐ Star 也是对我莫大的支持：
👉 https://github.com/TiffanyHoo/gomoku-dominator