Phaser3飞船按键发射子弹频率过高的问题及解决方法

问题场景与代码 #

我正在用Phaser3开发一款简易飞船射击游戏：飞船跟随鼠标X轴移动，按下空格键发射子弹。现有实现代码如下：

var gameScene = new Phaser.Scene('game');
var navicella;
var bullets; 

gameScene.preload = function(){
    this.load.image('navicella', './assets/astronave.png')
    this.load.image('bullet', './assets/bullet.png')
}

gameScene.create = function(){
    navicella = this.physics.add.sprite(450, 500, 'navicella');
    bullets = this.physics.add.group();
    this.keySpace = this.input.keyboard.addKey(Phaser.Input.Keyboard.Key.SPACE, 100);
    
}
gameScene.update = function(){
    navicella.x = this.input.mousePointer.x;
    if(this.keySpace.isDown){
        var bullet = bullets.create(navicella.x, 500, 'bullet');
        bullet.setVelocityY(-100);
        
    }
}
var config = {
    type: Phaser.AUTO,
    width: 900, 
    height: 600,
    scene: gameScene,
    physics: {
        default: 'arcade',
        arcade: {
            debug: false,
            gravity:{y: 0}
        }
    },
};
var game = new Phaser.Game(config);

存在的问题 #

当前代码中，按住空格键会无限制生成大量子弹，无法控制发射频率，需要添加发射限制逻辑。

解决方案 #

方案一：键盘事件触发（推荐） #

通过监听keydown-SPACE事件来生成子弹，该事件在单次按键按下时只会触发一次，直接解决按住空格连续发射的问题。修改后的关键代码如下：

gameScene.create = function(){
    navicella = this.physics.add.sprite(450, 500, 'navicella');
    bullets = this.physics.add.group();
    // 替换原有的按键监听方式，改用事件绑定
    this.input.keyboard.on('keydown-SPACE', () => {
        var bullet = bullets.create(navicella.x, navicella.y - 20, 'bullet'); // 从飞船顶部发射更合理
        bullet.setVelocityY(-100);
    });
}

gameScene.update = function(){
    navicella.x = this.input.mousePointer.x;
    // 移除原有的空格按下判断逻辑
}

优势：无需额外处理延迟逻辑，代码简洁，确保每次按键仅发射一颗子弹，符合常规射击游戏的单次按键发射体验。

方案二：冷却时间机制（@winner_joiner 提供） #

如果需要实现“按住空格可连续发射但有固定间隔”的效果，可以通过添加冷却时间变量控制发射频率：

gameScene.create = function(){
    navicella = this.physics.add.sprite(450, 500, 'navicella');
    bullets = this.physics.add.group();
    this.keySpace = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
    this.shootCooldown = 0; // 冷却剩余时间
    this.shootDelay = 100; // 最小发射间隔（毫秒）
}

gameScene.update = function(time, delta){
    navicella.x = this.input.mousePointer.x;
    
    // 每帧更新冷却时间
    if(this.shootCooldown > 0){
        this.shootCooldown -= delta;
    }
    
    // 空格按下且冷却完成时发射子弹
    if(this.keySpace.isDown && this.shootCooldown <= 0){
        var bullet = bullets.create(navicella.x, navicella.y - 20, 'bullet');
        bullet.setVelocityY(-100);
        this.shootCooldown = this.shootDelay; // 重置冷却
    }
}

优势：可灵活调整发射间隔，适合需要连续发射但控制频率的场景。

总结 #

两种方案均可解决子弹无限制生成的问题，其中事件触发方案更简单直观，适合单次按键发射的需求；冷却机制方案则更灵活，支持自定义发射频率。

内容的提问来源于stack exchange，提问作者user19230297