PuzzleCat

创作指南

谜题创作规范与最佳实践;登录即可投稿,公开前需经平台审核

谜题内容格式

谜题内容支持 HTML 格式,你可以使用丰富的多媒体元素来创作引人入胜的谜题。以下是支持的格式及其展示效果:

基础文本标签

用于排版和组织文字内容

<h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3>

一级标题

二级标题

三级标题

<p>这是一个段落</p><strong>加粗文字</strong><em>斜体文字</em><u>下划线文字</u><s>删除线文字</s>

这是一个段落

加粗文字 · 斜体文字 · 下划线文字 · 删除线文字

<blockquote>引用文本</blockquote>
引用文本,常用于强调或引述
<ul><li>无序列表项1</li> <li>无序列表项2</li></ul><ol><li>有序列表项1</li> <li>有序列表项2</li></ol>
  • 无序列表项1
  • 无序列表项2
  1. 有序列表项1
  2. 有序列表项2

图片嵌入

使用 img 标签嵌入图片,支持 GIF/PNG/JPG/SVG/WebP 等格式

<img src="图片URL" alt="描述" /><!-- 建议添加最大宽度 --><img src="..." style="max-width: 100%;" />
示例图片

示例:400×200 的随机图片

建议:
  • 使用 max-width: 100% 确保图片在移动端自适应
  • 单张图片建议不超过 2MB,可使用图床服务
  • 添加 alt 属性,提升无障碍访问体验

视频嵌入

支持直接视频链接和平台嵌入两种方式

方式一:直接视频链接

<video src="视频URL" controls width="100%"> 您的浏览器不支持视频播放</video>

方式二:B站视频嵌入

<iframe src="//player.bilibili.com/player.html?bvid=BV号" width="100%" height="500" allowfullscreen></iframe>
获取嵌入代码:

B站视频页面 → 分享 → 嵌入代码 → 复制 iframe

表格数据

使用 table 展示结构化数据,适合谜题中的数据表、密码表等

<table> <thead><tr><th>列1</th><th>列2</th></tr></thead> <tbody> <tr><td>数据1</td><td>数据2</td></tr> </tbody></table>
符号含义章节
Δ变化第三章
Ω终结最终章
Σ总和附录

链接与跳转

添加可点击的链接,引导玩家访问外部资源

<a href="https://example.com">普通链接</a><a href="..." target="_blank">新窗口打开</a><a href="#section">页内锚点跳转</a>

代码展示

展示代码片段,适合编程类谜题

<pre><code>多行代码块</code></pre><code>行内代码</code>
function decode(secret) {
  return secret.split('').reverse().join('');
}

行内代码示例:console.log('Hello');

内联样式

使用 style 属性美化内容外观

<span style="color: #00ffff;">彩色文字</span><span style="background: #1a1a2e; padding: 10px;">背景块</span><span style="border: 1px solid #0ff; padding: 5px;">边框</span><span style="font-size: 24px;">大号文字</span>

彩色文字 · 背景块 · 边框 · 大号

链接主题颜色

题面展示时,平台会在外层容器注入当前主题配色。用 CSS 变量代替写死的色值,Hunt 换肤或站点切换主题后,HTML 装饰会自动跟上。

适用场景

  • Hunt 题目:优先使用 --hunt-* 变量(来自 Hunt 视觉主题设置)
  • 独立谜题:使用 --primary-color、--text-primary 等站点主题变量

写法

在 HTML 模式中加入 <style> 块,用 class 引用变量。内联 style 属性目前只支持固定色值(如 #00ffff),不能直接写 var(...)。

<style> .puzzle-accent { color: var(--hunt-primary, var(--primary-color)); } .puzzle-card { background: var(--hunt-surface, var(--bg-card)); border: 1px solid var(--hunt-border, var(--border-color)); padding: 12px; border-radius: 8px; }</style><p class="puzzle-accent">强调文字</p><div class="puzzle-card">卡片块</div>

强调文字

卡片块

常用变量

CSS 变量独立谜题兜底用途
--hunt-primary--primary-color主色、强调、链接
--hunt-accent--secondary-color辅助色、渐变点缀
--hunt-text--text-primary正文颜色
--hunt-muted--text-secondary次要说明文字
--hunt-surface--bg-card卡片 / 块背景
--hunt-border--border-color边框 / 分隔线
建议:
  • 写 var(--hunt-primary, var(--primary-color)) 这种带兜底的写法,同一份 HTML 在 Hunt 与独立谜题页都能用
  • 编辑器预览与玩家端共用同一套变量,可在 Hunt 里改主题色后立即预览效果
  • 固定色值适合刻意隐藏信息(如与背景同色);需要随主题变化时用 CSS 变量

交互题(高级模式)

除 HTML 题面外,可在高级模式将正文载体切换为交互题(iframe)。交互题包需先上传至创作者资源库,再在编辑器中引用。

  1. 打开「创作者中心 → 资源库」,点击「上传文件」上传 ZIP 或单页 HTML(交互包最大 15MB,图片最大 10MB)。
  2. 在谜题编辑器切换到高级模式,将正文载体设为「交互题(iframe)」。
  3. 点击「从资源库选择交互题包」,选中已上传的包;题面将写入 asset:资源ID。也可直接填写 HTTPS URL。
  4. 使用编辑器「预览」或在资源库点击文件卡片,在沙盒 iframe 中试玩交互题。
注意:
  • 剧情题不支持交互题载体。
  • 交互包勿内置答案或未购提示正文;可使用 /hunt-sandbox-sdk.js 与父页面通信。
  • ZIP 包根目录应包含 index.html,以便平台正确加载。

安全限制

  • 不支持 <script> 标签(防止 XSS 攻击)
  • 不支持 onclickonload 等事件属性
  • 不支持 <iframe> 嵌入非白名单域名(仅允许视频平台)
  • 图片/视频建议使用 HTTPS 链接

答案设置规范

1

最终答案

每个谜题必须有且只有一个正确答案,这是玩家最终需要找到的目标。

42 李白的静夜思
2

中间答案

可以设置中间答案作为阶段性验证,引导玩家继续探索。

阶段1: 密码是123提示:正确!请继续...
最终答案提示:恭喜过关!
3

答案格式

  • 答案长度限制:最大 500 字符
  • 答案验证:不区分大小写,首尾空格会被忽略
  • 建议使用简洁明确的答案,避免歧义
4

提示信息

每个答案可以设置提示信息,当玩家提交错误时显示。

再仔细看看图片的右下角...好的提示,引导性强
答案错误过于简单,没有引导性
答案设计技巧
  • 避免过于简单的答案,如「是」、「不是」、「不知道」
  • 在谜题中说明答案格式,如「答案为纯数字」、「答案为四个字」
  • 发布前多次测试答案的正确性

创作最佳实践

🎯 明确的主题

好的谜题应该有清晰的主题和目标,让玩家知道他们在寻找什么。

「在这幅画中找到隐藏的数字,它就是答案。」
「答案在某个地方。」

📖 风味文本

使用风味文本为谜题增添故事背景和氛围,让玩家更有代入感。在谜题编辑器中,风味文案位于作者行与题面正文之间(约三行,可自动增高);Hunt 赛事表格内仍可在行内快速编辑。

「古老的图书馆深处,一本泛黄的古籍静静躺在架子上...」

🚫 避免常见错误

  • 歧义:答案应该唯一确定,不要有多种合理解释
  • 外部依赖:谜题应能独立完成,不依赖特定时间地点
  • 技术门槛:除非明确说明,否则不应需要编程技能
  • 过时内容:链接、图片等资源应长期有效

独立题 · 答案规范化

在编辑器「题目设置」中可配置五项比对规则(大小写、空格、标点、简繁、全半角),与 Puzzlehunt「答案与判题」中的比对规则一致。独立题不支持 Answer Gate 或题目解锁;答对/答错提示在「判题文案」,答错冷却在「答错冷却」(无限制或固定分钟,无 Hunt 级递增策略)。

📋 发布前检查清单

创作指南 - PuzzleCat