新手应优先选Canvas API或PixiJS而非Phaser；Canvas动画需用requestAnimationFrame递归主循环；图片绘制前必须等待img.onload；移动端需监听touchstart并校准坐标。
用什么引擎？别一上来就选 Phaser
新手最容易踩的坑，是看到“HTML5 游戏引擎”就直奔 Phaser —— 它功能全、文档多，但启动成本高：要配 Webpack、处理资源加载、理解状态机、甚至得先搞懂 webpack-dev-server 才能跑起一个方块跳一下。真想 30 分钟内看到“角色动了”，PixiJS 或原生 Canvas API 更直接。
实操建议：
- 做纯动画/点击反馈类小玩意（比如弹球、翻牌、进度条小游戏），直接用
Canvas API+requestAnimationFrame，50 行代码能跑通 - 需要精灵图、简单物理（如重力、碰撞）、但不想碰构建工具？选
PixiJS，它不强制状态管理，PIXI.Application初始化后就能加PIXI.Sprite - 只有确定要做带关卡、音效、粒子、Tiled 地图的完整游戏，再碰
Phaser；否则你会卡在Phaser.Scene的生命周期里查文档两小时
Canvas 动画卡顿？检查 requestAnimationFrame 的调用位置
写完第一个小球移动，发现掉帧、跳动、或者越跑越慢——大概率是把 requestAnimationFrame 放在了事件回调或定时器里，而不是主渲染循环中。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 用
setInterval每 16ms 调一次绘图，结果和屏幕刷新不同步，画面撕裂 - 在鼠标点击后才触发一次
requestAnimationFrame，没形成连续循环，球只闪一下 - 每次重绘都新建
CanvasRenderingContext2D，开销爆炸
正确做法：只初始化一次 canvas.getContext('2d')，然后用递归式 requestAnimationFrame 驱动主循环：
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ball.x += ball.vx;
ball.y += ball.vy;
ctx.beginPath();
ctx.arc(ball.x, ball.y, 10, 0, Math.PI * 2);
ctx.fill();
requestAnimationFrame(gameLoop); // 这行必须在末尾，且只写一次
}
requestAnimationFrame(gameLoop);图片加载失败导致黑屏？别忘了 wait for image.onload
用 drawImage 绘制角色图却只看到空白？不是路径错，也不是跨域，而是你没等图片真正加载完成就画了。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
使用场景：所有用 new Image() 加载资源的地方，尤其在本地开发时，file:// 协议下 img.src = 'hero.png' 后立刻 ctx.drawImage(img, ...) 几乎必失败。
参数差异 & 易错点：
-
img.onload是唯一可靠的加载完成钩子；img.complete只在缓存命中时为 true，不能替代 onload - 不要把
drawImage写在img.onload外面，哪怕只差一行 - 多个图片？别嵌套 onload，用计数器或
Promise.all管理加载完成态
简短示例：
const img = new Image();
img.onload = () => {
ctx.drawImage(img, 0, 0); // ✅ 此时 img 已解码就绪
};
img.src = 'player.png'; // ❌ 不要在这之后立刻 drawImage移动端点不到？canvas 缺少 touchstart 事件监听
PC 上鼠标点击正常，手机一点没反应——不是 CSS 遮挡，也不是事件绑定错对象，而是 canvas 默认不响应触摸事件，且移动端有 300ms 延迟机制干扰。
性能 / 兼容性影响：
- 只加
touchstart不够，还要preventDefault()干掉滚动延迟，否则点击像“卡了一下” - 别混用
click和touchstart做同一逻辑，它们触发时机和坐标系不同（touch 有touches[0]，click 用clientX/Y） - 真机调试时，Safari 对
canvas的 touch 坐标映射更敏感，记得用getBoundingClientRect()校准
实操建议：统一用 touchstart，并做基础坐标转换：
canvas.addEventListener('touchstart', (e) => {
e.preventDefault();
const rect = canvas.getBoundingClientRect();
const x = e.touches[0].clientX - rect.left;
const y = e.touches[0].clientY - rect.top;
// 接着处理 x/y 点击逻辑
});事情说清了就结束。最常被忽略的其实是资源加载顺序和事件坐标归一化——这两处出问题，连“Hello World”级游戏都会静默失败。
