How to make a character move in JavaScript?

September 30, 2022

To make a character move in JavaScript, use CSS transitions.

So if this is your character, represented by an image:

<img id="character" width="64" height="64" src="https://whaa.dev/favicon.png">

Then you can make it move with this JavaScript:

const character = document.getElementById('character');
character.style.transition = 'transform 1s ease-out';
character.style.transform = 'translateX(100px) translateY(30px)';