JavaScript – How to move image in CSS / HTML / JS?

I’m making a game where you use the arrow keys to the left, right, jump and roll.

My HTML is still down, very empty because of how stuck I am. I haven’t received any pictures yet but I will take matters into my own hands. After its completion..

html {
  background: url("Game_city.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

img {
  background-color: transparent;
}

#imgcole {
  position: absolute;
  bottom: opx;
  height: 100px;
}

<center>
  <span id="pos"></span>
  <img id="imgcole" src="" alt="cole" style:width="300px" , height="300px">
</center>

I’ve found a way to do this with a square designed with the canvas element (https://www.w3schools.com/graphics/tryit.asp?filename=trygame_controllers_keys) but since I don’t know JavaScript, this So I couldn’t figure out how to change the code according to my code. Here is the link to the original website I am coding, press the play button, then select the boy with the hammer: https: //ninjago-game-of-masks.ayushgudipati.repl.co/

I’m not sure what I’m doing, I’ve just started learning code and I’m only 13 years old. Any suggestions are helpful, thanks!