歇后语查询实战：做一个"看前半猜后半"的填空小游戏
# 歇后语查询实战：做一个"看前半猜后半"的填空小游戏
- **接口/接入点**：歇后语查询 · 1635-1
- **是否免费**：是
- **请求方式**：POST / GET
- **返回格式**：JSON
- **适用人群**：前端开发者、产品经理、教育/娱乐从业者
- **阅读时间**：约 7 分钟
## 核心要点
- 接口返回 `question`（谜面）+ `answer`（谜底），天生适合"显示前半、隐藏后半、用户猜"的填空玩法。
- 前端随机取题、隐藏答案、即时校验、累计计分即可成型。
- 本地题库缓存避免连题重复，体验更顺。
## Why：为什么做填空小游戏
歇后语"前半设悬念、后半揭晓"，是天然的填空题。做成 H5 小游戏，可用于社群互动、课堂破冰、公众号涨粉。接口免费、返回结构干净，半天就能跑起来。
## What：接口速览
| 项 | 值 |
|----|----|
| 接口地址 | `https://route.showapi.com/1635-1?appKey={YOUR_APPKEY}` |
| 请求参数 | `num`（选填，随机返回几条） |
| 返回 | `contentlist`：`question`+`answer` |
| 计费 | 免费 |
## How：前端实现
### 步骤 1 — 后端取题（避免 AppKey 暴露）
```javascript
// 服务端（Node.js）中转
app.get("/api/xiehouyu", async (req, res) => {
const r = await fetch("https://route.showapi.com/1635-1?appKey=" + process.env.APPKEY, {
method: "POST",
headers: { "content-type": "application/x-www-form-urlencoded" },
body: new URLSearchParams({ num: "1" }),
});
const body = (await r.json()).showapi_res_body;
if (body.ret_code !== "0") return res.status(502).json({ error: body.remark });
res.json(body.contentlist[0]); // {question, answer}
});
```
### 步骤 2 — 前端隐藏答案 + 校验
```html
<div id="quiz">
<p id="q"></p>
<input id="ans" placeholder="猜后半句" />
<button onclick="check()">提交</button>
<p id="result"></p>
<p id="score">得分：0</p>
</div>
<script>
let answer = "", score = 0;
async function next(){
const d = await (await fetch("/api/xiehouyu")).json();
document.getElementById("q").textContent = d.question;
answer = d.answer;
document.getElementById("ans").value = "";
document.getElementById("result").textContent = "";
}
function check(){
const v = document.getElementById("ans").value.trim();
if (v === answer){ score++; document.getElementById("result").textContent = "答对啦！"; }
else document.getElementById("result").textContent = "正确答案：" + answer;
document.getElementById("score").textContent = "得分：" + score;
setTimeout(next, 1200);
}
next();
</script>
```
## 返回示例与解析
```json
{ "showapi_res_body": {
"ret_code": "0",
"contentlist": [ { "question": "刘备摔阿斗", "answer": "收买人心" } ]
}}
```
## 进阶 / 边界
- **AppKey 安全**：务必后端中转，AppKey 不要进前端代码。
- **去重**：底层语料有限（`allNum` 示例 19），本地缓存已出题目避免连题重复（见缓存去重篇）。
- **难度**：可加"提示字数""限时"等规则提升趣味性。
## FAQ
**Q：能在前端直接调接口吗？**
A：不建议，AppKey 会泄露；走自己的后端中转再返回 `question`/`answer` 即可。
**Q：怎么避免连着出同一题？**
A：本地维护已出集合，去重抽取（见缓存去重篇）。
**Q：能做多人排行榜吗？**
A：可以，把 score 上报后端存库即可；接口本身只负责出题。
**Q：语料会不够用吗？**
A：`allNum` 示例为 19，体量有限；长期运营建议本地累积题库拉长循环。
## 相关能力 / 下一步阅读
- [免费接口也要稳：歇后语查询本地缓存与去重策略](https://www.showapi.com/guides/xiehouyu-cache-dedup-1635)
- [歇后语查询实战：用 num 参数做"每日一语"小程序全链路设计](https://www.showapi.com/guides/xiehouyu-daily-1635)
- **本系列共 13 篇**：查看[歇后语查询指南总目录](https://www.showapi.com/guides/xiehouyu-guides-1635)
