1
resposta

Minha solução!

Criei um array com todas as cores, com um addEventListener no robo a cada click percorro esse array mudando a src da img, com o auxilio de uma variavel contadora e template string!

const controlesDeAjuste = document.querySelectorAll('[data-controle]');
const estatisticas = document.querySelectorAll('[data-estatistica]');
const robo = document.querySelector('.robo');

const pecas = {
  "bracos": {
      "forca": 29,
      "poder": 35,
      "energia": -21,
      "velocidade": -5
  },

  "blindagem": {
      "forca": 41,
      "poder": 20,
      "energia": 0,
      "velocidade": -20
  },
  "nucleos":{
      "forca": 0,
      "poder": 7,
      "energia": 48,
      "velocidade": -24
  },
  "pernas":{
      "forca": 27,
      "poder": 21,
      "energia": -32,
      "velocidade": 42
  },
  "foguetes":{
      "forca": 0,
      "poder": 28,
      "energia": 0,
      "velocidade": -2
  }
}

const listaDeCores = ["preto", "amarelo", "azul", "rosa", "vermelho", "branco"];
let contadorDeCores = 0


controlesDeAjuste.forEach(controle => {
  controle.addEventListener('click', (evento) => {
      manipularDados(controle.dataset.controle, controle.parentNode);
      atualizaEstatisticas(evento.target.dataset.peca);
  });
})

robo.addEventListener('click', (evento) => {
      mudarCor();
})

function manipularDados(operacao, contadorDePecas) {

  const marcadorDePeca = contadorDePecas.querySelector('[data-contador]')

  if(operacao === "+" && marcadorDePeca.value < 100) {
    marcadorDePeca.value++
  }
  if(operacao === "-" && marcadorDePeca.value > 1) {
    marcadorDePeca.value--
  }
 }

 function atualizaEstatisticas(peca) {
    estatisticas.forEach((estatistica) => {
        estatistica.textContent = parseInt(estatistica.textContent) + pecas[peca][estatistica.dataset.estatistica];
    })
 }

 function mudarCor() {
    if(contadorDeCores < listaDeCores.length) {
      robo.src = `http://127.0.0.1:5500/img/robotron-${listaDeCores[contadorDeCores]}.png`;
      contadorDeCores++
    } else {
      contadorDeCores = 0;
    }
    console.log(contadorDeCores);
 }
1 resposta

Oi Daniel, tudo bem?

Parabéns por praticar! E muito obrigada por compartilhar com a gente o seu código, com certeza vai ajudar outras pessoas que possam ter dificuldade em fazer.

Um abraço e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software