news 2026/10/26 18:41:58

HTML+JS实现五子棋：从DOM操作到游戏逻辑

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
HTML+JS实现五子棋：从DOM操作到游戏逻辑

1. HTML五子棋实现思路解析

五子棋作为经典策略游戏，用纯前端技术实现不仅能锻炼编程能力，还能深入理解DOM操作与游戏逻辑的结合。我选择HTML+CSS+JavaScript这个黄金组合来实现，原因有三：零依赖、跨平台、易分享。下面从棋盘绘制到胜负判断，完整拆解实现过程。

1.1 基础HTML结构设计

首先构建最简HTML骨架，注意添加响应式meta标签确保移动端适配：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>纯HTML五子棋</title> <style> /* CSS样式将在这里编写 */ </style> </head> <body> <div id="chessboard"></div> <script> // JavaScript代码将在这里编写 </script> </body> </html>

关键点：viewport设置确保移动设备上棋盘不会缩放异常，所有代码内联便于单文件分享

1.2 棋盘生成方案对比

实现棋盘主要有三种方案：

  1. Canvas绘制：性能最佳但交互复杂
  2. SVG矢量图：缩放无损但代码量大
  3. DOM+CSS：最简单直观，适合初学者

我选择方案3，用嵌套div实现15×15网格：

#chessboard { display: grid; grid-template-columns: repeat(15, 30px); grid-template-rows: repeat(15, 30px); background-color: #DCB35C; border: 2px solid #000; } .cell { border: 1px solid #000; position: relative; cursor: pointer; }

2. 核心游戏逻辑实现

2.1 落子与状态管理

用二维数组存储棋盘状态，0表示空，1表示黑子，2表示白子：

const board = Array(15).fill().map(() => Array(15).fill(0)); let currentPlayer = 1; // 黑棋先行 function handleClick(e) { const cell = e.target; const row = parseInt(cell.dataset.row); const col = parseInt(cell.dataset.col); if (board[row][col] !== 0) return; board[row][col] = currentPlayer; renderPiece(row, col); if (checkWin(row, col)) { alert(`${currentPlayer === 1 ? '黑棋' : '白棋'}获胜！`); resetGame(); return; } currentPlayer = 3 - currentPlayer; // 切换玩家 }

2.2 胜负判定算法

五子棋核心算法是四方向检测，优化后的检查逻辑：

function checkWin(row, col) { const directions = [ [1, 0], // 水平 [0, 1], // 垂直 [1, 1], // 主对角线 [1, -1] // 副对角线 ]; return directions.some(([dx, dy]) => { let count = 1; // 正向检测 for (let i = 1; i <= 4; i++) { const r = row + i * dx; const c = col + i * dy; if (r < 0 || r >= 15 || c < 0 || c >= 15 || board[r][c] !== currentPlayer) break; count++; } // 反向检测 for (let i = 1; i <= 4; i++) { const r = row - i * dx; const c = col - i * dy; if (r < 0 || r >= 15 || c < 0 || c >= 15 || board[r][c] !== currentPlayer) break; count++; } return count >= 5; }); }

3. 进阶功能实现

3.1 棋子视觉效果优化

用CSS伪元素实现立体棋子效果：

.piece { position: absolute; width: 24px; height: 24px; border-radius: 50%; top: 3px; left: 3px; box-shadow: 1px 1px 2px rgba(0,0,0,0.5); } .piece.black::after { content: ''; position: absolute; width: 18px; height: 18px; background: radial-gradient(circle at 30% 30%, #666, #000); border-radius: 50%; top: 3px; left: 3px; } .piece.white::after { content: ''; position: absolute; width: 18px; height: 18px; background: radial-gradient(circle at 30% 30%, #fff, #ccc); border-radius: 50%; top: 3px; left: 3px; }

3.2 游戏状态持久化

使用localStorage实现断点续玩：

function saveGame() { localStorage.setItem('gomoku', JSON.stringify({ board, currentPlayer })); } function loadGame() { const saved = localStorage.getItem('gomoku'); if (saved) { const { board: savedBoard, currentPlayer: savedPlayer } = JSON.parse(saved); board.splice(0, 15, ...savedBoard); currentPlayer = savedPlayer; renderBoard(); } } // 初始化时调用loadGame()

4. 性能优化与调试技巧

4.1 事件委托优化

棋盘使用单个事件监听器替代225个独立监听：

document.getElementById('chessboard').addEventListener('click', (e) => { if (e.target.classList.contains('cell')) { handleClick(e); } });

4.2 常见问题排查

  1. 棋子显示异常：

    • 检查z-index确保棋子位于网格上方
    • 确认CSS中定位属性(position)设置正确

  2. 胜负判断失效：

    • 调试时打印棋盘状态数组
    • 边界检查要包含等号（<=14而非<15）

  3. 移动端点击延迟：

    • 添加touchstart事件监听
    • 引入fastclick库消除300ms延迟
// 解决移动端点击延迟 document.addEventListener('DOMContentLoaded', () => { FastClick.attach(document.body); }, false);

5. 项目扩展方向

5.1 AI对战实现

基于极小化极大算法实现简单AI：

function aiMove() { let bestScore = -Infinity; let move = { row: 0, col: 0 }; // 简单评估函数 for (let i = 0; i < 15; i++) { for (let j = 0; j < 15; j++) { if (board[i][j] === 0) { let score = evaluatePosition(i, j); if (score > bestScore) { bestScore = score; move = { row: i, col: j }; } } } } board[move.row][move.col] = currentPlayer; renderPiece(move.row, move.col); if (checkWin(move.row, move.col)) { alert('AI获胜！'); resetGame(); return; } currentPlayer = 3 - currentPlayer; }

5.2 多平台适配方案

  1. Electron打包：

    npm init electron-app@latest gomoku --template=webpack

  2. PWA离线支持：

    • 添加manifest.json
    • 注册Service Worker缓存资源

  3. 微信小程序移植：

    • 将核心逻辑移植到小游戏API
    • 使用Canvas重写渲染部分

实际开发中发现，用requestAnimationFrame优化渲染性能后，在低端手机上也能达到60fps流畅运行。对于更复杂的特效，可以引入WebGL渲染，但会大幅增加代码复杂度。

版权声明: 本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！
网站建设 2026/10/26 18:41:11

LabVIEW调用海康HCNetSDK DLL：结构体对齐、预览抓图与状态机避坑

简介&#xff1a;HCNetSDK V5.3.6.30 的 Windows 库文件集合&#xff0c;面向希望在 LabVIEW 图形化编程环境中直接调用 DLL、控制海康威视摄像头与硬盘录像机的开发者&#xff0c;用于解决设备连接、实时预览、抓拍、录像回放、云台与报警处理等接口的本地集成问题。压缩包共 …

作者头像 李华
网站建设 2026/10/26 18:41:11

Arco Design Vue表格行hover高亮效果实现与优化

1. 为什么需要表格行hover高亮效果在Web应用开发中&#xff0c;表格是最常用的数据展示组件之一。当表格数据量较大时&#xff0c;用户浏览过程中容易发生"看串行"的情况。根据人机交互研究&#xff0c;当鼠标悬停在表格行上时&#xff0c;如果该行背景色发生变化&am…

作者头像 李华
网站建设 2026/10/26 18:41:08

Linux系统引导与服务控制完全指南

1. 引导过程与服务控制基础概念在计算机系统启动和运行过程中&#xff0c;引导过程和服务控制是两个至关重要的环节。引导过程&#xff08;Boot Process&#xff09;是指从按下电源键到操作系统完全加载的整个过程&#xff0c;而服务控制&#xff08;Service Control&#xff0…

作者头像 李华
网站建设 2026/10/26 18:38:20

OpenCV 4.5.5 C++工业级稳定部署指南

简介&#xff1a;本资源为OpenCV 4.5.5官方版本预编译完成的C动态链接库集合&#xff0c;面向计算机视觉初学者、算法工程师及嵌入式开发人员&#xff0c;显著降低环境搭建门槛&#xff0c;避免耗时易错的源码编译过程。压缩包共619个文件&#xff0c;主体为485个hpp头文件与56…

作者头像 李华
网站建设 2026/10/26 18:38:14

STM32H743+TouchGFX工业级HMI实战：双核协同与DMA2D零拷贝显示

简介&#xff1a;本资源是面向嵌入式开发工程师与STM32进阶学习者的TouchGFX图形界面实战工程&#xff0c;基于正点原子STM32H743IIT6核心板&#xff0c;完整实现4.3英寸800480 LCD显示与触摸交互功能&#xff0c;解决高端Cortex-M7平台GUI开发中驱动移植、HAL配置与TouchGFX集…

作者头像 李华
网站建设 2026/10/26 18:37:22

电商佣金结算系统的领域驱动设计与实践

1. 佣金结算系统的领域驱动设计实战在电商导购返利这个细分领域&#xff0c;佣金结算系统就像一台精密的金融引擎&#xff0c;每天要处理成千上万的订单分账。三年前我们团队接手某头部导购平台的结算系统重构时&#xff0c;面对的是这样一个典型场景&#xff1a;用户通过APP下…

作者头像 李华