KANA 像素兔子弓箭手

提示词

登录后复制

创建一个独立的 HTML 文件，仅使用原生 JavaScript 和 Canvas 2D，渲染一个带动画的像素风兔子弓箭手角色。 以附件中的 KANA 兔子角色为视觉参考： - 白色兔子 - 大而直立的耳朵，耳内有青色/蓝色发光细节 - 一只正常的蓝眼睛 - 一只红色赛博机械眼 - 印有“KANA”的黄色连帽衫 - 深蓝色手套和裤子 - 黄蓝配色的科幻机械腿甲 - 可爱的 Q 版比例 - 未来感弓箭武器 - 背部的小箭袋 不要使用外部资源、库、图片、字体或网络请求。所有内容都必须用代码程序化绘制。 渲染 - 先在固定逻辑分辨率为 160x120 的离屏画布上渲染所有内容。 - 使用能适配浏览器窗口的最大整数倍，将其缩放到全屏显示画布。 - 画布居中。 - 设置 imageSmoothingEnabled = false。 - 使用 CSS image-rendering: pixelated。 - 所有坐标必须对齐到整数。 - 禁止渐变、模糊、抗锯齿、shadowBlur 或亚像素渲染。 - 使用约 28 色的固定调色板：深海军蓝背景色、白色/灰色毛发、黄色连帽衫、蓝色服装、红色机械眼、青色耳部光效，以及黄色/橙色弓箭特效。 角色 使用像素矩形、近似多边形的像素排列、由像素近似的圆形和简单块状形状，程序化构建兔子。 角色尺寸约为宽 28–34 像素、高 40–48 像素。 保持轮廓清晰可辨：大兔耳、圆而蓬松的头、小身体、红色机械眼、黄色连帽衫、机械腿、弓、箭和箭袋。 分别为耳朵、头、手臂、腿、连帽衫、弓、箭和身体制作动画。 对动画姿态进行量化，使主循环即便以 60fps 渲染，视觉效果仍像精致的 8–12fps 精灵动画。 动作 创建循环播放的动画展示，包含以下 8 个动作： 1. 待机（IDLE） - 兔子站立待命 - 身体轻微上下起伏 - 耳朵微动 - 连帽衫和箭袋摇摆 - 机械眼柔和地脉动发光 - 放松地将弓持于身侧 2. 奔跑（RUN） - 快速向前奔跑 - 双腿有力地交替运动 - 手臂维持平衡 - 单手持弓 - 箭袋弹跳 - 耳朵略向后拖曳 - 脚下出现小尘土像素 3. 瞄准（AIM） - 双脚稳稳站定 - 举起弓 - 从箭袋取箭 - 搭箭 - 向后拉弦 - 一只眼睛专注目标 - 机械眼变亮 - 身体略向射击方向前倾 4. 射击（SHOOT） - 松开弓弦 - 箭快速飞过屏幕 - 弓轻微后坐 - 手臂随动作自然延伸 - 箭后跟随明亮的黄色能量轨迹 - 轻微的 1–2 像素屏幕震动 - 机械眼闪出红光 - 弓上短暂出现类似枪口闪光的光爆 5. 跳跃（JUMP） - 兔子下蹲 - 向上跃起 - 双腿收于身下 - 耳朵有延迟反应 - 弓贴近身体 - 起跳时扬起小股尘土 - 使用保持像素完整的整数变换，实现轻微的挤压和拉伸 6. 闪避 / 翻滚（DODGE） - 兔子快速俯身 - 向侧面翻滚 - 弓始终贴近身体 - 耳朵向后压平 - 出现细小尘粒和运动像素 - 以低姿态的战斗准备动作结束 7. 受伤 / 中击（HURT） - 兔子轻微向后被击退 - 头部猛然后仰 - 耳朵明显摆动 - 机械眼闪烁 - 出现小型像素星星或撞击火花 - 弓下垂或几乎脱手 - 短暂延迟后恢复 8. 胜利（VICTORY） - 兔子将弓举过头顶 - 表情开心 - 一只耳朵俏皮地倾斜 - 机械眼明亮发光 - 出现黄色的小型庆祝粒子 - 做一个短促的胜利弹跳 - 结束姿态应可爱又英勇 状态机 使用如下循环：IDLE → RUN → AIM → SHOOT → JUMP → DODGE → HURT → VICTORY → IDLE。 每个动作应持续足够长，让人能清楚看懂。 使用缓动函数进行姿态过渡。 在状态之间加入短暂的过渡动画，让循环连贯，而非突然切换姿态。 弓箭 - 未来感曲弓 - 白色 / 深海军蓝主体 - 黄色发光机械关节 - 细而明亮的弓弦 - 箭头为明亮的黄色 - 射击时箭的轨迹短暂保留 - 箭袋中有数支可见的箭 粒子 实现不产生内存分配的粒子池系统，在动画循环开始前预分配全部粒子。 粒子类型：脚下尘土、箭轨迹、弓的能量火花、机械眼火花、受击星星和胜利粒子。 每个粒子随生命周期变化切换调色板颜色。 不要在主循环中分配新对象。 场景 创建简洁的像素艺术环境：深色夜空、少量 1 像素星星、一轮大月亮、简单的石质或未来感平台，以及非常淡的远景剪影。 背景必须保持简洁，确保兔子的轮廓始终清楚。 在瞄准和射击时，添加来自机械眼的微弱青色/红色边缘光，以及来自弓的黄色边缘光。 技术要求 - 单个 HTML 文件 - 仅使用原生 JavaScript - 仅使用 Canvas 2D - 无库、无 SVG、无外部图片、无资源、无网络请求 - 固定 60Hz 时间步长 - 使用 requestAnimationFrame 渲染 - 主动画循环内零对象分配 - 稳定 60fps - 响应式全屏缩放 - 清晰的整数倍缩放像素 质量标准 效果应像精心制作的 16 位动作游戏主角精灵动画，避免看起来只是简单几何图形的拼凑。 兔子应富有表现力、可爱、敏捷，并具备战斗能力。 8 个动作都必须有明显不同的轮廓。 所有动画状态中的角色设计必须保持一致。 最终效果应适用于真正的像素风动作游戏。