@CodeOscar in draw() you say pacman.animate(data, rightImage);
, which will only animate the rightImage and ignore anything that happens inside the keyPressed function. I recommend making another image, imag or something and in function keyPressed do:
function keyPressed() {
if (keyCode === RIGHT_ARROW) {
imag = rightImage;
//pacman.animate(data, rightImage);
pacman.dir(1, 0);
} else if (keyCode === LEFT_ARROW) {
imag = leftImage;
//pacman.animate(data, leftImage);
pacman.dir(-1, 0);
} else if (keyCode === UP_ARROW) {
imag = upImage;
//pacman.animate(data, upImage);
pacman.dir(0, -1);
} else if (keyCode === DOWN_ARROW) {
imag = downImage;
//pacman.animate(data, downImage);
pacman.dir(0, 1);
}
}
In draw you can now say: pacman.animate(data, imag);
and it should update with that image
now it still does not animate properly, but that is because in the pacman.js on line 18:
animation.push(img);
will only add extra images which makes the array of animations longer and longer. you need to clear that out.
Probably when you want to select another image (so in function keyPressed()).
I’m not a p5.js master so I can’t guarantee this will make it work, or tell you how to, but this is definitely some things that are wrong.