Copy codeThe Code is as follows:
<Html>
<Head>
<Title> puzzle </title>
<Style>
Td. numTd {
Width: 20px;
Height: 20px;
}
Div. numDiv {
Width: 100%;
Height: 100%;
Background-color: #000;
Color: # FFF;
Text-align: center;
Vertical-align: middle;
}
</Style>
<Script>
Var currPos = 9;
Function move (event ){
Switch (event. keyCode ){
Case 37:
// Left click
If (currPos % 3! = 0 ){
Var currTd = document. getElementById ("numTd _" + currPos );
Var nextTd = document. getElementById ("numTd _" + (currPos + 1 ));
Var temp = nextTd. innerHTML;
NextTd. innerHTML = "";
CurrTd. innerHTML = temp;
CurrPos ++;
}
Break;
Case 38:
// Press
If (currPos <7 ){
Var currTd = document. getElementById ("numTd _" + currPos );
Var nextTd = document. getElementById ("numTd _" + (currPos + 3 ));
Var temp = nextTd. innerHTML;
NextTd. innerHTML = "";
CurrTd. innerHTML = temp;
CurrPos + = 3;
}
Break;
Case 39:
// Right-click
If (currPos % 3! = 1 ){
Var currTd = document. getElementById ("numTd _" + currPos );
Var nextTd = document. getElementById ("numTd _" + (currPos-1 ));
Var temp = nextTd. innerHTML;
NextTd. innerHTML = "";
CurrTd. innerHTML = temp;
CurrPos --;
}
Break;
Case 40:
// Down key
If (currPos> 3 ){
Var currTd = document. getElementById ("numTd _" + currPos );
Var nextTd = document. getElementById ("numTd _" + (currPos-3 ));
Var temp = nextTd. innerHTML;
NextTd. innerHTML = "";
CurrTd. innerHTML = temp;
CurrPos-= 3;
}
Break;
Default:
Break;
}
If (isWin ()){
Alert ("congratulations, pass! ");
InitNums ();
}
}
Function isWin (){
For (I = 1; I <9; I ++ ){
Var numTd = document. getElementById ("numTd _" + I );
Var numDiv = numTd. getElementsByTagName ("div ");
If (I! = NumTd. innerText ){
Return false;
}
}
Return true;
}
Function initNums (){
Var numArr = new Array (1, 2, 3, 4, 5, 6, 7, 8, 9 );
Var newnewNumArr = new Array ();
Do {
Var tempStr = "";
For (I in numArr ){
Var flag = true;
Do {
TempNum = numArr [parseInt (Math. random () * 100) % 9];
If (tempStr. search (tempNum) =-1 ){
NewNumArr [I] = tempNum;
TempStr + = tempNum;
Flag = false;
}
}
While (flag );
}
} While (inverNum (newNumArr) % 2 = 0 );
Var len = newNumArr. length;
For (j = 0; j <len; j ++ ){
If (newNumArr [j]! = 9 ){
Document. getElementById ("numTd _" + (j + 1 )). innerHTML = "<div id = 'numdiv _" + newNumArr [j] + "'class = 'numdiv '>" + newNumArr [j] + "</div> ";
}
Else {
Document. getElementById ("numTd _" + (j + 1). innerHTML = "";
CurrPos = j + 1;
}
}
// Document. getElementById ("output"). innerText = newNumArr;
}
Function inverNum (numArr ){
Var len = numArr. length;
Var count = 0;
For (I = 0; I <len-1; I ++ ){
For (j = I + 1; j <len; j ++ ){
If (numArr [j]> numArr [I]) {
Count ++;
}
}
}
// Alert ("reverse order:" + count );
Return count;
}
</Script>
</Head>
<Body onkeyup = "move (event);" onload = "initNums ();">
<Table align = "center">
<Tr>
<Td id = "numTd_1" class = "numTd">
</Td>
<Td id = "numTd_2" class = "numTd">
</Td>
<Td id = "numTd_3" class = "numTd">
</Td>
</Tr>
<Tr>
<Td id = "numTd_4" class = "numTd">
</Td>
<Td id = "numTd_5" class = "numTd">
</Td>
<Td id = "numTd_6" class = "numTd">
</Td>
</Tr>
<Tr>
<Td id = "numTd_7" class = "numTd">
</Td>
<Td id = "numTd_8" class = "numTd">
</Td>
<Td id = "numTd_9" class = "numTd">
</Td>
</Tr>
</Table>
<Table>
<Tr>
<Td id = "output"> </td>
</Tr>
</Table>
</Body>
</Html>