数字拼图java小程序_JS写的数字拼图小游戏代码[学习参考]

昨天没事做，就用JS写了个数字拼图的小游戏，自娱自乐。

可惜关于逆序数的问题还没解决，现在有时是拼不成的，大家见谅了。

拼图

td.numTd{

width : 20px ;

height : 20px ;

}

div.numDiv{

width : 100% ;

height : 100% ;

background-color : #000 ;

color : #FFF ;

text-align : center ;

vertical-align : middle ;

}

var currPos = 9;

function move(event){

switch(event.keyCode){

case 37 :

// 左键

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 :

// 上键

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 :

// 右键

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 :

// 下键

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("恭喜你，过关了！");

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 = "

" + newNumArr[j] + "

";

}

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("逆序数： "+count);

return count;

}