Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

254
Visualizações
Js random movement foreach element using switch

The problem I tried to using switch for random movement it works! but all the elements moving the same movement, not random, so I want each of them moves random

The output: https://duck-hunt.ahmedbr123.repl.co/

REMEMBER

I want to solve the problem by using switch

The code:

 for (var n = 0; n < boxr.length; ++n)  {
 let lol =  Math.floor(Math.random() * 8) + 1
  let dml1 = parseInt(window.getComputedStyle(boxr[n]).getPropertyValue("left"));
  let dmt1 = parseInt(window.getComputedStyle(boxr[n]).getPropertyValue("top"));
    // I sit by myself coding to the moon trying get to you
switch (lol) {
  case 1:
    boxr[n].style.transform = 'translate(-50%,-50%)'
    boxr[n].style.animation = 'animate 500ms steps(3) infinite'
    boxr[n].style.left = dml1 + 2 + 'px'
    break;
  case 2:
    boxr[n].style.transform = 'translate(-50%,-50%) scaleX(-1)'
    boxr[n].style.animation = 'animater 500ms steps(3) infinite'
    boxr[n].style.left = dml1 - sms + 'px'
    break;
  case 3:
     boxr[n].style.transform = 'translate(-50%,-50%)'
     boxr[n].style.animation = 'animatel 500ms steps(3) infinite'
     boxr[n].style.top = dmt1 - sms + 'px'
    break;
  case 4:
    if(boxr[n].style.animation = 'animatel 500ms steps(3) infinite' || boxr[n].style.animation == 'animate 500ms steps(3) infinite') {
    boxr[n].style.animation = 'animate 500ms steps(3) infinite'
    } else if(boxr[n].style.transform = 'translate(-50%,-50%) scaleX(-1)' && boxr[n].style.animation == 'animateS 500ms steps(3) infinite') {
      boxr[n].style.transform = 'translate(-50%,-50%) scaleX(-1)'
      boxr[n].style.animation = 'animate 500ms steps(3) infinite'
    }
    boxr[n].style.top = dmt1 + sms + 'px'
    break;
  case 5:
    boxr[n].style.transform = 'translate(-50%,-50%)'
    boxr[n].style.animation = 'animateS 500ms steps(3) infinite'
    boxr[n].style.left = dml1 + sms + 'px'
    boxr[n].style.top = dmt1 - sms + 'px'
    break;
  case 6:
    boxr[n].style.transform = 'translate(-50%,-50%) scaleX(-1)'
    boxr[n].style.animation = 'animateS 500ms steps(3) infinite'
    boxr[n].style.top = dmt1 - sms + 'px'
    boxr[n].style.left = dml1 - sms + 'px'
    break;
  case 7:
    boxr[n].style.transform = 'translate(-50%,-50%)'
    boxr[n].style.animation = 'animate 500ms steps(3) infinite'
    boxr[n].style.left = dml1 + sms + 'px'
    boxr[n].style.top = dmt1 + sms + 'px'
    break;
  case 8:
    boxr[n].style.transform = 'translate(-50%,-50%) scaleX(-1)'
    boxr[n].style.animation = 'animate 500ms steps(3) infinite'
    boxr[n].style.left = dml1 - sms + 'px'
    boxr[n].style.top = dmt1 + sms + 'px'
    break;
}

Edit:

My problem is similar to this Random color on different div's

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

You need to set lol to a random number each time through the loop, so that each element gets different random movements.

for (var n = 0; n < boxr.length; ++n) {
  let dml1 = parseInt(window.getComputedStyle(boxr[n]).getPropertyValue("left"));
  let dmt1 = parseInt(window.getComputedStyle(boxr[n]).getPropertyValue("top"));
  let lol = Math.floor(Math.random() * 8) + 1
  switch (lol) {
    case 1:
      boxr[n].style.transform = 'translate(-50%,-50%)'
      boxr[n].style.animation = 'animate 500ms steps(3) infinite'
      boxr[n].style.left = dml1 + 2 + 'px'
      break;
    case 2:
      boxr[n].style.transform = 'translate(-50%,-50%) scaleX(-1)'
      boxr[n].style.animation = 'animater 500ms steps(3) infinite'
      boxr[n].style.left = dml1 - sms + 'px'
      break;
    case 3:
      boxr[n].style.transform = 'translate(-50%,-50%)'
      boxr[n].style.animation = 'animatel 500ms steps(3) infinite'
      boxr[n].style.top = dmt1 - sms + 'px'
      break;
    case 4:
      if (boxr[n].style.animation = 'animatel 500ms steps(3) infinite' || boxr[n].style.animation == 'animate 500ms steps(3) infinite') {
        boxr[n].style.animation = 'animate 500ms steps(3) infinite'
      } else if (boxr[n].style.transform = 'translate(-50%,-50%) scaleX(-1)' && boxr[n].style.animation == 'animateS 500ms steps(3) infinite') {
        boxr[n].style.transform = 'translate(-50%,-50%) scaleX(-1)'
        boxr[n].style.animation = 'animate 500ms steps(3) infinite'
      }
      boxr[n].style.top = dmt1 + sms + 'px'
      break;
    case 5:
      boxr[n].style.transform = 'translate(-50%,-50%)'
      boxr[n].style.animation = 'animateS 500ms steps(3) infinite'
      boxr[n].style.left = dml1 + sms + 'px'
      boxr[n].style.top = dmt1 - sms + 'px'
      break;
    case 6:
      boxr[n].style.transform = 'translate(-50%,-50%) scaleX(-1)'
      boxr[n].style.animation = 'animateS 500ms steps(3) infinite'
      boxr[n].style.top = dmt1 - sms + 'px'
      boxr[n].style.left = dml1 - sms + 'px'
      break;
    case 7:
      boxr[n].style.transform = 'translate(-50%,-50%)'
      boxr[n].style.animation = 'animate 500ms steps(3) infinite'
      boxr[n].style.left = dml1 + sms + 'px'
      boxr[n].style.top = dmt1 + sms + 'px'
      break;
    case 8:
      boxr[n].style.transform = 'translate(-50%,-50%) scaleX(-1)'
      boxr[n].style.animation = 'animate 500ms steps(3) infinite'
      boxr[n].style.left = dml1 - sms + 'px'
      boxr[n].style.top = dmt1 + sms + 'px'
      break;
  }

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda