为每个字母单击一次

click once for each letter

本文关键字：一次 单击      更新时间：2023-09-26

在我的游戏中，你必须点击字母来拼写单词。单击字母时，它会以动画形式显示网格中单词所在的区域。

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

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

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

这是点击事件...

$('.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");
    });

看起来您在动画完成后为目标提供了一个名为"占用"的类。难道你不能在点击字母后立即给它"占用"类吗？

if (target.length) {
        target.addClass("occupied"); // add immediately here

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

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

只有当类不影响你的风格时，这才是可行的想法。

另一种方法是使用标志，因此在事件开始时，您将询问if(!animating)并在动画开始时设置animating = true，并在回调时animating = flase。

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

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

祝你好运！

如果您为字母提供了单独的 ID，则可以在动画过程中通过带有 $（'#letterId'）.removeAttr（'onclick'） 的 jQuery 删除 click 属性 - 之后您可以根据需要重新激活属性。

希望这有帮助。格莱兹，卢波

相关文章：