再表示したいセルの消去

Question

私はChompというゲームを書いていますが、ゲーム自体は完了しましたが、私は修正ができないという視覚的な不具合があります。このゲームの四角形（緑色の四角形を除く）をクリックするたびに、クリックされた正方形を含む特定の四角形が消えて永遠に消えてしまうはずです。

現在のところ、ユーザーが四角形をクリックすると、テーブル全体の残像が作成されます。たとえば、thisは、最初の移動として中央の四角形をクリックした後にどのように見えるかを示しています.2番目の移動で見ることができるように、here最初の移動のピースが再び短時間表示され、すぐに再びフェードアウトします。

四角形が消去されるときはいつでも、現在のように再表示されるべきではありません。この現象の原因はわかりません。しかし、html要素が適切に削除されていない可能性があります。退色した四角形をもう一度見せないようにするにはどうすればいいですか？ここで

は

fadeOut = function fadeOut(state) { 
     // Make fadeOut unavailable until the whole fade-out is finished. 
     fadeOut.isAvailableToRun = false; 
     // Update the distance moved and apply it to the element. 
     state.distance += state.distanceIncrement; 
     state.element.style.top = state.distance + 'px'; //move up by pixels 
     // Update the opacity and apply it to the element. 
     state.opacity += state.opacityIncrement; 
     state.element.style.opacity = state.opacity; 
     //if opacity is > 0 , fade it out into the ethers 
     if (state.opacity > 0) { 
     // If the element is still showing, wait a bit and then continue fading it. 
     setTimeout(function() { 
      fadeOut(state); 
     }, state.timeIncrement); 
     } 
    }; 

    //contains values to use for fadeOut 
    cellClick = function (cell) { 
     var a, x, y; 

     //make all cells above, to the right, and inbetween fade a clicked cell fade 
     for (a = 0; a < tableData.length; a += 1) { 
     //get x,y coordinates from tableData 
     x = cell.pos.x; 
     y = cell.pos.y; 
     //erase position in index compared to the clicked position 
     if (tableData[a].pos.x <= x && tableData[a].pos.y >= y) { 
      //remove clickability of cells other than clicked cell 
      tableData[a].onclick = null; 
      //apply fadeOut effect to cells other than clicked cell 
      fadeOut({ 
       distance: 0, // initial distance from start 
       distanceIncrement: 1, // number of pixels to move each timer tick 
       element: tableData[a], // element to move and fade (cell, element passed as a parameter to the click cell function) 
       opacity: 1, // initial opacity 
       opacityIncrement: -0.01, // how much to fade each timer tick 
       pause: 1000, // milliseconds to pause after completed fade 
       timeIncrement: 10 // milliseconds for each timer tick 
      }); 
     } 
     } 

Hereは、ライブデモで、それの全体が私のコードである要素をセルのクリックを処理し、フェージングのためgameTable

<!--game table--> 
<table id="gameTable"> 
</table> 

と私のjavascript機能のための私のhtmlですあなた自身で簡単に問題を見ることができます。

Answer 1

これは、領域内のすべてのセルに既にフェードアウトしている場合でも、再びフェードアウトするように指示しているために起こります。あなたのコードを変更して、セルのopacity CSSプロパティが設定されているかどうかを確認しました。不透明度が既に設定されている場合、セルはすでに色あせしており、fadeOutを再度呼び出すことはありません。さもなければ、我々はメソッドを呼び出すことを続ける。これはあなたの問題を解決するようでした。

Here's a link to my fork of your code.

Answer 2

state.opacity += state.opacityIncrement;を使用しているからです。これは、あなたが渡した不透明度の初期状態（1）をとり、正しく減分します。四角形が見えなくても、最初の反復を本質的に開始するのはです。

これを1にハードコーディングする代わりに、既存の正方形の不透明度を取得する必要があります。