代码之家 › 专栏 › 技术社区 › Programador Adagal

Phaser游戏开发-菜单中箭头移动过快

phaser-framework game-engine html5-canvas javascript

Programador Adagal · 技术社区 · 9 年前

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

在我有3个灰色选项(开始、继续和学分)的男人身上,我保持一个名为selected的变量来标记选择了哪个菜单(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;

}

如何逐个选择菜单项?有没有一种方法可以在每次我添加或扣除所选变量时停止在代码中按下键?

1 回复 | 直到 9 年前

jolmos 9 年前

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