Create a webpage that enables the user to play the game of 8-Puzzle. There’s a 2

Question

Create a webpage that enables the user to play the game of 8-Puzzle. There’s a 2-by- 4 board (implemented as an HTML5 table) for a total of 8 slots. One of the slots is empty. The other slots are occupied by 7 tiles, randomly numbered from 1 through 8.

The exercise will incorporate a two-dimensional array, and the 8-puzzle requires significantly fewer tile objects and a significantly smaller 2d array.

Some Hints (for one approach to completing the exercise):

Have each cell (tile) in the HTML table be a distinct object (with a distinct id). Use CSS to specify how the objects display (font size & color, border, etc.)

Have the JavaScript file generate a two-dimensional (2-d) array, with elements identified with those in the HTML table. Create a listener for each cell element.

Store the numbers 1 through 8 randomly in a 1-d array and use this to populate your 2-d array.

Build a function which can swap any numbered tile with the blank tile (only if the blank tile is directly adjacent).

Explanation / Answer

setImage: function (images, gridSize) {
        console.log(gridSize);
        gridSize = gridSize || 4; // If gridSize is null or not passed, default it as 4.
        console.log(gridSize);
        var percentage = 100 / (gridSize - 1);
        var image = images[Math.floor(Math.random() * images.length)];
        $('#imgTitle').html(image.title);
        $('#actualImage').attr('src', image.src);
        $('#sortable').empty();
        for (var i = 0; i < gridSize * gridSize; i++) {
            var xpos = (percentage * (i % gridSize)) + '%';
            var ypos = (percentage * Math.floor(i / gridSize)) + '%';
            var li = $('<li class="item" data-value="' + (i) + '"></li>').css({
                'background-image': 'url(' + image.src + ')',
                'background-size': (gridSize * 100) + '%',
                'background-position': xpos + ' ' + ypos,
                'width': 400 / gridSize,
                'height': 400 / gridSize
            });
            $('#sortable').append(li);
        }
        $('#sortable').randomize();
    }
    $.fn.randomize = function (selector) {
    var $elems = selector ? $(this).find(selector) : $(this).children(),
        $parents = $elems.parent();

    $parents.each(function () {
        $(this).children(selector).sort(function () {
            return Math.round(Math.random()) - 0.5;
        }).remove().appendTo(this);
    });
    return this;
};
enableSwapping: function (elem) {
        $(elem).draggable({
            snap: '#droppable',
            snapMode: 'outer',
            revert: "invalid",
            helper: "clone"
        });
        $(elem).droppable({
            drop: function (event, ui) {
                var $dragElem = $(ui.draggable).clone().replaceAll(this);
                $(this).replaceAll(ui.draggable);

                currentList = $('#sortable > li').map(function (i, el) {
                    return $(el).attr('data-value'); });
                if (isSorted(currentList))
                    $('#actualImageBox').empty().html($('#gameOver').html());

                imagePuzzle.enableSwapping(this);
                imagePuzzle.enableSwapping($dragElem);
            }
        });
    }   

Related Questions

Navigate

• Browse (All)
• Browse C
• Subjects

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.