How to move an image with HTML and JS

Question

I'm trying to move an image within a set radius of 100 pixels. I'm having some trouble getting it to work.

I'm using setInterval to make it repeatedly move and random to set where it moves.

Full JS code:

function start () {
  const imgH = 111;
  const imgW = 112;
  const scrnH = screen.availHeight;
  const scrnW = screen.availWidth;
  var objX = scrnW/2 - imgW/2;
  var objY = scrnH/2 - imgH/2;
  document.getElementById("monka").style.top = objY + "px";
  document.getElementById("monka").style.left = objX + "px";
  var x = document.getElementById("monka").style.left;
  var y = document.getElementById("monka").style.top;
  var deltaX = 0;
  var deltaY = 0;
  function move () {
    if ((Math.sqrt(x ** 2 + y ** 2) >= 100) || (deltaX == 0 && deltaY == 0)) {
      deltaX = -1 * deltaX; 
      deltaY = -1 * deltaY;   
    } else {
      x += deltaX;
      y += deltaY;     
      document.getElementById("monka").style.left = x;  
      document.getElementById("monka").style.top = y;
      deltaX = Math.ceil(Math.random() * 50) - 25;
      deltaY = Math.ceil(Math.random() * 50) - 25;
    }
  }
  setInterval("move()", 100);
}

Full HTML code:

<!DOCTYPE html>
<html>
  <head>
    <title>Random Movement</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script src="script.js"></script>
  </head>
  <body onLoad="start();">
    <img src="monkaW.png" id="monka" style="">
  </body>
</html>

There are a few problems here, but I think your biggest one might be the logic. The line if ((Math.sqrt(x ** 2 + y ** 2) >= 100) || (deltaX == 0 && deltaY == 0)) is going to be always true at the start because you define deltaX and deltaY as 0. Since all you do is change the signs, no moving ever happens. Tell me what you are trying to do in more detail and I'll try and walk you through it. — ecg8
– ecg8, Commented May 28, 2019 at 22:50
@ecg8 I'm trying to move an image randomly within a set area that is a circle of radius 100 pixels. — fyfles
– fyfles, Commented May 28, 2019 at 22:58
What are you trying to accomplish when you flip the signs on deltaX and deltaY? Are you trying to move the picture in the opposite direction? — ecg8
– ecg8, Commented May 28, 2019 at 23:14
@ecg8 I'm trying to prevent the image from going out of the boundary. — fyfles
– fyfles, Commented May 28, 2019 at 23:18
I don't know if any of these things might be the problem, but it will surely help you code cleaner: 1. Don't use var and const together, it's good that you use ES6, so use const and let, no more var. 2. acquire 'monka' once in a variable. const monka = document.getElementById("monka") then you can use monka.style.left. 3. Not a big fan of the body onLoad= syntax, I suggest you move your script to the end of your body, that way you don't need to wrap it all in a function. 4. setInterval should be a callback, in ES6: setInterval(() => {move()}, 100) — Robbeoli
– Robbeoli, Commented May 28, 2019 at 23:19

ecg8 · Accepted Answer · 2019-05-28 23:51:57Z

Try this on for size. I found several things with your code that I would have done differently, so I heavily commented the answer.

//I moved some of your declarations outside the function to make them global. I don't think the way you set up your move function inside your start function is a good practice. Keep things separated and modular as much as possible
var monka = document.getElementById("monka");
var deltaX = 0;
var deltaY = 0;
//I changed x and y to be centerX and centerY, which is a more descriptive name for them, as they will be the starting x and y values for the picture
var objX, objY, centerX, centerY;

function start () {
  //I'm using document.body.clientHeight and Width instead of screen.AvailHeight and Width because those values don't work if you have an iframe or a window of less than maximum screen size
  const scrnH = document.body.clientHeight;
  const scrnW = document.body.clientWidth;
  const imgH = 111;
  const imgW = 112;
  objX = scrnW/2 - imgW/2;
  objY = scrnH/2 - imgH/2;
  monka.style.top = objY + "px";
  monka.style.left = objX + "px";
  //At the beginning I need to explicitly set these variables to the same value so I can do math with thme later
  centerX = objX;
  centerY = objY;
}

function move () {
  //I moved around the order of things in this function so it would work. The first thing you need to do is figure out your random number between -25 and 25
  deltaX = Math.ceil(Math.random() * 50) - 25;
  deltaY = Math.ceil(Math.random() * 50) - 25;
  //The logic here can probably be improved a little, I feel like someone smarter can trim this down a little. Basically I get my new coordinates, then figure out if the picture is more than 100px away from where it started, if it is then I subtract twice as much as I just added. Liek I said, this could be improved but it works
  objX += deltaX;
  objY += deltaY;
	if ((Math.sqrt((centerX - objX) ** 2 + (centerY - objY) ** 2) >= 100)) {
  	deltaX = -2 * deltaX;
    deltaY = -2 * deltaY;
    objX += deltaX;
  	objY += deltaY;
    //Need to add logic here to prevent your top and left values from becoming negative
  }
  //This needs to be converted from a number to a pixel value
  monka.style.left = objX + "px";
  monka.style.top = objY + "px";    
}

window.onload = start();
//I changed this to 500ms because 100ms was making my eyes go crazy
setInterval(move, 500);

/* I put this rule in to make sure the body covers the entire viewable portion of your browser */
body, html {
  height: 100%
}
/* you need to give the picture an absolute position or else you cannot place it using top and left attributes */
#monka {
  position: absolute
}

<img src="https://placekitten.com/111/112" id="monka">

Collectives™ on Stack Overflow

How to move an image with HTML and JS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related