divが見えなくなってから無限のサウンドループを防ぐ？

Question

例の画像

私は現在、簡単なゲームに取り組んでいます。私のゲームに関しては、別のdivがそのdivの境界に達すると、divを非表示にしました。そのイベントにサウンドの一部を加えました。しかし問題は、それがうまくいかないことです。最初のdivが2番目のdivに達すると、サウンドエフェクトは機能しますが、1番目のdivから3番目のdivまでは、そのイベントのサウンドエフェクト（最初のdiv〜3番目の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は私の最初の音を演奏します。しかし、そのイベントの後（キャラクターが壁に触れる）、私の最初のサウンドは代わりに無限にループします（私の2番目のサウンドは正常に機能しません）が、私はそれを望んでいません。私はそのイベントの後に、最初の音のように一度だけ私の二番目の音を演奏したい。

$("#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); 

あなたは、第二の音として最初の音、lost.mp3としてcoinsound.mp3を考えることができます。最初の音はうまくいきますが、その後（文字が壁に触れると）coinsound.mp3が無限に繰り返されます。私はそれを望んでいない。私はの第2音としてlost.mp3を一度だけ実行したいです。

変更する必要があるのは何ですか？

Answer 1

collision7は200ミリ秒ごとに機能し、毎回else句ifになります。音が鳴ります。表示/非表示のdivにフラグやクラスを追加します。フラグがまだ設定されていないことを確認し、一度再生してからフラグを設定します。次回は音を鳴らさないでしょう。

第2の解決策は、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);