javascript - 在 A 框架中实现计分器

Question

我正在尝试在我的 Aframe 场景中实现一个分数计数器，到目前为止我已经 this代码，但它不起作用。有人可以看一下下面的代码并发现我所犯的错误吗？非常感谢。 d

 AFRAME.registerComponent('score counter', {
schema: {
  el: {
    type: 'selector'
  },
  score:{
    type: 'int',
    default: 0
  },

tick: function () {
  var sceneEl = document.querySelector('a-scene'); 
  var el1 = this.el;
  var el2 = this.data.el;
  var entity = document.querySelector('#score');
      sceneEl.querySelector('a-box').addEventListener('click', function () {
      this.data.score++;
      this.data.score = 0;
      entity.emit('updateScore');
      AFRAME.utils.entity.setComponentProperty(entity, 'text.value', "score \n" + this.data.score);   
}

});

Answer 1

tick 函数经常发生，因为它通常用于绘图。因此，如果您将代码放在那里，那么您大约每毫秒调用一次它，因此您只会消耗越来越多的事件监听器。

这是它的文档: https://aframe.io/docs/0.7.0/introduction/writing-a-component.html#defining-a-behavior-with-the-tick-handler

也就是说，您需要将该代码放入 init 函数中，因为它只出现一次。

还在您的代码中，您使用 ++ 增加分数，但在将分数设置为零之后。

您能解释一下您想通过单击该框来实现什么目的吗？

更新:

这是一个基本的工作示例: https://glitch.com/edit/#!/a-frame-scoreboard

只需增加分数并设置新的文本值即可。

AFRAME.registerComponent('score-counter', {
  schema: {
    el: {
      type: 'selector'
    },
    score:{
      type: 'int',
      default: 0
    },
  },

  init: function () {
    var sceneEl = document.querySelector('a-scene'); 
    var scoreBoard = document.querySelector('#score');

    sceneEl.querySelector('a-box').addEventListener('click', () => {
      this.data.score++;
      var newScore = 'Score: ' + this.data.score
      scoreBoard.setAttribute('text', 'value',  newScore)
    })
  }
});