JavaScript

const controle = document.querySelectorAll('[data-controle]');
const estatisticas = document.querySelectorAll('[data-estatistica]');
const roboCor = document.querySelector('#robotron'); // Foi adicionado o id robotron dentro da tag img

let cliques = 0;

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 cores = [
  'img/robotronVermelho.png',
  'img/robotronAzul.png',
  'img/robotronBranco.png',
  'img/robotronRosa.png',
  'img/robotronPreto.png',
  'img/robotronAmarelo.png',
];

roboCor.addEventListener('click', (evento) => {
  cliques += 1;
  if (cliques == 6) {
    cliques = 0;
  }
  trocarCor(cores[cliques]);
});

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

function manipulaDados(operacao, controle) {
  const peca = controle.querySelector('[data-contador]');

  if (operacao == '-') {
    peca.value = parseInt(peca.value) - 1;
  } else {
    peca.value = parseInt(peca.value) + 1;
  }
}

function atualizaEstatisticas(peca) {
  estatisticas.forEach((elemento) => {
    /* 'valorEstatistica' = valorNumericoEstatisca + peca(braços,foguete...) 
    da lista de pecas na linha 5 no item (força,poder...) */
    elemento.textContent =
      parseInt(elemento.textContent) +
      pecas[peca][elemento.dataset.estatistica];
  });
}

function trocarCor(cor) {
  roboCor.setAttribute('src', cor);
}