JS写的数字拼图小游戏

 

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

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

 

  1. <html>
  2. <head>
  3. <title>拼图</title>
  4. <style>
  5. td.numTd{
  6. width : 20px ;
  7. height : 20px ;
  8. }
  9. div.numDiv{
  10. width : 100% ;
  11. height : 100% ;
  12. background-color : #000 ;
  13. color : #FFF ;
  14. text-align : center ;
  15. vertical-align : middle ;
  16. }
  17. </style>
  18. <script>
  19. var currPos = 9;
  20. function move(event){
  21.    switch(event.keyCode){
  22.       case 37 :
  23.          // 左键
  24.          if (currPos % 3 != 0){
  25.             var currTd = document.getElementById("numTd_" + currPos);
  26.             var nextTd = document.getElementById("numTd_" + (currPos + 1));
  27.             var temp = nextTd.innerHTML;
  28.             nextTd.innerHTML = " ";
  29.             currTd.innerHTML = temp;
  30.             currPos ++ ;
  31.          }
  32.          break;
  33.       case 38 :
  34.          // 上键
  35.          if (currPos < 7){
  36.             var currTd = document.getElementById("numTd_" + currPos);
  37.             var nextTd = document.getElementById("numTd_" + (currPos + 3));
  38.             var temp = nextTd.innerHTML;
  39.             nextTd.innerHTML = " ";
  40.             currTd.innerHTML = temp;
  41.             currPos += 3;
  42.          }
  43.          break;
  44.       case 39 :
  45.          // 右键
  46.          if (currPos % 3 != 1){
  47.             var currTd = document.getElementById("numTd_" + currPos);
  48.             var nextTd = document.getElementById("numTd_" + (currPos - 1));
  49.             var temp = nextTd.innerHTML;
  50.             nextTd.innerHTML = " ";
  51.             currTd.innerHTML = temp;
  52.             currPos -- ;
  53.          }
  54.          break;
  55.       case 40 :
  56.          // 下键
  57.          if (currPos > 3){
  58.             var currTd = document.getElementById("numTd_" + currPos);
  59.             var nextTd = document.getElementById("numTd_" + (currPos - 3));
  60.             var temp = nextTd.innerHTML;
  61.             nextTd.innerHTML = " ";
  62.             currTd.innerHTML = temp;
  63.             currPos -3;
  64.          }
  65.          break;
  66.       default :
  67.          break;
  68.    }
  69.    if (isWin()){
  70.       alert("恭喜你,过关了!");
  71.       initNums();
  72.    }
  73. }
  74. function isWin(){
  75.    for (i = 1; i < 9; i ++ ){
  76.       var numTd = document.getElementById("numTd_" + i);
  77.       var numDiv = numTd.getElementsByTagName("div");
  78.       if (i != numTd.innerText){
  79.          return false;
  80.       }
  81.    }
  82.    return true;
  83. }
  84. function initNums(){
  85.    var numArr = new Array(1, 2, 3, 4, 5, 6, 7, 8, 9);
  86.    var newnewNumArr = new Array();
  87.    do{
  88.       var tempStr = "";
  89.       for(i in numArr){
  90.          var flag = true;
  91.          do{
  92.             tempNum = numArr[parseInt(Math.random() * 100) % 9];
  93.             if (tempStr.search(tempNum) == -1){
  94.                newNumArr[i] = tempNum;
  95.                tempStr += tempNum;
  96.                flag = false;
  97.             }
  98.          }
  99.          while(flag);
  100.       }
  101.    }while(inverNum(newNumArr) % 2 == 0);
  102.    var len = newNumArr.length;
  103.    for(j = 0; j < len; j ++ ){
  104.       if (newNumArr[j] != 9){
  105.          document.getElementById("numTd_" + (j + 1)).innerHTML = "<div id='numDiv_"+newNumArr[j]+"' class='numDiv'>" + newNumArr[j] + "</div>";
  106.       }
  107.       else{
  108.          document.getElementById("numTd_" + (j + 1)).innerHTML = " ";
  109.          currPos = j + 1;
  110.       }
  111.    }
  112.   // document.getElementById("output").innerText = newNumArr;
  113. }
  114. function inverNum(numArr){
  115.    var len = numArr.length;
  116.    var count = 0;
  117.    for(i = 0; i < len - 1; i ++ ){
  118.       for(j = i + 1; j < len; j ++ ){
  119.          if (numArr[j] > numArr[i]){
  120.             count ++ ;
  121.          }
  122.       }
  123.    }
  124.   // alert("逆序数: "+count);
  125.    return count;
  126. }
  127. </script>
  128. </head>
  129. <body onkeyup="move(event);" onload="initNums();">
  130. <table align="center">
  131.     <tr>
  132.         <td id="numTd_1" class="numTd"> 
  133.         </td>
  134.         <td id="numTd_2" class="numTd"> 
  135.         </td>
  136.         <td id="numTd_3" class="numTd"> 
  137.         </td>
  138.     </tr>
  139.     <tr>
  140.         <td id="numTd_4" class="numTd"> 
  141.         </td>
  142.         <td id="numTd_5" class="numTd"> 
  143.         </td>
  144.         <td id="numTd_6" class="numTd"> 
  145.         </td>
  146.     </tr>
  147.     <tr>
  148.         <td id="numTd_7" class="numTd"> 
  149.         </td>
  150.         <td id="numTd_8" class="numTd"> 
  151.         </td>
  152.         <td id="numTd_9" class="numTd"> 
  153.         </td>
  154.     </tr>
  155. </table>
  156. <table>
  157.     <tr>
  158.         <td id="output"></td>
  159.     </tr>
  160. </table>
  161. </body>
  162. </html>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值