Phaser 游戏开发 - 菜单中的箭头移动速度太快

Question

我正在测试 Phaser 做一个简单的宇宙飞船游戏。我已经为游戏及其功能配置了一些状态（启动、加载、菜单和级别）。

在菜单上我有 3 个灰色选项（开始、继续和制作人员），我保留了一个名为 selected 的变量来标记哪个菜单是 selected（1、2 或3).当我按向上箭头时，我设置 selected - 1，向下箭头 selected + 1，以在选项之间导航。它运行完美，但由于更改速度无法 select 一个选项，请自行查看：Spaceships

菜单的JS代码：

var title = ""
var starfield = null
var selected = 1;
var cursores = null;

var menuOptions = {
  start: {title: "Empezar partida", variable: null},
  continue: {title: "Continuar partida", variable: null},
  credits: {title: "Creditos", variable: null}
}

var menuState = {
  downMenu: function(){
    selected += 1
    console.log(selected)
    if(selected>=4){
      selected = 1
    }
  },
  upMenu: function(){
    selected -= 1
    console.log(selected)
    if(selected<=0){
      selected = 4
    }
  },
  preload: function(){
    var me = this;
    //console.log('preload')
    space.load.bitmapFont('titleFont', 'assets/Fonts/title.png', 'assets/Fonts/title.fnt');
    space.load.bitmapFont('menuFont', 'assets/Fonts/menuFont.png', 'assets/Fonts/menuFont.fnt');
    space.load.image('background', 'assets/Backgrounds/menuStarfield.png')
  },
  create: function(){
    //console.log('create')
    starfield = space.add.image(0, 0, 'background')
    space.stage.backgroundColor = '#000000'
    title = space.add.bitmapText(50, 50, 'titleFont', 'Deviant Spaceships!', 64);

    menuOptions.start.variable = createText(150, menuOptions.start.title)
    menuOptions.continue.variable = createText(225, menuOptions.continue.title)
    menuOptions.credits.variable = createText(300, menuOptions.credits.title)

    cursores = space.input.keyboard.createCursorKeys()
    //cursores.onDown.addOnce(this.changeMenu, this)
  },
  update: function(){
    title.text = 'Oh No! Spaceships! \n';
    if(cursores.down.isDown){
      this.downMenu()
    }
    if(cursores.up.isDown){
      this.upMenu()
    }
    if(selected == 1){
      //menuOptions.start.variable.text = "-> "+menuOptions.start.variable.text
      menuOptions.start.variable.fill = '#FFFFFF'
    }else{
      menuOptions.start.variable.fill = '#999999'
    }
    if(selected == 2){
      //menuOptions.start.variable.text = "-> "+menuOptions.start.variable.text
      menuOptions.continue.variable.fill = '#FFFFFF'
    }else{
      menuOptions.continue.variable.fill = '#999999'
    }
    if(selected == 3){
      //menuOptions.start.variable.text = "-> "+menuOptions.start.variable.text
      menuOptions.credits.variable.fill = '#FFFFFF'
    }else{
      menuOptions.credits.variable.fill = '#999999'
    }

    menuOptions.continue.variable.text = menuOptions.continue.title
    menuOptions.credits.variable.text = menuOptions.credits.title
    starfield.x -= 2
    if(starfield.x <= -1026){
      starfield.x = 0
    }
  }
}

function createText(y, texto) {

    var text = space.add.text(space.world.centerX, y, texto);
    text.anchor.set(0.5);
    text.align = 'center';

    //  Font style
    text.font = 'Arial Black';
    text.fontSize = 50;
    text.fontWeight = 'bold';
    text.fill = '#999999';

    return text;

}

¿如何将菜单项 select 一个一个地取出来？每次我添加或减去 selected var 时，有没有办法停止在代码中按下按键？

Answer 1

几个星期前我遇到了同样的问题，但我没有找到一个好的解决方案，所以我最终做了一个不太优雅的黑客...我允许每隔一段时间更改一次菜单（ 200 毫秒）。我确定会有更好的解决方案，但我正在使用的是这样的解决方案（检查控制台）：

var game = new Phaser.Game(500, 500, Phaser.CANVAS, 'game');
var selected = 1;
var menuState = { 

create:function(){
    cursores = game.input.keyboard.createCursorKeys();
    this.cambia_menu = this.time.now + 200;
},
downMenu: function(){
    selected += 1
    console.log(selected)
    if(selected>=4){
      selected = 1
    }
  },
upMenu: function(){
    selected -= 1
    console.log(selected)
    if(selected<=0){
      selected = 4
    }
},
update:function(){
    if(cursores.down.isDown && this.cambia_menu<this.time.now){
        this.cambia_menu = this.time.now + 200;
        this.downMenu();
    }
    if(cursores.up.isDown && this.cambia_menu<this.time.now){
        this.cambia_menu = this.time.now + 200;
        this.upMenu();
    }       
},
  
};
game.state.add('menu', menuState);  
game.state.start('menu');

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/2.4.4/phaser.min.js"></script>
<div id="game"></div>

Phaser 游戏开发 - 菜单中的箭头移动速度太快

Phaser Game Development - Movement with arrows too fast in Menu

javascript

game-engine

html5-canvas

phaser-framework