前端益智游戏开发：构建响应式逻辑解谜交互界面
提示词描述：
适用于Web前端开发者、产品经理验证交互原型或教育类平台内容制作。目标在于快速部署轻量级互动模块，提升用户停留时长。建议结合PWA技术实现离线缓存，以优化弱网环境下的使用体验。
提示语关键词：
AI写前端代码,HTML5游戏开发,JavaScript逻辑游戏,响应式网页设计,Web交互原型,AI生成网页代码
提示词内容：
你是高级前端开发工程师与交互体验设计专家。请基于原生HTML5、CSS3与JavaScript（ES6+），为我开发一款轻量级逻辑解谜游戏的完整前端代码。该应用需适配多终端屏幕，具备流畅的动画反馈与无障碍访问特性，旨在为用户提供优质的碎片化休闲体验。
在技术选型层面，请进行DOM渲染与Canvas渲染的对比分析，并明确采用DOM方案的理由：鉴于本项目以网格交互与事件监听为主，DOM方案在可访问性、SEO友好度及CSS3动画集成方面具备显著优势，且更利于后期组件化重构。基于此结论，请构建语义化DOM结构，采用Grid布局实现游戏面板的自适应排列，确保在移动端与桌面端均保持视觉一致性。其次，编写核心游戏逻辑模块，包含关卡数据校验、操作合法性判定、胜利条件触发及计时计分系统。
逻辑层须与视图层解耦，通过事件委托机制优化渲染性能。集成CSS3 Transition与Keyframes实现平滑状态切换，并添加操作音效反馈开关。在代码交付标准方面，请严格遵循W3C规范与可访问性指南。所有JavaScript代码须采用模块化语法，避免全局变量污染，并提供详细的异常处理机制。最终输出应包含标准前端工程目录，附带本地服务器启动指令及浏览器兼容性测试报告。请确保代码具备高扩展性，以便后续接入数据持久化模块。