HTML怎么做填字游戏_html填字crossword游戏实现【汇总】-html教程-PHP中文网

用布局填字游戏最稳，因其天然支持行列对齐、跨格与单元格独立样式；需设 border-collapse: collapse、黑格固定尺寸、编号绝对定位、contenteditable 替代 input，并基于坐标结构管理线索与校验。

html怎么做填字游戏_html填字crossword游戏实现【汇总】

用

<table> 布局格子最稳，别碰 CSS Grid 做交点对齐
<p>填字游戏核心是「字母格 + 黑格 + 编号 + 交叉约束」，<code><table> 天然支持行列对齐、跨格（<code>rowspan

/colspan）、单元格独立样式，比纯 CSS Grid 或 Flex 容易控制交点逻辑。很多教程强行用 Grid，结果编号位置飘、黑格宽高不一致、打印时错位——本质是没处理好单元格 box-sizing 和 border-collapse。

实操建议：

用 <table class="crossword"> 包裹，<code>border-collapse: collapse 必加，避免默认间距破坏网格对齐
每个格子用 <td>，黑格设 <code>background-color: #000 + width: 1.5em; height: 1.5em（固定尺寸，禁用百分比）
编号写在格子左上角：用 <div class="number">5</div> 绝对定位，父 <td> 设 <code>position: relative
不要给 <td> 设 <code>padding，改用 line-height 控制输入框垂直居中
contenteditable 比 <input> 更适合单格输入

填字游戏要支持方向切换（横/竖）、光标跳格、退格跨格、粘贴多字母——<input type="text"> 在单格里会卡死这些交互；contenteditable="true" 配合 <td> 可自然继承焦点流和原生编辑行为。 <p>常见错误现象：</p> <ul> <li>按方向键光标出格后无法自动进下一格（没监听 <code>keydown 的 ArrowRight 等事件）
粘贴字符串（如 "HELLO"）只塞进第一个格（没手动切分并分发到后续空格）
退格删空当前格后，焦点没回退到前一格（尤其横竖交叉处逻辑混乱）

关键处理点：

所有可编辑 <td> 统一加 <code>contenteditable="true" 和 spellcheck="false"
监听 keydown：捕获 Backspace/Delete 后，用 document.execCommand('deleteContentBackward') 或手动清空 + 移动焦点
粘贴时阻止默认行为，取 event.clipboardData.getData('text')，按当前方向逐字符填入后续格子（需提前算好有效格序列）

横/竖线索数据结构必须带「起始坐标 + 方向 + 长度」，别只存文字

渲染线索列表只是表象，真正影响交互的是：用户点击线索时，要高亮对应格子；输入时要校验是否在当前方向连续；交点格要同步更新横竖两个答案。如果线索数据只有 { id: 3, text: "一种编程语言" }，根本没法定位和联动。

正确结构示例：

Word Studio

专业Word文档生成器。适用于生成报告、论文、合同、简历等各类专业文档，支持docx/doc格式。

下载

{
  "across": [
    {
      "id": 1,
      "text": "前端框架（缩写）",
      "start": [0, 0],
      "direction": "across",
      "length": 3
    }
  ],
  "down": [
    {
      "id": 2,
      "text": "HTML 标签名",
      "start": [0, 0],
      "direction": "down",
      "length": 4
    }
  ]
}

使用场景：