
🎮 项目概述
《洋葱头捡星星》取的这个名字。是一个基于Phaser.js游戏引擎开发的2D平台跳跃游戏,这是官网为新手准备的入门案例,只需要用到纯粹的JS,页面使用WEBGL或Canvas自由切换。
游戏操作
按键 | 功能 | 版本支持 |
---|---|---|
空格键 | 开始游戏 | 所有版本 |
方向键 ← → | 左右移动 | 所有版本 |
方向键 ↑ | 跳跃 | 所有版本 |
F5 | 重新开始 | 所有版本 |
修改星星为3个,启动炸弹演示。
🎮 一、游戏架构与技术实现
Phaser框架特性
跨平台支持 :基于HTML5 Canvas/WebGL渲染,适配桌面和移动端浏览器。
模块化设计 :通过preload
、create
、update
三生命周期方法管理资源加载、初始化和实时逻辑。
物理引擎 :使用Arcade Physics实现重力(gravity: {y: 300}
)、碰撞检测(collider()
)和弹跳效果(setBounce()
)。
调用 preload
→create
→update
1.preload() 预加载资源
函数可自定,预加载资源并且形成自定义资源调用ID。提前加载所有资源避免运行时卡顿,精灵图拆分帧实现动画。

js
function preload (){ //可自定函数名
this.load.image('天空', 'assets/sky.png'); // 加载天空背景
this.load.image('草地', 'assets/platform.png'); // 加载草地平台
this.load.image('star', 'assets/star.png'); // 加载星星
this.load.image('bomb', 'assets/bomb.png'); // 加载炸弹
this.load.spritesheet('dude', // 加载玩家精灵表
'assets/dude.png',
{ frameWidth: 32, frameHeight: 48 } // 精灵帧大小
);
}
例如预加载的资源 命名后,可以在其他地方使用 自定义名字(资源ID?)直接渲染。

2.create() 创建平台和操作
草地素材默认尺寸400x32 ,素材加载坐标定位是基于中心点的,画4个草地平台其实是有溢出的,最下部是放大了两倍变成 800x 64。

js
平台 = this.physics.add.staticGroup(); // 平台游戏对象工厂
// 创建底部平台并缩放2倍,由于静态物体需要 refreshBody刷新
平台.create(400, 568, '草地').setScale(2).refreshBody();
平台.create(600, 400, '草地'); // 创建右侧平台
平台.create(50, 250, '草地'); // 创建左侧平台
平台.create(750, 220, '草地'); // 创建右上平台
注意玩家初始位置是从空中掉下来的,坐标(x,y)为(100,450)。注意x轴、y轴的正方向。

⚙️ 二、核心游戏机制分析
- 角色控制系统
键盘输入 :cursors
监听方向键,控制水平移动(setVelocityX()
)和跳跃(setVelocityY()
)。
动画状态机 : this.anims.create({ key: 'left', frames: [...] }); // 左移动画 通过play()
切换行走、转身动画,增强表现力。
- 收集与挑战机制
星星收集 :overlap()
检测玩家与星星碰撞,触发collectStar()
计分(score += 10
)。

动态难度 :当星星收集完毕时,生成炸弹并赋予随机速度(setVelocity()
),增加挑战性。

失败判定 碰撞响应 :玩家接触炸弹时调用hitBomb()
,暂停物理引擎(physics.pause()
)并显示红色染色(setTint(0xff0000)
)。

📂 三、项目结构与资源管理
📂assets
📂js/phaser.min.js
index.html
🛠️总结
此项目完整展示了2D平台跳跃游戏《洋葱头捡星星》的核心开发流程,涵盖物理模拟、资源管理、动画控制等关键技术点。
对象池扩展 :炸弹组(bombs
)同样使用group()
管理,但需增加数量上限防止内存泄漏。 动画帧率控制 :降低非活跃对象的更新频率(如updateOnlyVisible
)。
功能扩展方向 UI系统 :添加生命值显示、关卡进度条。 音效集成 :为跳跃、收集、爆炸添加音效(this.load.audio()
)。 关卡设计 :通过JSON文件(load.json()
)配置多关卡平台布局。 Phaser.js官方教程
第一次学游戏开发,cocos creator或者godot界面+混合代码有点难上手,还是习惯 Phaser.js这种纯代码的,还是纯原生JS那就更好了。

ALL IN CODE!