相位器游戏开发 - 菜单中箭头移动太快

Phaser Game Development - Movement with arrows too fast in Menu

本文关键字：中箭 移动 菜单 游戏 开发      更新时间：2023-09-26

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

在 menú 上，我有 3 个灰色选项（开始、继续和学分），我保留一个名为 selected 的 var 来标记选择了哪个菜单（1、2 或 3）。当我按下向上箭头时，我设置了选定的 - 1，向下箭头选择了 + 1，以便在选项之间导航。它工作得很好，但由于变化速度而无法选择一个选项，请自己看： 宇宙飞船

菜单的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;
}

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

几周前我遇到了同样的问题，但我没有找到一个好的解决方案，所以我终于做了一个不太优雅的黑客......我允许每隔一段时间（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>

相关文章：