[RESOLUÇÃO DIFERENTE E DÚVIDAS]

Olá Caio,

Sim, é possível simplificar o código para evitar repetições. Você pode criar funções mais genéricas e reutilizá-las tanto para o parágrafo quanto para a div que contém a imagem do trono. Vou te mostrar como fazer isso:

<script>
  const paragrafo = document.querySelector('p');
  const imagem = document.querySelector('.trono');

  function alterarTexto(element, novoTexto) {
    element.innerText = novoTexto;
  }

  paragrafo.addEventListener('mouseenter', () => {
    alterarTexto(paragrafo, 'O rei retornou.');
  });

  paragrafo.addEventListener('mouseleave', () => {
    alterarTexto(paragrafo, 'O inverno está chegando.');
  });

  imagem.addEventListener('mouseenter', () => {
    alterarTexto(paragrafo, 'O rei retornou.');
  });

  imagem.addEventListener('mouseleave', () => {
    alterarTexto(paragrafo, 'O inverno está chegando.');
  });
</script>

Neste código, criamos a função alterarTexto(element, novoTexto) que recebe como parâmetros o elemento (no caso, o parágrafo) e o novo texto que desejamos exibir. Dessa forma, podemos reutilizar essa função tanto para o parágrafo quanto para a div que contém a imagem do trono.

Em seguida, usamos as funções anônimas (arrow functions) como argumentos para os eventos mouseenter e mouseleave, e chamamos a função alterarTexto() dentro dessas funções, passando o parágrafo como elemento e o texto específico que queremos mostrar.

Dessa forma, o código fica mais conciso e reutilizável, evitando repetições desnecessárias. Espero que essa dica seja útil para você! Se tiver mais dúvidas ou precisar de ajuda adicional, estou à disposição.

Bom dia, boa tarde, boa noite.

Lendo sua resposta, eu fui revisar o meu código e percebi que acabei fazendo algumas funções desnecessariamente. No momento que estava elaborando, pensei que seria preciso ter duas funções direcionadas à imagem, erro meu.

Sua solução é the fato mais eficiente e também, graças a você, consegui rever meus erros que nem tinha reparado,

Obrigado pela ajuda.