在A框架中实现得分计数器 [英] Implementing a score counter in A-Frame

问题描述

我正在尝试在Aframe场景中实现一个计分器，到目前为止，我已经此代码，但无效。有人可以看看下面的代码并发现我的错误吗？非常感谢。 D

I'm trying to implement a score counter in my Aframe scene, and so far I have this code but it isn't working. Would someone be able to take a look at the code below and spot the mistake I'm making? Many Thanks. 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);   
}

}）;

推荐答案

壁虱函数确实经常发生，因为它通常用于绘图。因此，如果将代码放在此处，则每毫秒调用一次等等，所以您只是在消耗越来越多的事件监听器。

The tick function happens really often, since it's usually used for drawing. So if you put your code there, your calling it every millisecond or so, and so you're just consuming more and more eventlisteners.

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

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

That said, You'll want to put that code in the init function since it only occurs one time.

也可以在代码中使用 ++ 来增加分数，但是将分数设置为零之后即可。

Also in your code your incrementing the score with ++ but right after your setting the score to zero.

您能否解释一下通过单击框来实现的目标？

Could you explain what you are trying to achieve with the click on the box?

已更新：

Updated:

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

Here is a basic working example: https://glitch.com/edit/#!/a-frame-scoreboard

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

Simply increment the score and set the new text value.

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框架中实现得分计数器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！