昨天没事做,就用JS写了个数字拼图的小游戏,自娱自乐。
可惜关于逆序数的问题还没解决,现在有时是拼不成的,大家见谅了。
<html><head><title>拼图</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 :// 左键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 newNumArr = 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("逆序数: "+count);return count;}</script></head><body οnkeyup="move(event);" οnlοad="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>