html5游戏点击事件需监听canvas的pointerdown并换算坐标做碰撞检测，因canvas是空白幕布；Phaser/Pixijs须显式设interactive=true并用pointerdown而非click。
怎么给 html5 游戏元素加点击事件
直接绑定 onclick 大概率失效——因为游戏画布（）是空白“幕布”，dom 元素没在上面，点的其实是 canvas 本身，不是你画的角色或按钮。
正确做法是监听 canvas 的 click 事件，再用鼠标坐标反查哪个游戏对象被点了。核心就两步：获取点击位置、做碰撞检测。
- 用
Event.clientX和event.clientY获取屏幕坐标，再减去 canvas 左上角的getBoundingClientRect()偏移，换算成 canvas 坐标系里的x、y - 遍历当前所有可点击的游戏对象（比如
button、enemy、player），检查它们的包围盒（bounding box）是否包含该点；矩形用x 这类判断就行 - 注意 canvas 可能设置了
width/height属性或 CSS 缩放，会导致坐标错位；务必用canvas.getBoundingClientRect()动态算偏移，别硬写 0,0
Phaser 或 PixiJS 里怎么开箱即用点选
这些引擎早封装好了交互层，但默认是关的——不手动启用，interactive 属性就是 false，点了也白点。
以 Phaser 3 为例，每个显示对象（Sprite、Image、Text）都要显式设置才能响应：
立即学习“前端免费学习笔记（深入）”；
const btn = this.add.image(100, 100, 'play-btn'); btn.setInteractive(); // 必须这句 btn.on('pointerdown', () => console.log('clicked!'));-
setInteractive()是开关，没它，后面所有事件监听都无效 - 事件名不是
click，而是pointerdown（兼容触屏）或pointerup；用click在移动端会延迟 300ms - PixiJS 同理：设
sprite.interactive = true，再监听pointerdown；别漏掉pixi.js的interaction插件初始化（v7+ 默认开启，v6 需确认）
Canvas 原生实现时，为什么总点不准
90% 是坐标系统没对齐：canvas 的绘图坐标（ctx）和 DOM 坐标（clientX/Y）不在同一套单位下。
- HTML 中
定义的是绘图分辨率，但 CSS 设置style="width:400px; height:300px"会拉伸画面——此时鼠标坐标要除以缩放比（400/800 = 0.5）才准 - 正确换算公式：
const rect = canvas.getBoundingClientRect(); const x = (e.clientX - rect.left) / (rect.width / canvas.width); - 如果用了
transform: scale()或父容器有滚动，getBoundingClientRect()仍可用，但必须在事件触发时实时调用，不能缓存
移动端点透、误触怎么防
手指比鼠标大得多，连续点击容易触发多次，或者点到背后 DOM（比如 canvas 下面有个