Question

我正在教自己javascript / jquery并决定作为一个侧面项目来创建一个拖放游戏。我已将它基于我发现的其他教程，并且只是对其进行了修改，因此请轻松编写代码 - 希望它不会太可怕。

我正在使用jquery ui dropable库来实现游戏，如果项目在正确的位置，我现在检查项目是否被删除，如果是，我将分数增加1。

然而，我遇到的问题是当项目被丢弃在错误的地方时，我无法将分数降低一分。

如果在正确的占位符上放置一个正方形，则会在分数上加1，但如果从正确的占位符中移除相同的正方形，则需要从分数中取1。

这里有一个关于我到目前为止所做的演示 http://creativelabel.co.uk/drag-and-drop/

有什么想法吗？

Answer 1

解决此问题的一种方法是在已删除的元素中存储它是否放置在有效的正方形中。这意味着当它移动到无效的方格时，你可以检查它是否以前是有效的方格，如果是这种情况，则将分数减1。

希望这很清楚！

请参阅http://jsfiddle.net/pET3y/了解实时演示

相关代码：

  if ( slotNumber == imgNumber ) {
    ui.draggable.addClass( 'img-match' );
    ui.draggable.data("valid", true);

    imgMatch++;
  }  else {
      if(ui.draggable.data("valid")) {
         imgMatch--;
         ui.draggable.data("valid", false); 
      }
  }

注意：小提琴有一个警告alert(ui.draggable.data("valid"));用于调试

-

更改滚动时分数会下降

您现在所做的是侦听拖动事件（称为activate），并在调用此命令时运行一个函数。该函数检查被拖动的元素之前是否处于正确的位置，如果是，则将其标记为不在正确位置并降低分数。

请参阅：http://jsfiddle.net/3NkwJ/1/

      drop: handleDropEvent,
      activate: handleDragEvent //add new event
} );

并添加以下内容：

  function handleDragEvent( event, ui ) {
    if(ui.draggable.data("valid")) {
             imgMatch--;
             $('input[name=Score]').val(imgMatch);
             $('#score h1').text(imgMatch);
             ui.draggable.data("valid", false); 
    }      
  }

Answer 2

我只是略过了代码，但在此块之后

if ( slotNumber == imgNumber ) {
    ui.draggable.addClass( 'img-match' );
    imgMatch++;
}

你能添加一个else语句

吗？

else
    imgMatch--;

拖动; Drop - 检查项目被丢弃在正确的位置

2 个答案: