指示棋盤移動

Question

我正在製作一款遊戲，我想指出剛剛做出的舉動。

頁面加載時，我想指出：

• 當一塊從
• 新位置
• 使用要在新的位置的一塊來到

我嘗試過，失敗，使用jquery fadein（）和delay（）。以下代碼代表遊戲板。頂部中間的單元格是剛移動到右上角的單元格，取代了綠色部分。 我試過各種方法來隱藏新移動的（紅色），直到舊的（綠色）片斷消失，但無法弄清楚。

這是當前fiddle。

感謝您的任何幫助。

<table border="1" id="tbl"> 
<tr> 
    <td ></td> 
    <td bgcolor=#000000 > 

<img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-BlankRed-icon.png" id="fadeout1"/>   

    </td> 
    <td id="cap" class="items p1 p3 bg"> 

    <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Green-icon.png" id="fadeout2"/>   

     <img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Red-icon.png" /></td>  
</tr> 

<tr>  
    <td bgcolor=#000000 ></td> 
    <td class="items p1"></td> 
    <td class="items p3" bgcolor=#000000 ></td> 
</tr> 

<tr>  
    <td class="piece" id="p1" ><img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Gray-icon.png" /></td> 
    <td bgcolor=#000000 ></td> 
    <td class="piece" id="p3" ><img src="http://icons.iconarchive.com/icons/deleket/soft-scraps/32/Button-Blank-Gray-icon.png" /></td> 
</tr> 

</table> 

的jQuery：

$("#fadeout1").show().delay(1000).fadeOut('slow') 
$("#fadeout2").show().delay(2000).fadeOut('slow') 

Answer 1

你可以嘗試這樣的事：http://jsfiddle.net/turiyag/bLb3H/57/

而是具有圖像不會出現，只是讓他們重疊，位置：絕對的。

#tbl td { width:32px; height:32px; padding:0px; margin: 0px; vertical-align:top;} 
img {position:absolute; padding:0px; margin: 0px;} 

編輯：

我建議你清理你的代碼作爲故障排除過程的一部分。查看重構（http://en.wikipedia.org/wiki/Code_refactoring）瞭解更多信息。我最喜歡的文字是（http://www.amazon.ca/Refactoring-Improving-Design-Existing-Code/dp/0201485672）。

在特定情況下，我會寫更多的功能，並且調整你的腳本更多地利用jQuery的帶來的好處。值得注意的是，我會包括一個函數來繪製表格，CSS類來着色表格，jQuery擴展來檢索表格中單元格的x/y座標，以及一個函數來確定移動的有效性。我已經根據你的代碼做了一個重構的例子。你會注意到它是「自我記錄」。從簡單的一瞥就可以很容易地理解代碼的作用，即使沒有評論。

http://jsfiddle.net/turiyag/vCT9D/

$('#gameboard td').droppable({ 
    hoverClass: 'over', 
    activate: function (event, ui) { 
     isDragging = true; 
    }, 
    drop: function (event, ui) { 
     var img = ui.draggable; 
     if($(this).validMove()) { 
      movePiece(img, $(this)); 
      markValidMoves($(this)); 
     } else { 
      img.draggable('option', 'revert', true); 
     } 
     isDragging = false; 
    } 
});