Trae分析Phaser.js游戏《洋葱头捡星星》

🎮 项目概述

《洋葱头捡星星》取的这个名字。是一个基于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轴的正方向。