javascript - 用 javascript 制作基本的益智游戏

Question

我正在尝试制作一个非常非常基本的益智游戏，在一个 div 框架内有 3 个 div 框。

我想的逻辑是，当我单击 div 框时，我应该能够获得该空白一侧的边距或填充，并将 div 移至该方向，但无法做到这一点，有人可以帮助我吗？

Answer 1

根据您提供给我们的信息，我们无法正确回答您的问题，但我也许可以帮助您继续前进。如果你想让它成为 2x2 div，请提供这样的类=每个盒子都会有盒子，那么如果盒子是橙色的，那么它就是橙色的，如果是空的，那么它就是空的。然后我们就有了 id。也许是这样的:左上角为 11，右上角为 12，第二行为 21 和 22。然后，当单击时，获取该 id，并检查 div 是否为 $("#"+parseFloat($(this).id()) - 10).hasClass("empty"); (请注意，.id 可能不是 true，但与 jQyery 类似)因此，如果这是 true，则上方的 div 为空。然后你可以用 +1 来检查右边的下一个 div，用 -1 来检查左边的 div，但在这种情况下，你需要检查在检查左右时是否保持在同一行。然后就可以尝试一下你所拥有的类(class)。给 $(this).addClass("空"); $(this).removeClass("orange") 并为您找到的那个提供橙色，并从中删除空的。现在你有一个盒子游戏了

jQuery(document).ready(function ($) {
$(".box").click(function () {
    if ($(this).hasClass("empty")) {
        return;
    }
    var thisId = parseFloat($(this).attr("id"));
    console.log(thisId)
    console.log($("#" + (thisId - 1)))
    if ($("#" + (thisId - 10)).hasClass("empty")) {
        $("#" + (thisId - 10)).addClass("orange");
        $("#" + (thisId - 10)).removeClass("empty");
        $(this).addClass("empty");
        $(this).removeClass("orange");
    } else if ($("#" + (thisId + 10)).hasClass("empty")) {
        $("#" + (thisId + 10)).addClass("orange");
        $("#" + (thisId + 10)).removeClass("empty");
        $(this).addClass("empty");
        $(this).removeClass("orange");
    } else if ($("#" + (thisId - 1)).hasClass("empty")) {
        $("#" + (thisId - 1)).addClass("orange");
        $("#" + (thisId - 1)).removeClass("empty");
        $(this).addClass("empty");
        $(this).removeClass("orange");
    } else if ($("#" + (thisId + 1)).hasClass("empty")) {
        $("#" + (thisId + 1)).addClass("orange");
        $("#" + (thisId + 1)).removeClass("empty");
        $(this).addClass("empty");
        $(this).removeClass("orange");
    }
})
})

编辑:这是 jsFiddle https://jsfiddle.net/rL5ozLz4/