Alterar sprite com movimento.

Olá João, tudo bem?

A imagem do personagem de costas foi nomeada zelda_up e a de frente zelda_down.

Para alterar o sprite do ator com a movimentação faremos alterações em 2 áreas do nosso código, imagens.js e ator.js.

Em imagens.js declaramos a variável spriteAtual, essa variável vai ser usada para alterar entre as 2 imagens que são carregadas na imagemAtor. Sendo a imagemAtor uma lista com 2 itens, o primeiro ocupando a posição 0 e o segundo a posição 1.

//Nova variável do sprite atual do personagem
let spriteAtual;

//Um load referente ao sprite em uso no momento e outro para a mudança de sprite usando uma lista
function preload(){
  spriteAtual = loadImage("imagens/zelda_up.png");
  imagemAtor = [loadImage("imagens/zelda_up.png"), loadImage("imagens/zelda_down.png")];

Em ator.js, modificamos a função mostraAtor() para mostrar o sprite atual, dessa forma o sprite do personagem sempre será a ultima imagem atribuída a esta variável:

//Mostra imagem do ator
function mostraAtor() {
  image(spriteAtual, xAtor, yAtor, 30, 30);
}

//Mostra spriteAtual
function mostraAtor() {
  image(spriteAtual, xAtor, yAtor, 30, 30);
}

Adicionamos na função de movimento do ator a mudança das imagens, por meio da variável spriteAtual mudaremos entre a primeira ou segunda imagem da lista dependendo da tecla pressionada:

function movimentaAtor() {
   if(keyIsDown(UP_ARROW)){
    yAtor -= 3;
//Mudamos o sprite atual para a primeira imagem na lista
    spriteAtual = imagemAtor[0];

  }

  if(keyIsDown(DOWN_ARROW)){
    if (podeSeMover()) {
    yAtor +=3
//Mudamos o sprite atual para a segunda imagem na lista
    spriteAtual = imagemAtor[1];
}
  }
}

Prontinho! Com isso modificamos o código para que seja alterada as imagens de acordo com o movimento, segue o código completo para visualização:

• Zelda na estrada;

Caso surja qualquer dúvida estamos à disposição, conte conosco!

Um bom dia e bons estudos.

Muito obrigado, amigo! Era exatamente isso que eu queria.