JS写的数字拼图小游戏-搜索墙

JS写的数字拼图小游戏

1楼 Jathon_hs 2008-10-29

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

热门关注
标题	回复	点击
[源码]XiorkFlow:用JavaScript写的工作流设计器	73	540
推荐一个不错的免费JavaScript开发工具，比aptana轻得多~~	70	425
jquery和prototype框架的比较。。。	62	370
大胆预测下JS框架的走势	106	357
开心网【朋友买卖、咬人、争车位】Firefox插件	118	307
Mootools前景？拿来主义VS重复发明轮子	102	301
Mootools和Jquery之间的选择问题	60	270
Mootools、jQuery之说三道四	64	246
js操作html的table,包括添加行，添加列，删除行，删除列，合并单元格（未实现）	29	214
关于Gecko的eval第二参数探密	51	209

相关主题	关闭
JS写的数字拼图小游戏 JS写的数字拼图小游戏用JS写的小游戏 JAVA拼图小游戏猜数字小游戏判断数字大小(小游戏）之一小游戏 java 写的 Sliding tiles小游戏小游戏源代码~~ 小游戏源代码~~

关于本站 pp酷网站导航友情链接

声明:本站部分数据来源于网络，仅供参考，如有版权问题，请联系我们，我们将及时删除!转载本站请注明来源