Original JS jigsaw puzzle game, object-oriented, complete comments. Author sunxing007 Online Demo http://img.jb51.net/online/pintu/pintu.htm
The Code is as follows:
JS game
Original JS works: JS jigsaw puzzle
Complete annotations, object-oriented
Reprinted please indicate from http://blog.csdn.net/sunxing007
LineColumnStart
Reprinted please indicate from http://blog.csdn.net/sunxing007
Script
// Background images under ie7 are not cached by default, resulting in latency and flickering. This bug is fixed.
// (Csdn user wtcsy provides http://blog.csdn.net/wtcsy)
Try {
Document.exe cCommand ("BackgroundImageCache", false, true );
} Catch (e) {alert (e )};
// Auxiliary functions
Function $ (id) {return document. getElementById (id )};
/*************************************** **********
* Js jigsaw puzzle game v1.6
* Author sunxing007
* Reprinted please indicate from http://blog.csdn.net/sunxing007
**************************************** **********/
Var PicGame = {
// Number of rows
X: 3,
// Number of Columns
Y: 3,
// Image Source
Img: $ ('img '),
// Cell height
CellHeight: 0,
// Cell width
CellWidth: 0,
// The main object of this game: Table. Each td corresponds to a small cell grid that can be moved.
Board: $ ('board '),
// Initial Function
Init: function (){
// Determine the number of lines and columns of the puzzle game.
This. x = $ ('lines'). value> 1? $ ('Lines '). value: 3;
This. y = $ ('cols'). value> 1? $ ('Cols'). value: 3;
// Delete the original row of the board
While (this. board. rows. length> 0 ){
This. board. deleteRow (0 );
}
// Reconstructs the board based on the number of rows and columns
For (var I = 0; I Var tr = this. board. insertRow (-1 );
For (var j = 0; j Var td = tr. insertCell (-1 );
}
}
// Calculates the cell height and width.
This. cellHeight = this. img. height/this. x;
This. cellWidth = this. img. width/this. y;
// Get all td
Var tds = this. board. getElementsByTagName ('td ');
// Set the style for each td
For (var I = 0; I Tds [I]. style. width = this. cellWidth;
Tds [I]. style. height = this. cellHeight;
Tds [I]. style. background = "url (" + this. img. src + ")";
Tds [I]. style. border = "solid # ccc 1px ";
Var currLine = parseInt (I/this. y );
Var currCol = I % this. y;
// Calculate the position of the background image of each cell to make them look like an image.
Tds [I]. style. backgroundPositionX =-this. cellWidth * currCol;
Tds [I]. style. backgroundPositionY =-this. cellHeight * currLine;
}
/** Begin: disrupt sorting *******************/
/**
* The algorithm used to disrupt sorting is as follows: for example, my current layout is 3*3,
* Then I generate a target location for each td, which is smaller than 9 and different from each other,
* Replace them with that place.
**/
// Target location Sequence
Var index = [];
Index [0] = Math. floor (Math. random () * (this. x * this. y ));
While (index. length <(this. x * this. y )){
Var num = Math. floor (Math. random () * (this. x * this. y ));
For (var I = 0; I If (index [I] = num ){
Break;
}
}
If (I = index. length ){
Index [index. length] = num;
}
// Window. status = index;
}
Var cloneTds = [];
// Clone each td and replace it with the target location based on the index of the target location sequence.
For (var I = 0; I CloneTds. push (tds [I]. cloneNode (true ));
}
For (var I = 0; I Tds [I]. parentNode. replaceChild (cloneTds [index [I], tds [I]);
}
/** End: disrupt sorting *********************/
// Add an onclick event for each td.
Tds = this. board. getElementsByTagName ('td ');
For (var I = 0; I Tds [I]. onclick = function (){
// Coordinates of the clicked object
Var row = this. parentNode. rowIndex;
Var col = this. cellIndex;
// Window. status = "row:" + row + "col:" + col;
// Coordinate of the blank square
Var rowBlank = 0;
Var colBlank = 0;
// Reachable indicates whether the clicked square is movable.
Var reachable = false;
If (row + 1 RowBlank = row + 1;
ColBlank = col;
Reachable = true;
// Window. status + = "reachable! RowBlank: "+ rowBlank +" colBlank: "+ colBlank;
}
Else if (row-1> = 0 & PicGame. board. rows [row-1]. cells [col]. style. background = ''){
RowBlank = row-1;
ColBlank = col;
Reachable = true;
// Window. status + = "reachable! RowBlank: "+ rowBlank +" colBlank: "+ colBlank;
}
Else if (col + 1 RowBlank = row;
ColBlank = col + 1;
Reachable = true;
// Window. status + = "reachable! RowBlank: "+ rowBlank +" colBlank: "+ colBlank;
}
Else if (col-1> = 0 & PicGame. board. rows [row]. cells [col-1]. style. background = ''){
RowBlank = row;
ColBlank = col-1;
Reachable = true;
// Window. status + = "reachable! RowBlank: "+ rowBlank +" colBlank: "+ colBlank;
}
Else {
// Window. status + = "unreachable! ";
Reachable = false;
}
// If it is movable, switch the current square with the blank square
If (reachable ){
Var tmpblknode = PicGame. board. rows [rowBlank]. cells [colBlank]. cloneNode (true );
// Note that The onclick method is missing for the cloned object.
TmpBlankNode. onclick = arguments. callee;
Var tmpCurrNode = PicGame. board. rows [row]. cells [col]. cloneNode (true );
TmpCurrNode. onclick = arguments. callee;
PicGame. board. rows [rowBlank]. cells [colBlank]. parentNode. replaceChild (tmpCurrNode, PicGame. board. rows [rowBlank]. cells [colBlank]);
PicGame. board. rows [row]. cells [col]. parentNode. replaceChild (tmpblknode, PicGame. board. rows [row]. cells [col]);
}
}
}
}
};
PicGame. init ();
$ ('Start'). onclick = function (){
PicGame. init ();
}
Script
