JS写的数字拼图小游戏

最新推荐文章于 2024-08-16 23:20:20 发布

iteye_12434

最新推荐文章于 2024-08-16 23:20:20 发布

阅读量220

点赞数

分类专栏： Javascript 文章标签：游戏 J# HTML

Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

昨天没事做，就用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>

iteye_12434

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS写的数字拼图小游戏

昨天没事做，就用JS写了个数字拼图的小游戏，自娱自乐。可惜关于逆序数的问题还没解决，现在有时是拼不成的，大家见谅了。&lt;html&gt;&lt;head&gt;&lt;title&gt;拼图&lt;/title&gt;&lt;style&gt;td.numTd{width : 20px ;height : 20px ;}div.numDiv{wi...
复制链接

扫一扫

专栏目录