How to move an image in css/html/js?-CodePudding

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

My HTML is below so far, very empty because of how stuck I am. I have not yet found an image but will put that matter in my own hands after I am done with this.

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 have found a way to do this with a square drawn with the canvas element (https://www.w3schools.com/graphics/tryit.asp?filename=trygame_controllers_keys) but since I don't know javascript, I couldn't figure out how to change the code accordingly to my code. The actual website I am coding's link is here, press the play button, then chose the guy with the hammer:https://ninjago-game-of-masks.ayushgudipati.repl.co/

I'm not exactly sure what I'm doing, I just started learning to code and am only 13. Any suggestion is helpful, thanks!

CodePudding user response：

I'm not sure exactly how you're trying to go about this, I'm assuming you haven't attempted to implement the movement yet? But if you`re trying to avoid frameworks I would suggest using javascript events:
https://www.w3schools.com/js/js_events.asp
This is a way to get input from the user and have it dynamically manipulate the DOM (change things in your program like moving an image). This isnt a full solution on how to implement this, but more of a push in the right direction. If you just want to make a game, using a Javascript framework such as p5.js makes this a lot easier. If you want to learn about that Coding Train on youtube: https://www.youtube.com/watch?v=HerCR8bw_GE&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA has a ton of tutorials on this sort of thing.

CodePudding user response：

You can try this, as per your code view, and you will get result, and try to use larger image, like 1920*1080, or something like this, so that whole page will be covered.

body
{
   padding: 0px 30px 0px 30px;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-image: url("bg2.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}