javascript - Aframe - 选择随机实体(从 3 个选项中)并设置属性

Question

编辑:感谢 Piotr here 的帮助是一个工作示例。它从 JSON 数组中获取两个随机标题，并一次仅显示一个(通过随机选择过程)。然后，如果用户单击属于框中正确图像的标题，则字体会变为绿色，否则，如果用户单击与图像不匹配的游戏的标题，则文本会变为红色。很棒的东西。这是一些代码。

  AFRAME.registerComponent('json-text-loader', {
  schema: {},
  init: function () {
    var url = 'json/text.json';
    var parentEL = this.el;

    var request = new XMLHttpRequest();
    request.open( 'GET', url, true );
    request.addEventListener( 'load', function ( event ) {

      var game = JSON.parse( event.target.response )
      var keys = Object.keys(game);
      var random = game[keys.length * Math.random() << 0];
      var trivia = random.Title
      var game2 = JSON.parse( event.target.response )
      var keys2 = Object.keys(game);
      var random2 = game[keys.length * Math.random() << 0];
      var trivia2 = random2.Title
      var textEntity = document.querySelector('#text');
      var gurl = random.Imageurl
      var sceneEl = document.querySelector('a-scene');
      sceneEl.querySelector('a-box').setAttribute('material', {src:gurl}); 
      textEntity.setAttribute("visible", "false")       

    let visibleRandom = Math.floor(Math.random() * 3); // THIS ELEMENT WILL BE VISIBLE
    let anwserRandom = Math.floor(Math.random() * 3); // THIS IS THE ELEMENT WITH THE CORRECT OPTION

  let children = Array.from(parentEL.children); 
  children.forEach((el, index) => {

if (index == visibleRandom) {
  el.setAttribute("visible", "true")
  el.setAttribute("value", trivia2)

} else {
  el.setAttribute("visible", "false")
}
if (index == anwserRandom) {
  el.setAttribute("value", trivia)
} 
 el.addEventListener("click", (e) => {
  if(el.getAttribute("value") == trivia) {
    el.setAttribute("color", "green")
  } else {
    el.setAttribute("color", "red")
  }
});
});
});
    request.send( null );
  }
});

原文:希望有人能提供帮助(如果可能的话)。我的场景中需要一些代码来随机选择三个 var textEntity = document.querySelector('#text'); 实体之一以使其在我的场景中可见，并且如果随机选择的元素发生成为第一个 (textEntity1) 并被用户点击，字体颜色变为绿色。 textEntity1 的值始终是相同的，所以我不知道这是否更容易引用？

textEntity1.setAttribute("值", option1)

“Else”部分(如果这需要“if 语句”)适用于可见实体为 textEntity2/3 并被单击的情况，在这种情况下，字体颜色应更改为红色。

当前(有限)代码:

     // select random entity from below and set its attribute as visible                                                   
      var textEntity1 = document.querySelector('#text');
      var textEntity2 = document.querySelector('#text2');
      var textEntity3 = document.querySelector('#text3');

     // trigger event (e.g color change) if visible entity is 'textEntity1' and gets clicked.          
      sceneEl.querySelector('#text').addEventListener('click', function () {
      el.setAttribute('color', '#ffff00');
      });
      } );                                                  

期待看看是否有解决方案。到目前为止我已经学会了怎么做random用于设置对象位置的代码，但这似乎比这更复杂一些。

Answer 1

这里有一些机制。让我解释一下如何进行“测验”部分，我认为它也会解释可见性。

这可能不是最好的解决方案，但看起来很整洁。 让我们将三个选项放在一个空实体中。父级将处理逻辑。

<a-entity logic>
  <a-box position="0 0 1></a-box>
  <a-box position="0 0 0></a-box>
  <a-box position="0 0 -1></a-box>
</a-entity>

酷。现在让我们看看 logic 的内部成分。 我需要一个 0-2 之间的随机整数，即 Math.random()返回0-1(不包括1)，所以我需要制作Math.floor(Math.random()*3)) 。 我还需要获取引用资料。因为它们是children实体的，我不需要 document.querySelector() 。我将获取该实体的所有子级并将它们转换为数组:

AFRAME.registerComponent("logic", {
  init: function() {
     let anwser = Math.floor(Math.random() * 3);
     let children = Array.from(this.el.children);
  }
});

现在，让我们为它们提供事件监听器，在其中我们检查单击了哪个框:

children.forEach((el, index) => {
    el.addEventListener("click", (e) => {
      if (index == anwser) {
        el.setAttribute("color", "green")
      } else {
        el.setAttribute("color", "red")
      }
});

所以，我有这些框，我有一个随机答案，如果单击该答案，该框将变成绿色。

此外，如果您在其中放置 el.setAttribute('visibility', 'false')，则可以将另一个随机答案隐藏起来。

<小时/> 在我的fiddle里查看一下。答案打印在控制台中。

更新

如果您已经有来自 JSON.parse 的 anwser，您只需检查它是否适合可见实体:

children.forEach((el, index) => {
    if (index == anwser) {
      el.setAttribute("visible", "true")
    } else {
      el.setAttribute("visible", "false")
    }
    el.addEventListener("click", (e) => {
      if(el.getAttribute("value") == option1) {
        el.setAttribute("color", "green")
      } else {
        el.setAttribute("color", "red")
      }
    });
}

查看更新后的fiddle .