I created a sliding puzzle with different formats like: 3x3, 3x4, 4x3 and 4x4. When you run my code you can see on the right side a selection box where you can choose the 4 formats. The slidingpuzzle is almost done. But I need a function which checks after every move if the puzzle is solved and if that is the case it should give out a line like "Congrantulations you solved it!" or "You won!". Any idea how to make that work?
In the javascript code you can see the first function loadFunc() is to replace every piece with the blank one and the functions after that are to select a format and change the format into it. The function Shiftpuzzlepieces makes it so that you can move each piece into the blank space. Function shuffle randomizes every pieces position. If you have any more question or understanding issues just feel free to ask in the comments. Many thanks in advance.
Since I don't have enough reputation I will post a link to the images here: https://i.stack.imgur.com/9fIyk.jpg . These images are just placeholders right now.
Here is the jsfiddle:
http://jsfiddle.net/Cuttingtheaces/vkyxgwo6/19/
As always, there is a "hacky", easy way to do this, and then there is more elegant but one that requires significant changes to your code.
Hacky way
To accomplish this as fast and dirty as possible, I would go with parsing
id
-s of pieces to check if they are in correct order, because they have this handy pattern"position" + it's expected index or "blank"
:Now we need to check it somewhere, and naturally the best place would be after each move, so
shiftPuzzlepieces()
should be updated to callisFinished()
function, and show the finishing message if it returnstrue
:And voilĂ : live version.
How would I implement this game
For me, the proper way of implementing this would be to track current positions of pieces in some data structure and check it in similar way, but without traversing DOM or checking node's id-s. Also, it would allow to implement something like React.js application: onclick handler would mutate current game's state and then just render it into the DOM.
Here how I would implement the game:
Here we have the
initGame()
function that starts everything. When called it will create an initial state of the game (we have default size and state properties to care about there), add listeners on the controls and callrender()
function with the current state.initGameControls()
sets up a listener for clicks on the field that will 1) callmovePiece()
which will try to move clicked piece on the blank spot if the former is somewhere around, 2) check if after move game is finished withcheckFinish()
, 3) callrender()
with updated state.Now
render()
is a pretty simple function: it just gets the state and updates the DOM on the page accordingly.Utility function
initFormatControl()
handles clicks and updates on the form for field size selection, and when the 'Play!' button is pressed will generate initial order of the pieces on the field and callrender()
with new state.The main benefit of this approach is that almost all functions are decoupled from one another: you can tweak logic for finding blank space around target piece, to allow, for example, to swap pieces with adjacent ids, and even then functions for rendering, initialization and click handling will stay the same.