Question

我正在测试Phaser做一个简单的太空飞船游戏。我为游戏及其功能配置了一些状态（启动，加载，菜单和levelOne）。

在menú上我有3个灰色选项（开始，继续和信用），我保留一个名为selected的var来标记选择哪个菜单（1,2或3）。当我按向上箭头时，我设置了选择 - 1，向下箭头选择+ 1，以便在选项之间导航。它工作得很完美，但由于变化速度无法选择一个选项，请亲自看看：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;

}

¿如何逐个选择菜单项？有没有办法在每次添加或删除选定的var时停止在代码中按下键？

Answer 1

我几周前遇到了同样的问题而且我找不到一个好的解决方案，所以我终于做了一个不太优雅的黑客...我允许每隔一段时间（200ms）更改一次菜单。我相信会有一个更好的解决方案但是这样的东西就是我正在使用的（检查控制台）：

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游戏开发 - 菜单中箭头移动速度过快

1 个答案: