<html>
<head>
<title>JS puzzle game</title>
<style>
body{
font-size:9pt;
}
table{
border-collapse: collapse;
}
input{
width:20px;
}
</style>
</head>
<body>
JS original work: JS puzzle game<br>
Complete comments, object-oriented<br>
Please indicate the source from <a href="/sunxing007">/sunxing007</a><br>
<input type="text" value='3'/> row<input type="text" value='3'/> column <button > Start </button><br>
<table border=1 cellspacing=0 cellpadding=0>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<img id='img' src="http://img./online/pintu/" style="" /><br>
Please indicate the source for reprinting from <a href="/sunxing007">/sunxing007</a><br>
</body>
</html>
<script>
//The background image below ie7 will not be cached by default, causing delays and flickering, and fix this bug.
// (provided by /wtcsy/ by csdn netizen wtcsy)
try{
("BackgroundImageCache", false, true);
}catch(e){alert(e)};
//Auxiliary function
function $(id){return (id)};
/*************************************************
* js puzzle game v1.6
* Author sunxing007
* Please indicate the source of /sunxing007 when reprinting
**************************************************/
var PicGame = {
//Line count
x: 3,
//Number of columns
y: 3,
//Picture source
img: $('img'),
//Cell height
cellHeight: 0,
//Cell width
cellWidth: 0,
//The main object of this game is: table, each td corresponds to a small lattice that can be moved
board: $('board'),
//Initial function
init: function(){
//Determine the number of rows and columns of the puzzle game
= $('lines').value>1?$('lines').value : 3;
= $('cols').value>1?$('cols').value : 3;
//Delete the original row of the board
while(>0){
(0);
}
//Reconstruct the board according to the number of rows and columns
for(var i=0; i<; i++){
var tr = (-1);
for(var j=0; j<; j++){
var td=(-1);
}
}
//Calculate cell height and width
= /;
= /;
//Get all tds
var tds = ('td');
//For each td, set style
for(var i=0; i<-1; i++){
tds[i]. = ;
tds[i]. = ;
tds[i]. = "url(" + + ")";
tds[i]. = "solid #ccc 1px";
var currLine = parseInt(i/);
var currCol = i%;
//The most important thing here is to calculate the location of the background image of each cell so that they look like an image
tds[i]. = - * currCol;
tds[i]. = - * currLine;
}
/** begin: disrupt sorting************************/
/**
*
* Then I generate a target position for each td, which is less than 9 and is different,
* Then replace them to that place.
**/
//Target position sequence
var index = [];
index[0] = (()*(*));
while(<(*)){
var num = (()*(*));
for(var i=0; i<; i++){
if(index[i]==num){
break;
}
}
if(i==){
index[] = num;
}
// = index;
}
var cloneTds = [];
//Clone each td, and then replace it to the target position according to the index of the target position
for(var i=0; i<; i++){
(tds[i].cloneNode(true));
}
for(var i=0; i<; i++){
tds[i].(cloneTds[index[i]],tds[i]);
}
/** end: disrupt sorting***************************/
//Add onclick event for each td.
tds = ('td');
for(var i=0; i<; i++){
tds[i].onclick = function(){
//Coordinates of the clicked object
var row = ;
var col = ;
// = "row:" + row + " col:" + col;
//Coordinates of blank squares
var rowBlank = 0;
var colBlank = 0;
//reachable indicates whether the currently clicked block is movable
var reachable = false;
if(row+1< && [row+1].cells[col]. == ''){
rowBlank = row + 1;
colBlank = col;
reachable = true;
// +=" reachable! rowBlank: " + rowBlank + " colBlank:" + colBlank;
}
else if(row-1>=0 && [row-1].cells[col]. == ''){
rowBlank = row - 1;
colBlank = col;
reachable = true;
// +=" reachable! rowBlank: " + rowBlank + " colBlank:" + colBlank;
}
else if(col+1< && [row].cells[col+1]. == ''){
rowBlank = row;
colBlank = col + 1;
reachable = true;
// +=" reachable! rowBlank: " + rowBlank + " colBlank:" + colBlank;
}
else if(col-1>=0 && [row].cells[col-1]. == ''){
rowBlank = row;
colBlank = col - 1;
reachable = true;
// +=" reachable! rowBlank: " + rowBlank + " colBlank:" + colBlank;
}
else{
// +=" unreachable!";
reachable = false;
}
//If it is movable, exchange the current block and the blank block
if(reachable){
var tmpBlankNode = [rowBlank].cells[colBlank].cloneNode(true);
//It should be noted that the cloned object has lost the onclick method, so it needs to be supplemented
= ;
var tmpCurrNode = [row].cells[col].cloneNode(true);
= ;
[rowBlank].cells[colBlank].(tmpCurrNode,[rowBlank].cells[colBlank]);
[row].cells[col].(tmpBlankNode, [row].cells[col]);
}
}
}
}
};
();
$('start').onclick = function(){
();
}
</script>