围棋-html版本

一、界面布局 软件采用左右两栏布局,左侧为棋盘及信息区,右侧为垂直排列的功能按钮,整体风格古典雅致。

  • 棋盘区:19×19 标准棋盘,采用立体感棋子、木质底色,并带有星标(天元、小目等)。棋盘支持点击落子,并有落点偏离提示。
  • 计时器:上方显示黑方(⚫)与白方(⚪)的剩余时间,默认每方 30 分钟(可修改源码中的 INIT_TIME 常量)。当前行棋方的计时器会有高亮边框。
  • 统计栏:下方显示黑方提子数、白方提子数以及当前落子手数。
  • 按钮组:右侧竖向排列八个功能按钮,涵盖对局控制、棋谱管理、界面个性化等。

二、核心对局功能 1. 落子规则

  • 点击棋盘交叉点即可落子,程序自动检测该位置是否为空。
  • 提子:落子后自动移除被包围且无气的敌方棋子,并累加提子计数。
  • 禁着点检测:
    • 自杀禁止:落子后若己方棋子无气则判为非法。
    • 劫争检测:禁止立即重复上一回合的全局局面(即"劫")。
  • 落子合法后,切换玩家并启动对应方计时器。

2. 虚一手(Pass) 点击"虚一手"按钮表示当前玩家放弃落子,轮由对方行棋。虚手也会记录在历史中,便于连续虚手后的协商终局。3. 悔棋 点击"悔棋"可逐步回退至上一手棋前的状态(包括提子数、手数、计时器均回退)。程序内部维护完整的历史栈,确保悔棋逻辑准确。4. 认输 点击"认输"立即结束对局,弹出胜负提示,计时停止,棋盘锁定。5. 新局 重置所有状态:棋盘清空、计时重置为 30 分钟、提子与手数归零、历史清空,并由黑方先手开始计时。

三、计时规则

  • 采用倒计时制,每方独立计时,当前行棋方计时递减。
  • 计时器每秒更新一次,时间耗尽时自动判负(超时方输)。
  • 切换玩家时计时器自动切换,游戏结束后计时停止。

四、棋谱管理
1. 导出棋谱 点击"导出棋谱"可将当前对局的落子序列保存为 JSON 文件。文件格式如下:

json复制下载{ "format": "qingstone-go", "boardSize": 19, "moves": { "color": "B", "row": 3, "col": 16 }, { "color": "W", "pass": true }, ... }每步棋记录颜色(B/W)、坐标(row, col)或虚手(pass: true)。文件名自动包含时间戳。
2. 导入棋谱 点击"导入棋谱"选择本地 JSON 文件,程序会按顺序自动落子,并实时校验每一步的合法性(如颜色顺序、禁着点等)。若棋谱非法,会提示错误并重置棋盘。


五、个性化设置
1. 棋盘颜色 点击"棋盘颜色"按钮,通过颜色选择器修改棋盘底色。线条与星标的颜色会根据底色自动加深(保持视觉对比度),实现一键换肤。
2. 背景颜色 点击"背景颜色"按钮可修改页面背景的径向渐变主色,程序自动生成对应的深色渐变,营造不同的对局氛围。


六、技术特色

  • 纯前端实现:HTML + CSS + JavaScript,无任何外部依赖,可离线运行。

  • 精确的围棋规则:实现了连通块气数计算、提子、劫争、自杀检测等核心算法。

  • 历史与动作双记录:既支持悔棋所需的完整状态快照(history),也保留了轻量的动作序列(moveHistory)用于导入导出。

  • 视觉细节:棋子使用径向渐变模拟立体感,棋盘线条粗细适中,点击时有轻微反馈(亮度变化)。

  • 响应式布局:棋盘尺寸基于 Canvas 固定 900×900 像素,但通过 CSS 限制最大宽度,在不同屏幕下均可正常显示。

    围棋 · 清石
    ⚫ 30:00
    ⚪ 30:00
    ⚫ 0
    ⚪ 0
    👆0
    复制代码
          <div class="button-group-vertical">
              <button class="go-button" id="passBtn">虚一手</button>
              <button class="go-button" id="undoBtn">悔棋</button>
              <button class="go-button" id="resetBtn">新局</button>
              <button class="go-button" id="resignBtn">认输</button>
              <button class="go-button" id="exportBtn">导出棋谱</button>
              <button class="go-button" id="importBtn">导入棋谱</button>
              <!-- 新增两个自定义颜色按钮 -->
              <button class="go-button" id="boardColorBtn">棋盘颜色</button>
              <button class="go-button" id="bgColorBtn">背景颜色</button>
          </div>
      </div>
相关推荐
鬼手点金2 小时前
nanoGPT/nanochat 能做出 DeepSeek/Qwen 这样的大模型吗?
服务器·前端·javascript·bug·openclaw
软件技术NINI3 小时前
美妆商城html+Css+js 4页
javascript·css·html
蛋蛋的就会顺顺的3 小时前
hot100 p0——栈,贪心算法,动态规划
java·前端·javascript·算法·leetcode·力扣
程序员Sunday3 小时前
TypeScript 的 any、unknown、never 有什么区别?
前端·面试·typescript
朱涛的自习室3 小时前
70 美金的 Beyond Compare,我让 Gemini 4 和 DeepSeek 造个开源免费版(Day 2)
android·前端·人工智能
码艺-Alimjan4 小时前
Tauri 源码备份 · 打包 & 解压 总结,源码收集之路
前端·javascript·vue.js
小马不起床4 小时前
零基础玩转 FastAPI_11:前端后台管理页面
前端·状态模式·fastapi
子非鱼a5 小时前
【文件上传】一个普普通通的edu16
前端
美狐美颜SDK开放平台5 小时前
直播APP如何实现美白滤镜功能?视频美颜SDK技术开发方案详解
前端·数据库·人工智能·音视频·美颜sdk·直播美颜sdk·视频美颜sdk
pride.li6 小时前
第03章 Python 教程-基础语法:注释与变量
服务器·前端·后端·python·算法·计算机视觉