绕口令与谜语查询：做一个 H5 绕口令/谜语小游戏（全栈思路）
# 绕口令与谜语查询：做一个 H5 绕口令/谜语小游戏（全栈思路）
**接口**：绕口令与谜语查询（apiCode=1623）· 接入点 1623-1 / 1623-2｜**是否免费**：免费（含使用档次限制）｜**返回格式**：JSON｜**适用人群**：前端、独立开发者、运营｜**阅读时间**：约 8 分钟
## 核心要点
- 全栈链路：后端取数（带缓存）→ 静态/接口给前端 → 前端随机出题、计时、计分 → 可分享 H5。
- 绕口令做「跟读打卡」，谜语做「猜一猜」，两套玩法共用一个取数逻辑。
- 免费接口务必「后端取数 + 缓存」，不要在前端裸调暴露 AppKey、也避免档位被打满。
## Why：把免费语料变成可传播的小游戏
绕口令和谜语天然适合互动。一个轻量 H5 页面，既能做亲子/班级打卡，也能做社群裂变小活动。重点是**取数走后端、玩法在前端**，接口额度与密钥都安全。
## What：架构速览
```
[ShowAPI 1623] ──后端定时/按需取数(带缓存)──> [你自己的接口/静态JSON]
│ │
└──────────── 不直接暴露 AppKey ───────────┘
▼
[H5 前端] 随机出题 / 计时 / 计分 / 分享
```
## How：后端取数（Node.js + 简单缓存）
```javascript
// server.mjs —— 仅供示意，取数后缓存，前端只调你自己的接口
const APP_KEY = process.env.APP_KEY; // 切勿写死在前端
const cache = new Map();
async function getRiddle(point, keyword = "", page = 1) {
const key = `${point}:${keyword}:${page}`;
if (cache.has(key)) return cache.get(key);
const url = `https://route.showapi.com/${point}?appKey=${APP_KEY}`;
const param = point === "1623-1" ? "title" : "question";
const body = new URLSearchParams({ [param]: keyword, page: String(page) });
const resp = await fetch(url, {
method: "POST",
headers: { "content-type": "application/x-www-form-urlencoded" },
body,
signal: AbortSignal.timeout(point === "1623-1" ? 5000 : 15000),
});
const resBody = (await resp.json()).showapi_res_body;
cache.set(key, resBody.contentlist);
return resBody.contentlist;
}
// 前端调用：GET /api/twister?kw=扁担 → getRiddle("1623-1", kw)
```
## 前端最小可玩片段（谜语「猜一猜」）
```html
<!-- 仅示意：先显示谜面，用户作答后揭示谜底 -->
<div id="q"></div><div id="a" hidden></div>
<button onclick="reveal()">揭晓谜底</button>
<script>
let current = null;
async function next() {
const list = await (await fetch("/api/riddle")).json();
current = list[Math.floor(Math.random() * list.length)];
document.getElementById("q").textContent = "谜面：" + current.question;
const a = document.getElementById("a");
a.hidden = true; a.textContent = "谜底：" + current.answer;
}
function reveal() { document.getElementById("a").hidden = false; }
next();
</script>
```
## 返回示例与解析
取数返回结构见[返回字段全解](https://www.showapi.com/guides/tongue-riddle-response-fields-1623)；游戏只需消费 `contentlist`（`title`+`content` 或 `question`+`answer`）。
## 进阶 / 边界
- **玩法扩展**：绕口令加「录音对比 / 计时跟读」；谜语加「倒计时抢答 / 积分榜」。
- **分享**：把当前题目编码进 URL（`?q=...`），用户分享后打开即同题。
- **额度安全**：前端只调你自己的接口，AppKey 留在后端；配合[本地缓存策略](https://www.showapi.com/guides/tongue-riddle-cache-tier-1623) 与[前端限流](https://www.showapi.com/guides/tongue-riddle-frontend-throttle-1623)。
- 课堂大屏多人用见[语文启蒙与口才训练场景](https://www.showapi.com/guides/tongue-riddle-edu-scenario-1623)。
## FAQ
**Q1：AppKey 能放前端吗？**
A：不建议。前端代码可被查看，AppKey 泄露会被他人盗用额度；正确做法是后端取数、前端调你自己的接口。
**Q2：谜语能「判断对错」吗？**
A：可以，把用户输入与 `answer` 做包含/模糊匹配；但谜底表述可能多样，建议允许多答案或人工复核。
**Q3：免费档位够小游戏用吗？**
A：取决于访问量。后端缓存 + 限流可大幅降耗；具体额度以[官方档位说明](https://www.showapi.com/free-api)为准。
**Q4：能做成微信小程序吗？**
A：可以，小程序同样走「后端取数 + 缓存」，前端用 `wx.request` 调你自己的接口。
**Q5：内容更新频率？**
A：文档标注「数据持续更新中」，缓存 TTL 不宜过长，见[缓存策略](https://www.showapi.com/guides/tongue-riddle-cache-tier-1623)。
## 下一步阅读
- [绕口令与谜语查询：绕口令关键词检索实战](https://www.showapi.com/guides/tongue-riddle-twister-query-1623)
- [绕口令与谜语查询：谜语关键词检索实战](https://www.showapi.com/guides/tongue-riddle-riddle-query-1623)
- [绕口令与谜语查询：前端限流与防滥用实践](https://www.showapi.com/guides/tongue-riddle-frontend-throttle-1623)
- **本系列共 12 篇**：查看[绕口令与谜语查询指南总目录](https://www.showapi.com/guides/tongue-riddle-guides-1623)
