ループが動作していない複数の子どもをクリアする

Question

現在、リセットコードを作成しようとしています。プレイヤーが敵と衝突したときに、svgからすべてのコレクティブ（ペレットと呼んでいます）をクリアしてから私はループを持っています。何らかの理由で、ペレット以外のすべてのペレットをクリアしています。何らかの理由でペレットが作られているように、ペレットを作り直すこともありません。 svg変数はスコア、プレーヤー、ゴースト（敵）、ペレットです。

この

はリセットコードです：

function destroyPlayer() 
{ 
    alert("Game Over"); 
    score = 0; 
    scoreElement.textContent = 'score: ' + score; 
    pelletCount=0; 
    constantCount = 1; 
    //need code to take out all pellets from svg 
    for(i = 0; i < 100; i++) 
    { 
     if(svg.children[i].id != "ghost" && 
      svg.children[i].id != "score" && 
      svg.children[i].id != "player") 
     { 
      svg.removeChild(svg.children[i]); 
     } 
    } 
    positionPellet(); 
    positionGhost(); 
} 

そして、これはペレットをリメイクコードです：（位置ペレット法）

function positionPellet() 
{ 
    while(pelletCount < constantCount*3) 
    { 
     var pellet = document.createElementNS(xmlns, 'circle'); 
     pellet.setAttribute('cx', Math.random() * 900); 
     pellet.setAttribute('cy', Math.random() * 400); 
     pellet.setAttribute('r' , 10); 
     pellet.className.baseVal = "pelClass"; 
     pelletCount++; 
     svg.appendChild(pellet); 
    } 
} 

Answer 1

は、あなたのブラウザのデベロッパーコンソール（プレスF12を確認しました）？ Javascriptで見つかったエラーを表示する必要があります。

これが役に立たない場合は、コンソールに変数を記録して、コードが機能しない理由を確認できます。

たとえば、positionPellet()機能が動作していない理由をすぐに確認できます。ヒントとして、いくつかのログを追加して、pelletCountとconstantCountの値を確認してみてください。再度コードを実行すると

function positionPellet() 
{ 
    console.log("pelletCount = "+pelletCount); 
    console.log("constantCount= "+constantCount); 
    while(pelletCount < constantCount*3) 
    { 
    ... 

、あなたはundefinedとして示す値で、これらのデバッグ行が表示されるはずです。それはなぜでしょうか？

あなたの他の問題はもう少し微妙です。私はあなたにヒントを与えて、配列から要素0を削除すると、配列が直ちに更新されると言うでしょう。以前はchildren[1]だった配列項目はchildren[0]になりました。しかし、次回のループでは、あなたはchildren[1]を見ています。それは次の子ではなくなります。それは実際にそれ以降のものです（元はchildren[2]）。