指示棋盘移动

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; 
    } 
});