浪浪山小妖怪 - 乘法练习场

角色与目标:
  扮演一名顶级的Web前端开发者和资深的儿童教育产品设计师。

  核心任务:
  创建一个名为 chengfa.html
  的单一、自包含的HTML文件。该网页旨在通过讲解和互动练习，教会一名四年级小学生如何
  计算四位数乘以四位数。

  页面构成与要求:

  第一部分：内容讲解区
   1. 教学方法: 使用对儿童友好的语言和比喻，清晰地讲解两种乘法计算方法：
       * “盖楼房乘法”: 用盖楼和工人团队的比喻来解释传统的竖式长乘法。
       * “格子画画乘法”: 介绍格子乘法（Lattice
         Multiplication）的趣味性和视觉化优点。
   2. 辅助技巧:
      包含一个“超级侦探”环节，教孩子使用“估算”的方法来检查答案是否在一个合理的范围
      内。

  第二部分：交互式练习场（“小妖怪的计算挑战”）
  这是页面的核心功能，必须严格遵循以下设计要求：
   1. 核心布局:
       * 必须采用像素级精确的CSS
         Grid（网格）布局，完美模拟在数学稿纸上进行竖式计算的视觉效果。
       * 所有元素，包括题目数字、运算符号、中间步骤、最终答案，每一个数字都必须占据
         一个独立的、大小统一的格子，并确保所有列严格垂直对齐。
   2. 交互流程:
       * 提供一个“领新任务！”按钮，点击后随机生成一道新的“四位数 × 四位数”题目。
       * 计算过程严格按照“盖楼房”（竖式乘法）的方法，分为4个部分积计算步骤和1个最终
         求和步骤。
   3. 输入方式 (关键要求):
       * 作答区必须是格子化的，每个格子只允许输入一位数字。
       * 输入顺序必须强制从右往左。只有当右边的格子填入数字后，其左边的格子才能被激
         活输入。
       * 每一步开始时，光标必须自动聚焦在最右侧的输入格中。
       * 输入数字后光标自动向左跳转，按删除键时光标向右跳转。
   4. 视觉引导:
       * 在计算每一步部分积时（例如 1234 ×
         8），当前正在使用的乘数（8）和被乘数（1234）都必须有醒目的高亮效果，以引导
         孩子的注意力。
   5. 校验与反馈:
       * 每一步计算都有一个“检查”按钮。
       * 回答正确，该行的输入格将变为固定的数字，并自动解锁下一步的作答区。
       * 回答错误，会提示“不对哦，再试试！”，并允许孩子在原处修改。
   6. 庆祝动画 (关键要求):
       * 当最终答案计算完全正确后，必须弹出一个覆盖全屏的模态窗口（Modal）。
       * 弹窗内必须包含一个基于HTML5
         Canvas和原生JavaScript实现的、绚丽的“烟花”庆祝动画。
       * 弹窗中有一个“再来一题”的按钮，点击后关闭弹窗并生成新题目。

  第三部分：整体视觉与主题风格
   1. 主题: 页面必须深度融合中国动画片《浪浪山小妖怪》的美术风格。
   2. 视觉元素:
       * 色彩: 采用源于该动画的、丰富且亮丽的色彩，营造活泼、童趣的氛围。
       * 字体: 使用圆润、可爱的中文字体（例如“站酷小薇体”）。
       * 角色装饰:
         在页面的关键位置（如标题旁、练习场角落）点缀“小猪妖”等角色的图片，增加趣味
         性和陪伴感。
       * UI风格: 所有按钮、容器、边框等元素都要进行卡通化设计，使其与主题风格统一。