在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可能不是真的，但是jQyery就是这样的）所以如果这是真的，你上面的div就是空的。然后你可以做+1来检查右边的下一个div，并且在左边检查div为-1，但是在这种情况下你需要检查你在左右检查时是否保持在同一行。 然后只是玩这些课程。给$（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/

Answer 2

我在javascript / jquery中的知识仍然非常基本但是快速的谷歌搜索引导我进入这些。

http://henleyedition.com/reactjs-slide-puzzle/

https://github.com/ptpt/SlidingPuzzle

希望这可以提供帮助。