Making basic puzzle game in javascript

Question

I am trying to make a very very basic puzzle game with 3 div boxes inside a div frame. enter image description here

The logic I am thinking is when I click on div box I should be able to get the margin or padding of that empty side and move div to that way, but not able to do that, can anyone help me on it?

This question doesn't belong here. We fix specific, well explained issues. — Filip Minx
– Filip Minx, Commented Jun 2, 2015 at 10:08
We need your markup and code that you already done. We need more specifications. Be accurate — J0N3X
– J0N3X, Commented Jun 2, 2015 at 10:18

J0N3X · Accepted Answer · 2015-06-02 10:51:29Z

1

On the information you gave us, we are not able to answer you question properly, but however i might be able to help you go forward. if you would make it 2x2 divs, give classes like this= Every box would have box, then if box is orange, it would be orange, and if it is the empty one, it would have empty. Then we would have id's. Maybe something like this: left upper corner would be 11, right corner 12, second row 21 and 22. Then when clicked, get that id, and check if div with $("#"+parseFloat($(this).id()) - 10).hasClass("empty"); (note that .id might not be true, but something like that with jQyery) So if that is true, the div above you is empty. Then you can do +1 to check next div in right, and -1 for div in the left, but in this case you need to check that you stay on the same row when checking left and right. And then just play around with those classes you have. Give $(this).addClass("empty"); $(this).removeClass("orange") and give orange to the one you found and also remove empty from it. Boom now you have a box game

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");
    }
})
})

EDIT: here's jsFiddle https://jsfiddle.net/rL5ozLz4/

edited Jun 2, 2015 at 10:51

answered Jun 2, 2015 at 10:29

J0N3X

2282 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mohsin Over a year ago

this is exactly work they way i was thinking, it's great thank you so much dear, can you tell me pls how difficult it is in core javascript no use of library, i am trying to understand javascript & it's flow that's why I came to the game side after form validation.

J0N3X Over a year ago

Well i haven't been coding with js and jquery only for a year and half, and i went straight to jQuery, since it's more easier, and it has easy system for selectors. If you want Pure js version of this, you should try to look for some kind of jquery to js conventor

raz · Accepted Answer · 2015-06-02 10:12:09Z

0

my knowledge in javascript/jquery is still pretty basic but a quick google searches led me to these.

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

https://github.com/ptpt/SlidingPuzzle

Hope this could help.

answered Jun 2, 2015 at 10:12

raz

4096 silver badges18 bronze badges

Collectives™ on Stack Overflow

Making basic puzzle game in javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related