javaスクリプトはモルを動的に取り除き、動的にモルを取り除きます

Question

ランダムな時間間隔でどのようにモルを取り除くのかわかりません。指示は次のとおりです...残っている少数のタスクのうちの1つは、無作為に現れる無作為に現れる数を作ることです！ランダムに加えられた各モルは、別々にランダムな時間の後にも消滅するはずである。あなたのaddMole機能で

function timeDecrease(){ 
    $("#timer").show(); 
    $("#timer").html(time + " seconds left") 
    time -= 1; 
    if (time >0) 
    { 
     t = setTimeout("timeDecrease()",1000); 
    } 
    else time = 0; 
    }; 

function randomMole(min,max){ 
    return Math.floor(Math.random() * (max - min + 1)) + min; 
}; 
function addMole(){ 

    yPos = getY(); 
    xPos = getX(); 

    $("#gamespace").append('<img class= "Image" img src="img/mole.png" 
    style ="top:'+yPos+'px; bottom: 
    '+xPos+'px;left:'+xPos+'px;right:'+yPos+'px;"/>'); 
    moreMoles = setTimeout(addMole,randomMole(0,2000)); 

Answer 1

、新しいモルへの参照を格納し、それを除去するためのタイマーを設定します。彼らは文字列を連結未満を傷つけるので、私たちはtemplate literalsを使用

let newMole = $(`<img 
        class="Image" 
        src="img/mole.png" 
        style="top: ${yPos}px; left: ${xPos}px;" 
       >`); 
$("#gamespace").append(newMole); 
setTimeout(newMole.remove.bind(newMole), randomMole(1000, 2000)); 
moreMoles = setTimeout(addMole,randomMole(0,2000)); 

。 newMole.remove()は新しいモルをDOMから削除しますが、setTimeoutコールバックとして呼び出すことはできません。それはwindowによって呼び出されるので、thisキーワードはwindowに設定されますが、削除しようとしている要素にはthisが設定されています。 newMole.remove.bind(newMole)はnewMole.removeのバージョンを示し、thisは明示的にnewMoleに設定されています。