Ahora mismo tengo un array de 6 objetos, los cuales son estos:
window.addEventListener('load',()=>{
const ent = [
entity( 'pj1' ,9999, 255, 255, 255, 100, 1, 1.8),
entity( 'pj2' ,9999, 255, 255, 255, 100, 1, 2.4),
entity( 'pj3' ,9999, 255, 255, 255, 100, 1, 1.95),
entity( 'ARMA Rubi' ,800000, 180, 200, 180, 100, 1, 0.8),
entity( 'Arm 1' ,180000, 120, 100, 0, 100, 1, 1.55),
entity( 'Arm 2' ,180000, 60, 120, 120, 100, 1, 1.45)
];
selectTurn(ent);
});
function entity(name, hp, atk, def, mag, agi, vel, trn){
return {
name : name,
hp : hp,
atk: atk,
def: def,
mag: mag,
agi: agi,
vel : vel,
trn : trn
};
}
Cada objeto contiene los atributos de los 3 personajes y de los 3 enemigos. De dichos atributos, utilizo vel y trn para seleccionar el turno de cada uno, haciendo que vel sume constantemente el valor de trn, al ser dispares, uno llegará antes que otros.
El turno llega cuando el atributo vel de cualquier entidad llega a 100, le tocaría el turno:
function selectTurn(arg){
let turn = setInterval(function(){
for(i=0;i<arg.length;i++){
arg[i].vel += arg[i].trn;
document.querySelectorAll('.turn-rest')[i].style.width=arg[i].vel+'px';
if(arg[i].vel >= 100){
document.querySelectorAll('.turn-rest')[i].style.width='0px';
clearInterval(turn);
arg[i].vel = 1;
}
}
},100);
}
Para aclarar, .turn-rest
es la clase de la barra de tiempo del turno. Dicha barra añade arg[i].vel en pixeles, ya que es el valor que se va incrementando constantemente hasta cierto punto.
Sumo y adiciono el valor vel ya que cuando le toque el turno a uno, y su velocidad se resetee, las demás seguirán teniendo la vel donde la dejaron.
Pero como recomendacion me han dicho que no use un querySelectorAll dentro del bucle for, aunque vaya acompañado del [i], no entiendo el por qué de la recomendación.
Otra opción es como el amigo @Pablo Lozano sugiere, con un forEach:
function selectTurn(arg) {
const elements = document.querySelectorAll('.turn-rest');
const turn = setInterval(() => {
arg.forEach((item, index) => {
item.vel++;
if (item.vel >= 100) {
item.vel = 0;
}
elements[index].style.width = item.vel + 'px';
}, 100);
});
}
Aquí tengo la duda, entiendo que es mejor esta opción, pero, ¿por qué concretamente?
Es decir, entiendo que asignar una variable, lo que lee el ordenador, es el valor de la variable es decir, da igual poner:
const element = document.querySelector('.clase')
element[index]
Que poner directamente:
document.querySelectorAll('.clase')[index]
¿No sería lo mismo computacionalmente?