1

在我的游戏中，您必须单击字母来拼写单词。单击一个字母时，它会动画到网格中单词所在的区域。

当我单击一个字母并动画到单元格时，我可以单击多个。我将如何限制每个单元格只有一个字母。

我在想也许只要动画需要禁用点击功能，但我不知道我将如何实现这一点。

有人可以指出我正确的方向吗？

这是点击事件...

$('.drag').on('click', function(e) {
e.preventDefault();

var target = $('.drop-box.spellword:not(.occupied):first');
var targetPos = target.position();
var currentPos = $(this).offset();
var b = $(this);

if (target.length) {
    $(".minibutton").prop("disabled", true);
    b.clone().addClass(
    b.data("letter") == target.data("letter") ? "wordglow3" : "wordglow").appendTo("table").css({
        background: "transparent",
        position: "absolute",
        top: currentPos.top,
        left: currentPos.left
    }).animate({
        top: targetPos.top,
        left: targetPos.left
    }, "slow", function() {
        $(this).css({
            top: 0,
            left: 0
        }).appendTo(target);
        target.addClass("occupied");
    });
4

3 回答 3

1

一旦动画完成，看起来你给目标一个名为“occupied”的类。您不能在单击字母后立即给它“占用”类吗？

if (target.length) {
        target.addClass("occupied"); // add immediately here
于 2012-08-17T12:23:36.077 回答
1

我认为您可以addClass()从动画回调中移动该方法，因此如果您单击两次，您将不会获得相同的单元格，例如：

 var target = $('.drop-box.spellword:not(.occupied):first').addClass("occupied");

如果课程不影响您的风格，这只是可行的想法。

其他方式是使用标志，因此在事件开始时，您会在动画开始和回调时询问if(!animating)并设置。animating = trueanimating = flase

最后，要启用和禁用点击事件，您可以使用您的代码创建一个单独的函数，例如

var clickEventHandler = function(e) {
    $('.drag').off("click")
    //your current code
    $('.drag').on(clickEventHandler);
}

$('.drag').on('click',  clickEventHandler);

祝你好运！

于 2012-08-17T12:24:17.933 回答
0

如果您为字母提供了单独的 ID，则可以在动画进行时通过 jQuery 使用 $('#letterId').removeAttr('onclick') 删除 click 属性 - 之后，您可以在必要时重新激活该属性。

希望这可以帮助。格雷茨，卢波

于 2012-08-17T12:27:10.410 回答