You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

Phaser 3中实现长按1秒触发的游戏暂停按钮方案咨询

Phaser 3中实现长按1秒触发的游戏暂停按钮方案咨询

嘿,这个给猫玩的游戏想法超有意思!针对你要做的长按1秒才触发的暂停按钮,我刚好有个在Phaser 3里的落地思路,亲测好用,给你拆解下步骤和代码:

核心逻辑

本质就是用Phaser的**延时事件(Delayed Call)**做判断:按下按钮时启动1秒定时器,若猫爪在1秒内松开或移开按钮,就取消定时器;只有等定时器走完1秒,才执行暂停逻辑,完美规避误触。

具体代码实现

你可以在场景的create方法里添加以下逻辑:

let pauseTimer; // 存储延时事件的变量
let isPaused = false; // 标记游戏暂停状态

// 1. 创建暂停按钮(用图形绘制,无需外部纹理,方便你快速测试)
const pauseBtnGraphics = this.add.graphics()
  .fillStyle(0xff4444, 1)
  .fillRoundedRect(60, 60, 120, 60, 15)
  .setInteractive(
    new Phaser.Geom.Rectangle(60, 60, 120, 60),
    Phaser.Geom.Rectangle.Contains
  );
// 给按钮加提示文字
const pauseBtnText = this.add.text(120, 90, '长按1秒暂停', { fontSize: '18px', fill: '#ffffff' }).setOrigin(0.5);

// 2. 绑定按钮按下事件
pauseBtnGraphics.on('pointerdown', () => {
  if (isPaused) return; // 已暂停时不再触发新定时器
  // 启动1秒延时事件,到时执行暂停
  pauseTimer = this.time.delayedCall(1000, () => {
    this.scene.pause();
    isPaused = true;
    pauseBtnText.setText('点击恢复游戏');
    // 显示暂停提示
    this.add.text(this.cameras.main.centerX, this.cameras.main.centerY, '游戏已暂停', { fontSize: '36px', fill: '#ffffff' }).setOrigin(0.5).setDepth(10);
  }, [], this);
});

// 3. 绑定松开/离开按钮事件,取消定时器
pauseBtnGraphics.on('pointerup', () => {
  if (pauseTimer) {
    pauseTimer.remove();
    pauseTimer = null;
  }
  // 已暂停时点击恢复游戏
  if (isPaused) {
    this.scene.resume();
    isPaused = false;
    pauseBtnText.setText('长按1秒暂停');
    // 清除暂停提示
    const pausePrompt = this.children.getFirst((child) => child.text === '游戏已暂停');
    if (pausePrompt) pausePrompt.destroy();
  }
});

pauseBtnGraphics.on('pointerout', () => {
  if (pauseTimer) {
    pauseTimer.remove();
    pauseTimer = null;
  }
});

额外小建议

  • 按钮可以做得更大更醒目,毕竟猫爪比手指大很多,能提升触发成功率
  • 场景销毁时记得清理定时器,避免内存泄漏:在shutdown方法里加if (pauseTimer) pauseTimer.remove();
  • 如果你的游戏用了多场景,可以根据需求把this.scene.pause()换成this.game.pause(),实现全局游戏暂停

备注:内容来源于stack exchange,提问作者Guilherme Alves

火山引擎 最新活动