HTML5游戏物理入门：重力与碰撞详解

HTML5游戏开发中，物理效果远非简单启用开关就能搞定——Phaser 3的Arcade Physics以轻量AABB碰撞和速度叠加支撑平台跳跃等高帧率场景，而Matter.js则提供旋转、多边形等真实模拟却需谨慎调优避免卡顿；从重力配置、碰撞回调失效到Canvas渲染与物理坐标的错位，每个环节都紧密耦合着场景初始化、对象生命周期与渲染缩放策略，真正让角色稳稳落地的，是物理系统与引擎底层逻辑的精密协同。

HTML5 游戏引擎里做重力和碰撞，不是调个 enablePhysics() 就完事——物理系统默认不启用，且不同引擎的“物理”其实是完全不同的两套东西。

Phaser 3 的 Arcade Physics 适合什么场景？

Arcade 物理是 Phaser 最常用、最轻量的方案，但它不是真实物理模拟，而是基于 AABB（轴对齐包围盒）的矩形碰撞检测 + 简单速度/加速度叠加。适合平台跳跃、弹球、推箱子这类对精度要求不高、但帧率必须稳的游戏。

• 开启前必须先在场景配置里声明：physics: { arcade: { gravity: { y: 300 } } }
• body.setGravityY(300) 只对已启用 Arcade 物理的 sprite 生效，没调 this.physics.add.sprite() 创建的对象，body 是 undefined
• 两个 static 物体（比如地面和墙壁）之间不会触发碰撞回调，只有至少一方是 dynamic 才会触发 collide 事件
• 不要用它算旋转、倾斜坡道或圆形滚动——Arcade Physics 不支持旋转碰撞检测，圆对象实际还是按矩形框判的

为什么 Matter.js 物理一启用就卡顿？

Matter 是 Phaser 3 内置的另一个物理引擎，能支持多边形、旋转、关节、浮力等，但计算开销明显更大。卡顿通常不是因为“开了 Matter”，而是因为默认配置太“全”了。

• 初始化时别直接用 matter: true，改用显式配置：physics: { matter: { debug: false, enableSleeping: true, gravity: { y: 0.5 } } } —— 关掉调试渲染、启用休眠能省 30%+ CPU
• 每个 setCircle() 或 setPolygon() 都会触发一次刚体重建，频繁修改形状（比如变形动画）会导致持续 GC；静态物体优先用 setStatic(true)
• Matter 的坐标系单位是“像素 → 米”的映射，默认 scale: 0.02（即 50px = 1m），如果角色高 100px，实际高度是 2m——这个缩放不匹配会让重力看起来像失重或超重

collision 回调没触发？检查这三个地方

Phaser 的碰撞监听依赖对象是否被正确加入物理世界，也依赖更新顺序。常见静默失败不是代码写错，而是生命周期没对上。

• 确保 this.physics.add.collider(player, platforms) 在 create() 里执行，而不是 preload() 或异步加载完成后的回调里（此时物理系统可能还没 ready）
• 如果 platforms 是 StaticGroup，而 player 是动态的，要确认 platforms 的 body 类型：用 addStaticGroup() 创建的才带 static body，直接 add.group() 不行
• 碰撞回调函数里别直接改 body.velocity 后又马上调 body.setVelocity()——两者冲突，后者会覆盖前者；统一用 setVelocity(x, y) 或 setAcceleration()

Canvas 渲染下，物理位置和显示位置不一致怎么办？

这是最容易被忽略的底层细节：Phaser 的物理 body 坐标是逻辑坐标（以左上为原点），而 Canvas 渲染受 scale、canvas.style.width/height 和设备像素比影响。当页面缩放或响应式调整 canvas 大小时，body 坐标没变，但视觉位置偏了。

• 不要用 CSS 缩放 canvas 元素（transform: scale()），这会破坏物理坐标与像素的对应关系；改用 config.scaleMode = Phaser.Scale.FIT + config.resolution 控制清晰度
• 如果游戏必须适配多种屏幕，每次 resize 后手动同步：sprite.setPosition(sprite.x, sprite.y) 触发一次重定位，避免 body 和显示脱节
• 调试时打开 debug: true 并用 matter.world.drawDebug = true（Matter）或 arcade.debug = true（Arcade）看绿色线框——线框位置不对，说明物理世界和渲染世界已经不同步

物理系统不是开关，是需要和渲染节奏、对象生命周期、坐标缩放一起对齐的一整套约束。调通一个跳起落地，往往要同时盯住 config、create、update 三处，少一处都可能让重力“消失”。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~