Verification of sliding puzzle functionality in JavaScript

Question

Verification of sliding puzzle functionality in JavaScript

I have successfully created a sliding puzzle with various formats, including 3x3, 3x4, 4x3, and 4x4. When you run my code, you will notice a selection box on the right side where you can choose from these four formats. The sliding puzzle is almost complete. However, I am in need of a function that can check after each move if the puzzle has been solved. If it has, I would like it to display a message such as "Congratulations! You solved it!" or "You won!". Do you have any ideas on how I can implement this feature?

In the javascript code, you will see that the first function, loadFunc(), is used to replace every piece with a blank one. The subsequent functions are responsible for selecting and changing the format, shifting puzzle pieces into the blank space, and shuffling the pieces' positions randomly. If you have any questions or encounter any difficulties understanding the code, please feel free to ask in the comments. Thank you in advance.

As my reputation is limited, I will provide a link to the images here: https://i.sstatic.net/9fIyk.jpg. These images are currently being used as placeholders.

Here is the jsfiddle:

    http://jsfiddle.net/Cuttingtheaces/vkyxgwo6/19/

javascript html css puzzle

Answer 1

Answer №1

There are always two ways to achieve a goal: the quick and dirty method, or the more elegant but complex approach that requires significant code changes.

Quick Method

To quickly check if pieces are in the correct order, you can parse the "id"s of each piece based on their expected positions. This can be done by looking for the pattern "position" + index or "blank":

function isFinished() {
    var puzzleEl = document.getElementById('slidingpuzzleContainer').children[0];
    var pieces = [].slice.call(puzzleEl.children);

    return pieces
        .map(function (piece) {
            return piece.id.substr(8);
        })
        .every(function (id, index, arr) {
            if (arr.length - 1 == index) {
                return id == "blank";
            }
            return index == parseInt(id);
        });
}

You can then call the isFinished() function after each move in your game to display a finishing message if all pieces are in order:

function shiftPuzzlepieces(el) {
    // ...
    if (isFinished()) {
        alert("You won!");
    }
}

A live version of this method can be found here.

Elegant Approach

In my opinion, a better way to implement this game would be to track the current positions of pieces using a data structure instead of parsing DOM elements. This allows for easier manipulation of the game state, similar to how a React.js application works: updating the game state onclick and rendering it into the DOM.

Here's how I would implement the game:

The main advantage of this approach is its flexibility: functions such as finding blank spaces around pieces can be modified without affecting other parts of the code. This separation of concerns makes the code more maintainable and extensible.

Answer 2

There are always two ways to achieve a goal: the quick and dirty method, or the more elegant but complex approach that requires significant code changes.

Quick Method

To quickly check if pieces are in the correct order, you can parse the "id"s of each piece based on their expected positions. This can be done by looking for the pattern "position" + index or "blank":

function isFinished() {
    var puzzleEl = document.getElementById('slidingpuzzleContainer').children[0];
    var pieces = [].slice.call(puzzleEl.children);

    return pieces
        .map(function (piece) {
            return piece.id.substr(8);
        })
        .every(function (id, index, arr) {
            if (arr.length - 1 == index) {
                return id == "blank";
            }
            return index == parseInt(id);
        });
}

You can then call the isFinished() function after each move in your game to display a finishing message if all pieces are in order:

function shiftPuzzlepieces(el) {
    // ...
    if (isFinished()) {
        alert("You won!");
    }
}

A live version of this method can be found here.

Elegant Approach

In my opinion, a better way to implement this game would be to track the current positions of pieces using a data structure instead of parsing DOM elements. This allows for easier manipulation of the game state, similar to how a React.js application works: updating the game state onclick and rendering it into the DOM.

Here's how I would implement the game:

The main advantage of this approach is its flexibility: functions such as finding blank spaces around pieces can be modified without affecting other parts of the code. This separation of concerns makes the code more maintainable and extensible.

Answer 3

Answer №2

    $(document).on('click','.puzzlepiece', function(){
        var count = 0;
         var imgarray = []; 
        var test =[0,1,2,3,4,5,6,7,8,'blank']
        $('#slidingpuzzleContainer img').each(function(i){
          var imgalt =  $(this).attr('alt');             
            imgarray[i] = imgalt;            
            count++;

        });
        var is_same = (imgarray.length == test.length) &&   imgarray.every(function(element, index) {
        return element === array2[index]; 
    });

        console.log(is_same);    ///it will true if two array is same           
    });

Give this a try... specifically designed for 3x3 puzzles with dynamic value assignment.

Answer 4

    $(document).on('click','.puzzlepiece', function(){
        var count = 0;
         var imgarray = []; 
        var test =[0,1,2,3,4,5,6,7,8,'blank']
        $('#slidingpuzzleContainer img').each(function(i){
          var imgalt =  $(this).attr('alt');             
            imgarray[i] = imgalt;            
            count++;

        });
        var is_same = (imgarray.length == test.length) &&   imgarray.every(function(element, index) {
        return element === array2[index]; 
    });

        console.log(is_same);    ///it will true if two array is same           
    });

Give this a try... specifically designed for 3x3 puzzles with dynamic value assignment.

Verification of sliding puzzle functionality in JavaScript

Answer №1

Quick Method

Elegant Approach

Answer №2

Similar questions

repeated execution of a javascript function

Stop the submission of a form using jQuery based on its unique identifier

Displaying grid in object in threejs: a tutorial

What is the best way to showcase my subscription form on a web browser?

Enhancing interactivity with jQuery's ajax event functionality

Refreshing the Parent Component in a React Application

Utilizing AJAX in jQuery Mobile for Collapsible Content

Can an array in html be accessed using a scope variable?

How to address critical vulnerabilities found in a Vue.js project that relies on the 'vue-svg-loader' dependency, specifically impacting 'nth-check', 'css-select', and 'svgo'?

typescript scrolling location

The `stream.Transform.unshift()` method in Node.js

Send the form data to a PHP file for processing

Mastering state management for various input types in React

Building an HTTP request and response directly from an active socket in a Node.js environment

Tips for Creating an Animated Progress Bar in a Slider

The NgFor is unable to iterate over an array because it is being treated as an

Toggle the font weight in a text area by clicking a button

Transmitting PHP variable to JavaScript using Callback Method

Ways to effortlessly activate an angular directive once the page has been fully loaded

The intricacies of CSS flexbox's breaking tendencies