Question

我正在尝试制作一个简单的拖放游戏，用户需要通过将字符拖入丢弃区域来重新命名某人的名字。

我很喜欢拖放动画，但是我无法（主要是由于技术缺乏技能）用这些字母创建字符串，以便在两者之间进行比较。

在此处查看我的示例代码jsFiddle

在我随机化所有字母dragItemsContent = [];

之前，我正在创建第一个带有名称的字符串

我有点能够为我拖动的字母创建一个新字符串dragedItemsContent += ui.draggable.text(); 但是，当我不想删除任何这些字母时，我无法删除它们，最糟糕的是我不知道如何查找该字母的索引并从我的字符串中正确删除它。

我正在使用data-letra这是每个字母的唯一指标，也许它可以提供帮助。

因此，总而言之，我需要在字符串中添加/删除字母（或一些可比较的数据）并比较它们以了解用户是否正确完成游戏。

由于

Answer 1

非常有趣的游戏。

我已将其编辑为根据结果显示You Won!或Sorry. Please try again.（拼出Fredfigglehorn。

Clicky

重要的部分是：

var letters = $('.drop-area').find('.drag-item');
if (letters.length == dragItemsLength ) {
    var final = '';
    for (var i=0;i<dragItemsLength;i++)
        final += letters[i].innerText.substring(0, 1);
    if (final == 'fredfigglehorn')
        alert("You won!");
    else
        alert("Sorry. Please try again.")
}

Answer 2

而不是dragedItemsContent += ui.draggable.text();你应该使用dragedItemsContent.push(ui.draggable.text())这种方式，你将得到一个正确顺序的好数组。稍后您可以使用toString制作字符串并删除只需从数组中删除元素

您可能还想查看sortable from jQuery UI，它可以处理几乎所有开箱即用的内容

Answer 3

我为你制作了一个小提琴，它基于比较的拖拽项目文本希望它有助于你... http://jsbin.com/oluhuk/2/edit

Drag和'drop game中的字符串创建和比较

3 个答案: