Online Demo http://img.jb51.net/online/pintu/pintu.htm
CopyCode The Code is as follows: <HTML>
<Head>
<Title> JS game </title>
<Style>
Body {
Font-size: 9pt;
}
Table {
Border-collapse: collapse;
}
Input {
Width: 20px;
}
</Style>
</Head>
<Body>
Original JS works: JS puzzle game <br>
Complete annotations, object-oriented <br>
Reprinted please indicate from <a href = "http://blog.csdn.net/sunxing007"> http://blog.csdn.net/sunxing007 </a> <br>
<Input type = "text" id = "lines" value = '3'/> row <input type = "text" id = "Cols" value = '3'/> Column <button id = "start"> Start </button> <br>
<Table id = "board" border = 1 cellspacing = 0 cellpadding = 0>
<Tr> <TD> </tr>
<Tr> <TD> </tr>
</Table>
<Br> <BR> <br>
<br>
Reprinted please indicate from <a href = "http://blog.csdn.net/sunxing007"> http://blog.csdn.net/sunxing007 </a> <br>
</Body>
</Html>
<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 <this. X; I ++ ){
VaR TR = This. Board. insertrow (-1 );
For (var j = 0; j <this. Y; 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. Length-1; 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 *******************/
/**
* Disordered sorting Algorithm Yes: 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 <index. length; 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 <TDs. length; I ++ ){
Clonetds. Push (TDS [I]. clonenode (true ));
}
For (VAR I = 0; I <index. length; 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. length; 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 <picgame. X & 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 (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 <picgame. Y & picgame. Board. Rows [row]. cells [col + 1]. style. Background = ''){
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>