在div不可見的情況下防止無限聲音循環？

Question

示例圖像

我工作的一個簡單的遊戲現在。至於我的遊戲，當另一個div達到該div的邊界時，我創建了一個div。併爲該事件添加了一部分聲音。但是，問題是，它不能像它應該那樣工作。當第一個div達到第二格，聲音效果是工作，但經過第一個div達到第三格，有一個問題 - 該事件（第一個div到第三格）給予的無限循環音效結果的聲音效果。這種無限循環的聲音效果聽起來是我解釋過的第一個事件。我怎樣才能防止這個問題？

我的代碼是在這裏，

我談到的碰撞事物的事件; #character是我的角色，#taskapsa2是一面牆。

 function collision6($taskapsa2, $character) { 
      var x1 = $taskapsa2.offset().left; 
      var y1 = $taskapsa2.offset().top; 
      var h1 = $taskapsa2.outerHeight(true); 
      var w1 = $taskapsa2.outerWidth(true); 
      var b1 = y1 + h1; 
      var r1 = x1 + w1; 
      var x2 = $character.offset().left; 
      var y2 = $character.offset().top; 
      var h2 = $character.outerHeight(true); 
      var w2 = $character.outerWidth(true); 
      var b2 = y2 + h2; 
      var r2 = x2 + w2; 

      if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return; 
    else { 
    $("#character").hide(); 
var audio22 = new Audio('lost.mp3'); 
audio22.play();} 

     } 


    window.setInterval(function() { 
     $('#result').text(collision6($('#taskapsa2'), $('#character'))); 
    }, 200); 

這裏，.con1是硬幣。當角色到達硬幣時，JS播放我的第一個聲音。但在此事件發生後（當角色接觸到牆壁時），我的第一個聲音無限循環（而我的第二個聲音無法正常工作），但我不想那麼做。我只想在第一聲之後播放我的第二個聲音。

$("#mavikutu").hide(); 

    function collision7($icon1, $character) { 
     var x1 = $icon1.offset().left; 
     var y1 = $icon1.offset().top; 
     var h1 = $icon1.outerHeight(true); 
     var w1 = $icon1.outerWidth(true); 
     var b1 = y1 + h1; 
     var r1 = x1 + w1; 
     var x2 = $character.offset().left; 
     var y2 = $character.offset().top; 
     var h2 = $character.outerHeight(true); 
     var w2 = $character.outerWidth(true); 
     var b2 = y2 + h2; 
     var r2 = x2 + w2; 

     if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return; 
else {$(".icon").hide(); 
$("#mavikutu").show(); 
var audio11 = new Audio('coinsound.mp3'); 
audio11.play(); 

} // COIN SAKLADIM 

    } 


window.setInterval(function() { 
    $('#result').text(collision7($('.icon'), $('#character'))); 
}, 200); 

你可以認爲coinsound.mp3作爲第一個聲音，lost.mp3作爲第二聲音。首先聲音效果很好，但在那之後（當字符觸及到牆上），重複進行coinsound.mp3無限。我不想那樣;我想運行lost.mp3作爲第二聲音只有一次。

我需要做什麼改變嗎？

Answer 1

你每200毫秒調用一次collision7函數，並且每次調用if的else子句 - 所以你在播放聲音。添加一些標誌或類到顯示/隱藏的div - 所以你可以檢查你的國旗還沒有設置，播放一次，然後設置標誌。所以下次你不會播放聲音。

第二種解決方案是計算後檢查DIV的老態（隱藏/顯示）和新的國家 - 播放聲音只有在狀態改變。

例子：

$("#mavikutu").hide(); 

function collision7($icon1, $character) { 
     var x1 = $icon1.offset().left; 
     var y1 = $icon1.offset().top; 
     var h1 = $icon1.outerHeight(true); 
     var w1 = $icon1.outerWidth(true); 
     var b1 = y1 + h1; 
     var r1 = x1 + w1; 
     var x2 = $character.offset().left; 
     var y2 = $character.offset().top; 
     var h2 = $character.outerHeight(true); 
     var w2 = $character.outerWidth(true); 
     var b2 = y2 + h2; 
     var r2 = x2 + w2; 

     if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) { 
     return; 
     } else { 
     if($icon1.is(":visible")) { 
      $(".icon").hide(); 
      $("#mavikutu").show(); 
      var audio11 = new Audio('coinsound.mp3'); 
      audio11.play(); 
     } 
     } // COIN SAKLADIM 
} 

window.setInterval(function() { 
    $('#result').text(collision7($('.icon'), $('#character'))); 
}, 200);