1. 网页拼图小游戏(2024.06-2024.08)
独立开发了一款拖拽式拼图小游戏,支持 3×3 和 4×4 两种难度,采用原生 JavaScript + HTML5 Canvas 与 CSS Grid 混合实现。游戏核心逻辑包括图片切割、随机打乱、可解性校验(通过逆序数奇偶性保证拼图必然可解)、拖拽/点击交换以及步数计时统计。为了实现流畅的拖拽交互,监听了 touch 和 mouse 事件,通过计算元素位置与鼠标偏移完成交换动画。在移动端适配了触屏操作,并利用 localStorage 保存最高纪录。同时加入“提示”功能:高亮应交换的两块区域,帮助用户降低挫败感。项目难点在于处理打乱后无解的情况,通过编写基于逆序数的校验函数,在初始化时自动调整相邻块,确保每次开局必定有解。经过多轮测试,游戏在 Chrome 与微信内置浏览器中均响应稳定。最终代码约 1200 行,并通过 GitHub Pages 部署供演示。该项目锻炼了事件处理、状态管理与算法校验能力。
2. 按要求生成古诗词网页(2024.09-2024.10)
独立开发了一个可交互的古诗词创作网页。用户可选择五言绝句、七言律诗或词牌(如梦令、浣溪沙),然后指定主题(如“山水”“送别”“咏梅”)或关键词,点击生成即可获得一首格律基本工整、意境相符的诗词。前端采用 Vue 3 + Vite 搭建,界面采用仿古卷轴风格,通过 CSS 动画实现淡入展开效果。核心生成逻辑未依赖大模型 API,而是在前端构建了小型知识库:包含常见意象词库(明月、秋风、孤舟等)、平仄模板、押韵表(基于中华新韵)。生成流程为:先匹配主题关键词,抽取对应意象词,再依据格律模板填充,并利用随机权重与重复词过滤保证多样性。对于律诗,还加入了简单的中二联对仗检测,输出结果时用高亮标注押韵字。项目难点在于控制随机性与可读性的平衡,通过设计多套句式模板和约束规则,最终使生成诗词的通顺率超过 75%,并在最终展示中获得良好评价。该作品展示了扎实的 JavaScript 逻辑、中文文本处理能力以及前端工程化实践。