Javascript 如何在游戏结束时获得一个jquery警报?

Javascript 如何在游戏结束时获得一个jquery警报?,javascript,jquery,html,drag-and-drop,drag,Javascript,Jquery,Html,Drag And Drop,Drag,这是一个拖放游戏的代码。目前,将每个不同的部件拖到其目标后,会出现警报(“正确”)。我如何改变这一点,使警报在游戏结束时只出现一次,说明有多少是正确的 html: <img class="drag-me" id="drag1" src="images/drag1.png"> <img class="drag-me" id="drag2" src="images/drag2.png"> <img class="drag-me" id="drag3" src="imag

这是一个拖放游戏的代码。目前,将每个不同的部件拖到其目标后,会出现警报(“正确”)。我如何改变这一点,使警报在游戏结束时只出现一次,说明有多少是正确的

html:

<img class="drag-me" id="drag1" src="images/drag1.png">
<img class="drag-me" id="drag2" src="images/drag2.png">
<img class="drag-me" id="drag3" src="images/drag3.png">
<img class="drag-me" id="drag4" src="images/drag4.png">

<img class="target" id="target1" src="images/target1.png">
<img class="target" id="target2" src="images/target2.png">
<img class="target" id="target3" src="images/target3.png">
<img class="target" id="target4" src="images/target4.png">

谢谢

可能是,您应该选择合适的库:jqueryui的JS+CSS

看到这把小提琴了吗。它起作用了。

您还可以在此小提琴上总结并下载suitables库:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/overcast/jquery-ui.css 
var itemsInPosition = 0;
var totalItems = 4;
var totalCorrect = 0;
$('.drag-me').draggable({revert:"invalid", snap:".target"});
$('.target').droppable({
    drop: function( event, ui ) {
      itemsInPosition++;
      // get id of draggable and droppable id
      var draggableID = $(ui.draggable).attr("id");
      var droppableID = $(this).attr("id");
      if(draggableID[4]==droppableID[6]){
        alert("correct")
    testIfComplete();
        totalCorrect++;
      }
    }
});
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/overcast/jquery-ui.css