JS写的数字拼图小游戏

最新推荐文章于 2024-06-18 22:08:24 发布

好吃的松子

最新推荐文章于 2024-06-18 22:08:24 发布

阅读量927

点赞数

分类专栏： JavaScript 文章标签： class output 游戏 div

本文链接：https://blog.csdn.net/husheng86/article/details/3173870

版权

JavaScript 专栏收录该内容

2 篇文章 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 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("逆序数： "+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>
 

好吃的松子

关注

0
点赞
踩
2

收藏

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

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

扫一扫