how do i clone a random object from a list and make it visible using A-frame.js

Question

I'm using Javascript and A-frame. I want to be able to get a random block from the list of blocks and I want it to move down by 1. I can't seem to get any of the blocks to appear randomly on the load current. Below is the code I created to make my tetris board but it's currently giving me slight issues.

I am getting the error

  "message": "Uncaught SyntaxError: Unexpected end of input",

I'm not sure what that means?

var zigZag = document.querySelector("#zigZag");

var fork = document.querySelector("#fork");

var box = document.querySelector("#box");

var line = document.querySelector("#line");

var plane = document.querySelector("#plane");

//timer
// let hour = 0;
// let minute = 0;
// let second = 0;
// let millisecond = 0;

// let cron;

var newBlock, blocks, element, blocksOnPlane, planeBlock;

// Describe this function...

newBlock = [];

blocks = [zigZag, fork, line, box];

blocksOnPlane = [];
document.addEventListener("load", start);

function start() {
  while (true) {
    new Promise((res) => setTimeout(() => res(chooseBlock()), 10));
    console.log(newBlock.length);
    for (var element_index in newBlock) {
      element = newBlock[element_index];
      moveBlock(element);
      plane.detectCollisionsWith(newBlock[element_index], function (
        collidedObject
      ) {
        newBlock = collidedObject;
        newBlock.object3D.position.y = 0;
        blocksOnPlane.unshift(planeBlock);
        newBlock.shift();
      });
      // for (var element_index in blocksOnPlane) {
      //     element = blocksOnPlane[element_index];
      //     newBlock.detectCollisionsWith(planeBlock, function (collidedObject) {
      //         element.setY(element.getY() + 0)
      //         planeBlock = collidedObject;
      //         blocksOnPlane.unshift(planeBlock);
      //         newBlock.shift();

      //     })
      // }
    }
  }
}


document.addEventListener("keydown", function (event) {
  if (event.keyCode === 37) {
    element.object3D.position.x += -1;
  }
  //top
  else if (event.keyCode === 38) {
    element.object3D.position.x += 1;
  }
  //right
  else if (event.keyCode === 39) {
    element.object3D.position.x += 1;
  }
  //bottom
  else if (event.keyCode === 40) {
    element.object3D.position.x += -1;
  }
});

function moveBlock(element) {
  document.createTimer("timer1", 1 * 1000, function () {
    element.object3D.position.y += -1;
  });
}

function listsGetRandomItem(list, remove) {
  var x = Math.floor(Math.random() * list.length);
  if (remove) {
    return list.splice(x, 1)[0];
  } else {
    return list[x];
  }
}

// Describe this function...
function chooseBlock() {
  var tetrisBlock = document.clone(listsGetRandomItem(blocks, false));
  tetrisBlock.visible = true;
  tetrisBlock.object3D.position.x = 0;
  tetrisBlock.object3D.position.y = 7.5;
  tetrisBlock.object3D.position.z = -14;
  newBlock.unshift(tetrisBlock);
}

user_2425787 · Answer

Not sure where did you get document.clone(element) as the document object doesn't seem to have a cloning utility.

There is a element.cloneNode() method which works fine - we can use it within a custom component, which will also handle the entity lifecycle:

You can move it down with interval timeouts, or a tick / throttledTick handler. This could be done within a system, which would manage created entities (moving down, collisions).

A simple "moving down" version could look like this:

Sooner or later You'll probably run into performance issues (once there are several nodes) and it would be best to dive into mesh instancing (or at least check the performance guidelines)

how do i clone a random object from a list and make it visible using A-frame.js

1 Answers