画像を移動したときに$（img）.offset（）を変更します。

Question

クリックすると位置がランダムに変化する画像があります。

• 画像
• は50pxに離れた画像は50px以上離れた画像から
• から：私は、クリックがある場合に応じて三つの可能な異なる音のいずれかをプレイしたいです。

これを行うには、画像を移動するたびに画像の座標が更新されるように画像の座標を保存する必要があります。私はこのコードを持っています：

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関数からイベントリスナーを抽出します。あなたの場合、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);