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

刻度函数经常发生，因为它通常用于绘图。因此，如果您将代码放在那里，那么每隔几毫秒就会调用它，因此您只会消耗越来越多的事件监视器。

以下是它的文档： 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)
    })
  }
});

在A-Frame中实现分数计数器

1 个答案: