javascript - Quintus JavaScript 编程 GUI

Question

在我的简单 JavaScript/HTML 5 游戏中，我认为存在更新错误，但我不知道如何修复。问题是没有真正的错误，它只是没有按照我想要的方式响应代码。问题是，我想要一个屏幕 GUI，显示 map 上杀死的敌人数量。到目前为止，我已经有了 GUI 了。这是游戏图片:

/image/0rx4d.png [屏幕上显示 3 个敌人、右上角的 GUI 和玩家。]

现在的问题是，每当我杀死敌人时，数字就会增加，但当然不会。这是我的代码:

window.addEventListener("load",function() {

var EKL1 = 0; // Enemies Killed Level 1

var Q = window.Q = Quintus()
        .include("Sprites, Scenes, Input, 2D, Anim, Touch, UI, TMX")
        .setup({ maximize: true })
        .controls().touch()

Q.Sprite.extend("Player",{

  init: function(p){

    this._super(p, {
      sprite: "player",
      sheet: "player",
      speed: 150,

      x: 410,
      y: 90

    });

    this.add('2d, platformerControls, animation');


    },
    step: function(dt){
      if(this.p.vx > 0){
        this.play("walk_right");
        this.p.direction = "right";
      } else if(this.p.vx < 0){
        this.play("walk_left");
        this.p.direction = "left";
      } else {
        this.play("stand_" + this.p.direction);// + this.p.direction > 0 ? "right" : "left");
      }

    }


});

Q.Sprite.extend("Enemy",{
  init: function(p) {
    this._super(p, { 
      sprite: "enemy",
      sheet: "enemy",
      vx: 100 
    });

    // Enemies use the Bounce AI to change direction 
    // whenver they run into something.
    this.add('2d, aiBounce');

    // Listen for a sprite collision, if it's the player,
    // end the game unless the enemy is hit on top
    this.on("bump.left,bump.right,bump.bottom",function(collision) {
      if(collision.obj.isA("Player")) { 
        //Q.stageScene("endGame",1, { label: "You Died" }); 
        collision.obj.destroy();
      }
    });

    // If the enemy gets hit on the top, destroy it
    // and give the user a "hop"
    this.on("bump.top",function(collision) {
      if(collision.obj.isA("Player")) { 
        this.destroy();
          collision.obj.p.vy = -300;
          //Increasing Enemies killed on destroy
          EKL1++;
        }
    });
  }
});

Q.scene("UIContainers", function(stage){
  var container = stage.insert(new Q.UI.Container({
      fill: "gray",
      border: 2,
      shadow: 3,
      shadowColor: "rgba(0,0,0,0.5)",
      y: Q.height/10,
      x: Q.width/1.25
    }));

   stage.insert(new Q.UI.Text({ 
      label: "Enemies killed: " + EKL1.toString(),
      color: "black",
      x: 0,
      y: 0
    }),container);

    container.fit(20,20);
});

Q.scene("level1", function(stage){
  stage.insert(new Q.Repeater({ asset: "background-wall.png", speedX: 0.5, speedY: 0.5 }));
  Q.stageScene("UIContainers", 1);

  stage.collisionLayer(new Q.TileLayer({ dataAsset: 'level.json', sheet: 'tiles' }));


  var player = stage.insert(new Q.Player());

  stage.insert(new Q.Enemy({ x: 700, y: 0 }));
  stage.insert(new Q.Enemy({ x: 800, y: 0 }));
  stage.insert(new Q.Enemy({ x: 500, y: 0 }));

  stage.add("viewport").follow(player);

});

Q.load("sprites.png, sprites.json, enemy.png, enemy.json, level.json, tiles.png, background-wall.png",  function(){
  Q.sheet("tiles","tiles.png", { tilew: 32, tileh: 32 });
  Q.compileSheets("sprites.png", "sprites.json");
  Q.compileSheets("enemy.png", "enemy.json");
  Q.animations("player", {
    walk_right: {frames: [0, 1, 2, 3], rate: 1 / 4, flip: false, loop: true }, 
    walk_left: {frames: [0, 1, 2, 3], rate: 1 / 4, flip:"x", loop: true },
    stand_right: {frames: [0], rate: 1 / 4, flip: false, loop: true},
    stand_left: {frames: [0], rate: 1 / 4, flip: "x", loop: true}


  });

  Q.stageScene("level1");
});




});

代码当然是用 JavaScript 编写的，但它由 Quintus 游戏引擎运行，可以在此处找到:http://html5quintus.com/

这就是我试图让它工作的方式，所以我创建了一个名为 EKL1(敌人被杀死级别 1)的全局变量，它返回/等于 0。这个全局变量在底部的 Enemy 函数中访问，其中玩家与敌人发生碰撞。它说如果玩家击中敌人的顶部，敌人就会被摧毁。所以我所做的就是在 if 语句中添加以下内容:EKL1++ 来摧毁敌人。我将其转换为字符串并将其运行到控制台，它成功了!我杀了一个敌人，它显示 1，杀了另一个敌人，然后显示 2，最后我杀了最后一个，它显示 3。现在我当然必须将其实现到屏幕上的 GUI 中。所以我所做的就是创建一个 UIContainer 函数来保存我所有的 GUI。我在容器上插入了一个标签，如您所见，然后将标签文本设置为:

“敌人被杀:” + EKL1.toString();

这不需要字符串变量，将整数转换为字符串。我以为这会起作用，但是当我杀死一个怪物时它并没有上升。我相信其原因是容器在屏幕上绘制一次，因此它不会更新。这意味着当我杀死怪物时它不会更新容器。我不知道如何实现更新功能或其他东西来使其正常工作。

如果有人知道解决此问题的答案，请回复!我希望这不是一个很难解决的问题。

感谢您的宝贵时间，

~ jackson ·万迪

Answer 1

您的字符串 "Enemies killed: " + ELK1.toString()将进行评估，评估后对 ELK 的任何更改都不会对标签产生影响。但不用担心，有解决方案。 Quintus 有一个“游戏状态”存储，名为 Q.state 。还有一些事件处理，以防您的游戏状态发生变化。我在下面添加了一些代码，这应该为您提供有关在何处更改代码的粗略指导。

var Q = // ...

// 1. after initialization of Q, create Q.state containing 'enemiesKilled'
Q.state.reset({
  enemiesKilled: 0
});

// ...

// 2. one change in your Enemy Sprite is needed...
Q.Sprite.extend("Enemy",{
  // ...
  this.on("bump.top",function(collision) {
    if(collision.obj.isA("Player")) { 
      this.destroy();
      collision.obj.p.vy = -300;

      // 3. increment your state variable
      Q.state.inc("enemiesKilled");
    }
  });
}

// ...

// 4. extend Q.UI.Text class...
Q.UI.Text.extend("EnemiesKilledLabel", {
  init: function(p) {
    this._super({
      label: "Enemies Killed: 0",
      // ...
    });

    // 5. add a listener for changes on your state...
    Q.state.on("change.enemiesKilled",this,"enemiesKilledChange");
  },

  // 6. ...and the handler
  enemiesKilledChange: function(enemiesKilled) {
    this.p.label = "Enemies Killed: " + enemiesKilled;
  }
};  
// ... etc.

请注意始终使用Q.state.set(...) , Q.state.get(...)或像Q.state.inc(...)这样的便捷方法，这样 Quintus 就可以触发 change.<state>事件。

最好看看http://html5quintus.com/guide/core.md ，“游戏状态”部分。