Question

编辑：感谢Piotr here的帮助，这是一个有效的例子。它从JSON数组中获取两个随机标题，并且一次只显示一个（通过随机选择过程）。然后，如果用户单击属于框上正确图像的标题，则字体变为绿色，否则如果他单击与图像不匹配的游戏的标题，则文本变为红色。惊人的东西。这是一些代码。

var textEntity = document.querySelector('#text');

原文：希望有人可以协助解决这个问题（如果可能的话）。我需要在我的场景中使用一些代码来随机选择三个textEntity1.setAttribute("value", option1)实体中的一个以在我的场景中显示，如果随机选择的元素恰好是第一个（textEntity1）并被用户点击字体颜色变为绿色。 textEntity1的值总是一样的，所以我不知道这是否更容易引用？

// 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'); }); } );

'Else'部分（如果这需要'if语句'）用于实体可见的是textEntity2 / 3并且被点击，在这种情况下字体颜色应该变为红色。

当前（有限）代码：

f(n)

期待看看是否有解决方案。到目前为止，我已经学会了如何设置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")
      }
});

所以，我有盒子，我有一个随机的anwser，如果点击了anwser，盒子将变为绿色。

此外，如果您放置el.setAttribute('visibility', 'false')，您可以将另一个随机的anwser变为不可见

<小时/> 在我的fiddle中查看。 anwser打印在控制台中。

<强>更新

如果您已经有来自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。

Aframe - 选择随机实体（来自3个选项）并设置属性

1 个答案: