JS 가 쓴 숫자 퍼 즐 게임.

4988 단어 html게임.J#
어 제 는 할 일이 없어 서 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>

좋은 웹페이지 즐겨찾기