如何用 Phaser 制作简单的2D复古游戏（第二部分）

让我们让这个游戏变得互动吧！我们将加入一个玩家，添加移动控制功能，还有掉落的道具。

注意：如果你更喜欢视频教程，这里有一个视频教程：

1. 插入占位符图

更新 create 函数，在里面添加表示玩家和掉落的物品的形状。

function create() {
    // 玩家（蓝色矩形）
    this.player = this.add.rectangle(400, 550, 50, 50, 0x0000ff);

    // 掉落的物品（绿色矩形）
    this.item = this.add.rectangle(400, 50, 50, 50, 0x00ff00);

    // 开启物理效果
    this.physics.add.existing(this.player);
    this.physics.add.existing(this.item);

    // 玩家控制键
    this.cursors = this.input.keyboard.createCursorKeys(); // 获取键盘上的方向键
}

切换到全屏 退出全屏

2. 左右移动玩家

在 update 函数中加入移动相关的部分。

    function update() { 
        // 更新函数
        // 向左移动 玩家
        if (this.directions.left.isDown) {
            this.player.x -= 5;
        }
        // 向右移动 玩家
        else if (this.directions.right.isDown) {
            this.player.x += 5;
        }
    }

全屏 退出全屏

玩家现在可以用方向键左右移动了。

3. 添加简单的碰撞处理

我们要更新一下配置了：

改成：

       type: Phaser.AUTO, // 自动检测 WebGL 或 Canvas 渲染方式
       width: 800,        // 宽度
       height: 600,       // 高度

全屏

接下来，我们给场景添加物理和重力效果。

    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 }
        }
    },

进入全屏 退出全屏

当掉落的物件到达底部时，位置归零：

    function update() {
        // 使下落的物品向下移动
        this.item.y += 3;

        // 重置物品的位置
        if (this.item.y > 600) {
            this.item.y = 50;
            this.item.x = Phaser.Math.Between(50, 750); // 随机的 X 坐标
        }

        // 检查重叠
        if (Phaser.Geom.Intersects.RectangleToRectangle(this.player.getBounds(), this.item.getBounds())) {
            console.log('抓到了一个物品!');
            this.item.y = 50;
            this.item.x = Phaser.Math.Between(50, 750); // 将物品的 Y 坐标设置为 50 并随机设置 X 坐标
        }
    }

进入全屏模式
退出全屏模式

你现在应该能看到一个这样的屏幕：绿色的方块在落下。你也可以用箭头键控制玩家。

📝 小结 ：你添加了玩家移动、掉落的物品和基本碰撞检测。你的游戏变得更加互动了！接下来让我们进入部分3点击这里查看[部分3]

注意：如果您更喜欢看视频教程，视频在这里。

源代码链接
可玩版本链接