错别字扫雷：在句子里点出错字，连击加分还能顺便记住正确写法

写文章最尴尬的是交出去一堆“别字”。这个单文件网页把“找错别字”做成一场限时挑战：显示一个句子，点对错字 +10 分、点错正常字 -5 分，连续找对还有连击奖励；每找一个错字还会弹出“为什么是它错”的正确写法与释义。先看成品，再讲这次怎么用华为云 CodeArts 码道 WebUI 一段话把它做出来、部署并公开分享。

这个工具做什么

它把常见的易错字做成可玩的“扫雷”游戏：

一键开局：进入首页点“开始挑战”，进入 90 秒倒计时游戏界面。
点字判分：在句子里点击你认为是错别字的字，找对 +10，点错 -5，连击越高单次加分越多。
即时释义：点对后立刻显示“你点的是哪个字 → 正确字是什么”，并解释两个字的区别，例如“孤僻”不是“孤辟”。
扫雷陷阱题：题库里混入“没有错别字”的句子，看仔细再点，点错会被扣分。
本地排行榜：分数记录在 localStorage，本地排行榜按分数排序，金银铜三块奖牌。
手机电脑都能用：响应式布局，适配触控与安全区距离。

码道开通（免费体验版）

开始之前，先免费开通码道体验版。不需要装任何软件，浏览器就能用：

https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

开通后有三种使用方式：WebUI（浏览器对话）、TUI（终端命令行）和桌面 IDE（IDE 插件）。本文用 WebUI 版演示。

进入 AI 开发者空间

浏览器打开 https://devstation.developer.huaweicloud.com/aidevspace?utm_source=opcsfsq&utm_medium=wbwz
弹窗「请选择要进入的版本」→ 点击 体验版
首次使用会跳到华为云登录页，扫码登录一次，后续浏览器会话复用
弹窗「临时凭据自动配置」→ 点击同意，沙箱自动创建

进入 AI 开发者空间主界面后，先等左侧菜单加载出来，再找到 CodeArts，点击它右侧的浏览器图标，打开码道 WebUI 对话窗口：

打开后码道 WebUI 的底部输入框提示「尽管吩咐，我来帮你搞定」：

小贴士：体验版沙箱 3 小时后自动重置，生成完记得把 index.html 下载保存。

任务描述

在码道 WebUI 输入框粘贴以下需求，回车发送（模型默认 glm-5.2，可直接用）：

开发一个「错别字扫雷」单文件网页应用：给出一段常见易错字句子，让用户在句子中快速找出并点击错别字，点击正确加分、点错扣分，带计时、排行榜（本地保存）和易错字释义提示，界面清爽好玩，手机和电脑都能用，所有代码写在一个 index.html 里。完成后用部署功能部署成可访问的网页应用，生成一个公网可访问的分享链接，并告诉我访问地址。

这轮码道具体做了什么

不是把通用 AI 能力复述一遍，而是它在这篇项目里的实际动作：

在沙箱里先确认 /workspace 可用，再创建 /workspace/typo-sweeper，把单文件 index.html 写进去。
内置了 28 道常见易错字题目，并用“分段数据”描述每一句：哪个字写错、正确字是什么、两组字分别怎么用。
增加了“没有错别字”的陷阱句，点错时按扫雷逻辑提示并扣分，避免玩家无脑连点。
用 setInterval(tick, 1000) 实现 90 秒倒计时，再用连击 combo 叠加额外加分。
部署时写了一个 server.js 静态服务器监听 0.0.0.0:3003，随后拉起 DevBridge 隧道发布成 8 小时有效的公网 HTTPS 链接。

这次实际生成的临时公网地址（8 小时有效）：
https://ypszmxqb-3003.cn-north-4.bridge.myhuaweicloud.com/

这个地址是 DevBridge 生成的临时部署入口，适合演示和验收，不适合作为长期访问地址；到期后读者可以按后面的「直接下载试玩」把 index.html 下载到本地打开。

代码亮点

以下是 index.html 里值得关注的设计思路和实现细节。

1. 用“分段数据”描述易错字，点字和释义自然关联

题库不是简单存“题目 + 答案”，而是把每个句子拆成分段，错误字单独标出原型、正确字和辨析说明。解析时按字生成可点击的 span，命中后直接取出这段数据展示释义：

{segs:[{t:"他性格孤",n:1},{t:"辟",w:"僻",h:"「孤僻」形容性格孤怪、不合群。僻(pì)：偏僻、孤僻；辟(pì/bì)：开辟、复辟。"},{t:"，平时不善于和人交往。",n:1}]}

2. 连击奖励让“点错字”也有节奏

onChar() 先看点击的字是否已判定，再看它是否真正写错。写错则连击 +1，按连击数叠加加分并展示释义；点的是正常字则连击清零并扣 5 分，还带震动抖动效果：

if(d.isTypo){
  state.combo++; state.maxCombo=Math.max(state.maxCombo,state.combo);
  const bonus=Math.min(state.combo-1,5)*2;
  const gain=10+bonus; state.score+=gain;
  span.classList.add("found");
  floatAt(rect,"+"+gain,"var(--good)");
  const h=$("hint"); h.className="hint";
  h.innerHTML='<span class="tag">找对</span>「'+d.correct+'」← 你点的「'+span.textContent+'」。<br>'+d.hint;
  state.found++;
  if(state.found>=state.total){ setTimeout(nextQ,900); }
} else {
  state.combo=0; state.score=Math.max(0,state.score-5);
  span.classList.add("miss","shake"); setTimeout(()=>span.classList.remove("shake"),350);
  floatAt(rect,"-5","var(--bad)");
  const h=$("hint"); h.className="hint bad";
  if(d.trap){
    h.innerHTML='<span class="tag">注意</span>这题其实没有错别字，点对了反而扣分，小心"扫雷"陷阱！';
  } else {
    h.innerHTML='<span class="tag">点错</span>「'+span.textContent+'」是正常的字。再仔细看看？';
  }
}

3. 本地排行榜保存成绩

结束后可以输入昵称提交上榜，成绩统一按 typoRank 存在 localStorage，读取时按分数降序排列，前三名显示金银铜奖牌：

function saveScore(){
  let name=$("nameInput").value.trim()||"匿名选手";
  let list=JSON.parse(localStorage.getItem("typoRank")||"[]");
  list.push({name, score:state.score, date:Date.now()});
  list.sort((a,b)=>b.score-a.score);
  list=list.slice(0,10);
  localStorage.setItem("typoRank",JSON.stringify(list));
  $("saveBox").classList.add("hidden");
  $("savedTip").classList.remove("hidden");

直接下载试玩

本次生成的项目就是单文件 index.html，没有第三方依赖，把文件保存到本地后双击用浏览器打开即可运行。后续进入发布流程时，会把源码同步到公开 Demo Park 仓库，方便直接复制：

Demo Park 仓库：https://atomgit.com/deli007/demo_park
本案例目录：https://atomgit.com/deli007/demo_park/tree/main/codearts-typing-ninja

总结

错别字扫雷把“易错字辨析”从死记硬背变成一种有即时反馈的玩法：点错的字、正确的字和辨析说明一次看完，再配合连击与排行榜制造一点点挑战欲。技术上主要练习了题数据建模、点击命中判定、倒计时状态管理、localStorage 持久化和响应式布局几处，后续还可以增加自定义题库、每日一题或词性 / 成语接龙等玩法。

如果还没用过码道，可以免费开通体验版：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwsf&sourcead=dmzntgwwbwz

posted @ 2026-09-03 11:58 新科技观察员阅读(23) 评论(0) 收藏举报

刷新页面返回顶部