【生成教学工具的原始提示词】 请帮我创建一个“方位小课堂”互动HTML网页，具备以下完整功能： 1. 口诀展示：根据当前面向（东/南/西/北）动态显示“面向X时，后面是Y，左面是Z，右面是W”。面向改变时口诀实时更新，四个方向词分别用不同暖色背景高亮。 2. 角色动画：使用Canvas绘制小女孩，配合外部自制精灵图 images/girl_sprites.png (宽800px高200px，4个方向帧：列0=南，列1=北，列2=西，列3=东)。根据当前面向显示对应的角色朝向，并配有简单的emoji文字。 3. 旋转/切换方向：支持点击Canvas区域或“顺时针旋转”按钮，使当前面向顺时针旋转（东→南→西→北→东…），每次旋转后重新绘制角色、更新口诀与底部面向徽章。 4. 方位标签：在场景四周浮动显示东、南、西、北文字箭头标签（绝对定位），位置依canvas动态变化，标签不随角色朝向改变而移动，始终指示地理位置方向（即标签内容固定方位字符，只改变角色朝向）。 5. 语音朗读：每次旋转后自动朗读最新的完整口诀（例如“面向东时，后面是西，左面是北，右面是南”）。使用Web Speech API，中文女声，且朗读时有临时提示气泡。 6. 视觉与交互：卡片风格圆润柔和，支持移动端响应式布局，方向标签适配各种屏幕。画布大小自适应，并保证精灵图绘制清晰。 7. 所有代码自包含，无第三方库，兼容现代浏览器。精灵图缺失时友好提示。同时底部显示面向徽章，支持顺时针无限旋转。 8. 界面右下角不需要原先的“查看提示词”说明（但最终版本附加的提示词面板作为辅助功能无影响）。