>source

설정된 반경 100 픽셀 내에서 이미지를 이동하려고합니다. 작동시키는 데 문제가 있습니다.

setInterval을 사용하여 반복적으로 이동하고 무작위로 이동 위치를 설정합니다.

전체 JS 코드 :

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);
}

전체 HTML 코드 :

<!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>


  • 답변 # 1

    크기에 대해 이것을 시도하십시오. 코드에서 다르게 수행했을 몇 가지 사항을 찾았으므로 답변에 크게 댓글을 달았습니다.

    //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">
    
    

  • 이전 r - 내부 중첩 ifelse 문으로 값을 이동하는 방법은 무엇입니까?
  • 다음 키-값 매핑의 키가 SHACL에서 고유한지 어떻게 확인합니까?