Phaser开发HTML5游戏核心是“搭框架+换素材+写逻辑”，首选Phaser 3，三步构建场景、按需加载资源、用Arcade Physics实现交互，调试发布轻量高效。
用 Phaser 开发 HTML5 游戏，核心是“搭框架 + 换素材 + 写逻辑”，不需要从零写渲染和输入系统，重点放在游戏设计和交互实现上。
一、选对版本：Phaser 3 是当前主力
Phaser 3 基于 WebGL（自动降级 Canvas），性能好、文档全、插件生态成熟。别用已停止维护的 Phaser 2；Phaser 4 尚未正式发布，暂不建议入坑。
- 通过 npm 安装：
npm install phaser，搭配 Webpack 或 Vite 启动项目 - 快速试玩：直接引入 CDN 版本，在 HTML 中加 script 标签即可跑 demo
- 官方示例库（labs.phaser.io）可直接查看源码，改一行就能看到效果
二、三步搭起可运行框架
每个 Phaser 游戏都由 Scene（场景）构成，最简结构只需一个 Scene 和基础配置。
- 配置游戏对象：设置宽高、物理引擎（Arcade Physics 足够多数 2D 游戏）、默认场景
- 定义 Scene 类：继承 Phaser.Scene，实现 preload()（载入资源）、create()（初始化对象）、update()（每帧逻辑）
- 启动游戏：new Phaser.Game(config)，自动加载并运行第一个 Scene
不用写 HTML 结构或 canvas 标签——Phaser 会自动创建并挂载到指定 DOM 容器。
立即学习“前端免费学习笔记（深入）”；
三、资源管理：图片/音频/图集按需加载
资源必须在 preload() 中加载完成，才能在 create() 里使用。常见类型有：
-
单图：
this.load.image('player', 'assets/player.png')→ 后续用 key 'player' 创建精灵 -
纹理图集（推荐）：
this.load.atlas('sprites', 'assets/sprites.png', 'assets/sprites.json')，适合动画帧或 UI 元素 -
音频：
this.load.audio('jump', 'assets/jump.mp3')，支持 Web Audio 自动处理
注意路径要与服务器实际结构一致；开发期可用本地服务（如 vite preview）避免跨域问题。
四、核心逻辑：用 Arcade Physics + Action 写玩法
跳、碰、射、收集——这些行为靠 Arcade Physics 系统驱动，不是手动算坐标。
- 启用物理：
this.physics.world.enable(sprite)，sprite 就有了 body 属性 - 设碰撞体：
body.setCollideWorldBounds(true)让角色不穿墙；body.setSize(w, h, true)微调碰撞盒 - 响应输入：
this.input.keyboard.addKeys({ up: Phaser.Input.Keyboard.KeyCodes.W })，再在 update() 里判断 key.up.isDown - 播放动画：
this.anims.create({ key: 'run', frames: this.anims.generateFrameNames('sprites', { start: 0, end: 3 }) })
所有交互逻辑集中在 update() 函数里，但别在里面做耗时操作（如遍历大数组），可拆成事件回调或用定时器节流。
五、调试与发布：轻量起步，逐步加固
开发阶段打开调试模式能省大量时间：
- 加
debug: true到 config，开启物理调试层（绿色框显示碰撞体） - 在浏览器控制台输入
scene.sys.game.canvas可直接操作 canvas 做截图或临时绘制 - 构建前检查资源路径、音频格式兼容性（MP3 + OGG 覆盖主流浏览器）
- 最终打包用
vite build，输出静态文件夹，扔到任意 HTTP 服务即可上线
不复杂但容易忽略：移动端需加 touch 支持（this.input.addPointer()）、禁用缩放（viewport meta）、处理横竖屏切换。
