이미지를 이동할 때 $ (img) .offset()을 변경합니다. click()

Question

이미지를 클릭하면 위치가 임의로 바뀝니다.

• 이미지에
• 50 픽셀 떨어진 이미지에서
• 이상 50 픽셀 떨어진 이미지 : 나는 클릭이 경우에 따라 하나의 세 가지 다른 소리의 재생하려는.

이렇게하려면 이미지를 이동할 때마다 이미지의 좌표가 업데이트되도록 저장해야합니다. 이 코드를 가지고 :

function move() { 
    var audio = document.getElementById("audio"); 
    var img = document.getElementById("myImage"); 

    //FIND CENTER OF IMAGE 
    var offset = $(img).offset(); 
    var width = $(img).width(); 
    var height = $(img).height(); 

    // PLAY DIFFERENT SOUND 
    document.addEventListener("click", function(e) { 
    if (e.target === img) { 
     audio.src = "sound1.mp3"; 
     audio.play(); 
    } else if (e.clientX < (offset.left - 50) || e.clientX > (offset.left + width + 50) || e.clientY < (offset.top - 50) || e.clientY > (offset.top + height + 50)) { 
     audio.src = "sound2.mp3"; 
     audio.play(); 
    } else { 
     audio.src = "sound3.mp3"; 
     audio.play(); 
    } 
    // GENERATE RANDOM LOCATION 
    // Fix this part 
    var x = Math.floor(Math.random() * 400); 
    var y = Math.floor(Math.random() * 400); 

    img.style.top = x + "px"; 
    img.style.left = y + "px"; 
    img.style.bottom = x - "px"; 
    img.style.right = y - "px"; 
    }, false); 
} 

이미지의 좌표를 업데이트하는 데 약간의 실수가 있어야합니다. 어떤 아이디어?

Answer 1

각 클릭에 대해 변수 offset이 캐시 된 것 같습니다. 클릭 처리기로 할당을 옮깁니다. 또한 메모리 누수를 피하기 위해 이동 함수에서 이벤트 리스너를 추출하십시오. 귀하의 경우, move 함수를 실행할 때마다 새로운 이벤트 리스너가 연결됩니다. <img id="myImage" />이 fixed 또는 absolute에 대해 position을 상대 요소로 설정했는지 확인하십시오. 상대 요소를 사용하는 경우 올바른 크기를 얻으려면 상대 요소에 $window을 변경해야합니다. 코드를 잘못 무엇

var $audio = $('#audio'); 
 
    var $img = $("#myImage"); 
 
    var $window = $(window); 
 

 
    var width = $img.width(); 
 
    var height = $img.height(); 
 
    var maxX = $window.width() - width; 
 
    var maxY = $window.height() - height; 
 
    
 
    function move() { 
 
    //Get a new position, use modulo operation to get x from range (0, windowWidth - imageWidth) and y from range (0, windowHeight - imageHeight) 
 
    var x = Math.floor(Math.random() * 10000) % maxX; 
 
    var y = Math.floor(Math.random() * 10000) % maxY; 
 

 
    $img.css('left', x + 'px'); 
 
    $img.css('top', y + 'px'); 
 
    } 
 

 
    document.addEventListener("click", function(e) { 
 
    //get the img offset 
 
    var offset = $img.offset(); 
 
    if (e.target === $img[0]) { 
 
     audio.src = "sound1.mp3"; 
 
     audio.play(); 
 
    } else if (e.clientX < (offset.left - 50) || e.clientX > (offset.left + width + 50) || e.clientY < (offset.top - 50) || e.clientY > (offset.top + height + 50)) { 
 
     audio.src = "sound2.mp3"; 
 
     audio.play(); 
 
    } else { 
 
     audio.src = "sound3.mp3"; 
 
     audio.play(); 
 
    } 
 
    
 
    move(); 
 
    }, false);