- 零依赖不引框架、不带图片，纯 Canvas 逐像素绘制
- 可拖拽按住拎起，松手自由落体 + 弹跳站稳
- 自动托管自己溜达、无聊、打哈欠、睡着
- 随时卸载点 × 或 destroy()，DOM 与动画循环一起清掉
两种写法，都是粘贴即用
不需要构建工具。把 pet-widget.js 传到你的站点，引用它就行。
<script src="pet-widget.js"
data-pet
data-size="160"
data-position="bottom-right"></script>
<div id="stage" style="position:relative;height:320px"></div>
<script>
PixelPet.create({
size: 140,
target: '#stage',
drop: false
});
</script>
<script src="pet-widget.js"></script>
<script>
const pet = PixelPet.create({
size: 160,
position: 'bottom-right',
sound: false,
wander: true
});
pet.say('这段字是 pet.say() 说的。');
</script>
· 组件使用 Shadow DOM，站点的 CSS 不会影响它，它也不会污染站点样式。
· 只有角色自己那块区域（约 160×136）会接住鼠标，页面其余部分完全不受影响，不会挡住正文的链接和按钮。
· 音效默认关闭。浏览器要求用户先交互才能播放，所以点一下控制栏的「声」再开才有效。
· 想让它一开始就站在地上，加 drop:false；默认是从上方掉下来。
提示：尺寸建议取 80 的整数倍（80 / 160 / 240），像素边缘最锐利。
能调的东西不多，但都够用
所有参数都可选，不传就用默认值。
| 参数 | 类型 | 默认 | 说明 |
|---|---|---|---|
| size | number | 160 | 挂件宽度（px），高度按 80:68 自动算 |
| position | string | 'bottom-right' | bottom-right / bottom-left / center，也可直接传数字 x 坐标 |
| sound | boolean | false | 音效开关（8bit 方波，程序合成，无音频文件） |
| wander | boolean | true | 是否允许它自己沿页面底部散步 |
| controls | boolean | true | 悬停时显示的小控制栏 |
| bubble | boolean | true | 是否显示像素对话气泡 |
| target | string / Element | null | 挂载容器；传了就变成内联模式，不再全屏悬浮 |
| drop | boolean | true | 是否从上方向下掉落着登场 |
| margin | number | 24 | 贴边留白（px） |
| zIndex | number | 2147483000 | 浮层层级 |
| hello | string | — | 落地后说的第一句话 |
pet.play('punch') 播放动作：idle / bored / tea / punch / dummy / kick / happy / sleep / behind / walk
pet.say('文字', 毫秒) 弹一句气泡
pet.setSize(200) 改尺寸
pet.moveTo(x, y) 扔到指定坐标（会自由落体）
pet.setSound(true) 开 / 关音效
pet.destroy() 卸载，恢复页面原样
PixelPet.create(opts) 创建并挂载，返回实例
PixelPet.init(opts) 同上（别名）
PixelPet.instance 一行引入模式下自动创建的那只
PixelPet.instances 当前所有存活实例
不打扰你，但一直活着
所有动作都是帧间插值，不是图片切换；闲置越久越无聊，最后会直接睡着。
自己溜达
闲下来会沿页面底部左右走，走到屏幕边缘自动掉头，走路时身体有起伏。
会无聊，也会睡着
站久了半闭眼、撇嘴、打哈欠；再久一点闭上眼冒 Z，点一下就能叫醒。
点了会还手
戳它会乐，或者摆出咏春起手式冲你一拳，带速度线和冲击星。
拎得起来
按住拖到任意位置，松手后自由落体、落地弹一下、扬起一点尘土再站稳。
会喊话
像素气泡说几句闲话，2.6 秒自动消失；靠近屏幕边缘时会自动翻到下方，不会被裁掉。
全身而退
点控制栏的 × 或调 destroy()：DOM、事件监听、requestAnimationFrame 一起清干净。
改参数，立刻换一只
改动会作用在页面右下角那只真实的挂件上。
当前：160 px · 右下角
把鼠标移到右下角小宠身上，它旁边会弹出控制栏：茶 / 拳 / 桩 / 踢 / 蹲 / 乐 六个动作，加上「走、声、×」三个开关。
直接按住它可以拖到任意位置，松手会掉下来——从高处松手还会空翻，往哪边拖就朝哪边翻，落地站稳。点它一下会触发随机反应。
收起之后，用「重新召唤」让它再回来。