커뮤니티 > 자바스크립트

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>사다리 게임</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">

var Yl = {
getEl : function(strId){
  if (document.getElementById) return document.getElementById(strId);
  if (document.all) return document.all[strId];
}
//div 리턴
,getDiv : function(sWidth, sHeight, sBgColor){
  var d = document.createElement("div");
  if(sWidth) d.style.width = sWidth;
  if(sHeight) d.style.height = sHeight;
  if(sBgColor) d.style.backgroundColor = sBgColor;
  d.style.position = "absolute";
  d.style.overflow = "hidden";
  return d;
}
,arrColor : [
  '#8c7301','#9b014f','#0084a0','#ad8e00','#bb005f'
  ,'#00a0c2','#8d3901','#8f0197','#156200','#9ca53b'
  ,'#c9a601','#d6006d','#01b6de','#80adaf','#a44201'
  ,'#e0b800','#ec0078','#0021b0','#92b7d7','#013add'
  ]
,arrVerDiv : [] //수직 선 div
,arrHorDiv : [] //수평 선 div
,arrMovDiv : [] //이동 선 div

,arrIng : [] //진행여부 체크용

,arrMDiv : [] //이동선 배열 번호값 저장, 이동후 확인용

,nMaxWidth : 1000 //최고 넓이
,nWidth : 0 //사다리 넓이
,nHeight : 300 //사다리 높이

,nNum : 0

,arrTopDiv : [] //탑 div
,arrBotDiv : [] //아래 div
,arrGoDiv : [] //go 버튼 div

,init : function(){

  //갯수
  this.nNum = parseInt(this.getEl("sel_num").value);

  //넓이
  this.nWidth = parseInt(this.nMaxWidth/this.nNum);

  for(var i=0; i<this.nNum; i++){

   this.arrTopDiv[i] = this.getDiv(this.nWidth+"px", "50px", "");
   this.arrBotDiv[i] = this.getDiv(this.nWidth+"px", "50px", "");
   this.arrGoDiv[i] = this.getDiv(this.nWidth+"px", "30px", "");

   this.arrTopDiv[i].style.left = (i*this.nWidth)+"px";
   this.arrTopDiv[i].style.top = "20px";

   this.arrBotDiv[i].style.left = (i*this.nWidth)+"px";
   this.arrBotDiv[i].style.top = "410px";

   this.arrGoDiv[i].style.left = (i*this.nWidth)+"px";
   this.arrGoDiv[i].style.top = "70px";

   this.arrTopDiv[i].style.fontSize="12px";
   this.arrBotDiv[i].style.fontSize="12px";

   //this.arrTopDiv[i].style.border = "1px solid #CCCCCC";
   //this.arrBotDiv[i].style.border = "1px solid #CCCCCC";

   this.arrTopDiv[i].align = "center";
   this.arrBotDiv[i].align = "center";
   this.arrGoDiv[i].align = "center";

this.arrTopDiv[i].innerHTML = (i+1)+'<br><input type="text" id="inp_top_'+i+'" value="" style="width:90%" tabindex="'+(i+1)+'" />';
this.arrBotDiv[i].innerHTML = '<input type="text" id="inp_bot_'+i+'" value="" style="width:90%" tabindex="'+((i+1)+50)+'" />';

   this.getEl("div_body").appendChild(this.arrTopDiv[i]);
   this.getEl("div_body").appendChild(this.arrBotDiv[i]);
   this.getEl("div_body").appendChild(this.arrGoDiv[i]);


   this.arrVerDiv[i] = this.getDiv("1px", this.nHeight+"px", "#bbbbbb");

   this.arrVerDiv[i].style.left = ( (i*this.nWidth)+parseInt(this.nWidth/2) )+"px";
   this.arrVerDiv[i].style.top = "100px";

   this.getEl("div_body").appendChild(this.arrVerDiv[i]);

  }

  this.getEl("div_step1").style.display = "none";
  this.getEl("div_step2").style.display = "";

}
,create : function(){ //사다리 생성

  for(var i=0; i<this.nNum; i++){

   this.arrTopDiv[i].innerHTML = (i+1)+"<br>"+this.getEl("inp_top_"+i).value;
   this.arrBotDiv[i].innerHTML = this.getEl("inp_bot_"+i).value;
   this.arrGoDiv[i].innerHTML = '<input type="button" value="GO" onClick="Yl.start('+i+')">';

   this.arrTopDiv[i].style.overflow = "auto";
   this.arrBotDiv[i].style.overflow = "auto";

   this.arrIng[i] = false;

   this.arrMDiv[i] = [];
  }

  for(var i=0; i<(this.nNum*7); i++){

   var nLen = this.arrHorDiv.length;

   this.arrHorDiv[nLen] = this.getDiv(this.nWidth+"px","1px", "#aaaaaa");

     if( nx==nEx || (nx+nw)==nEx ){

      if(bCk){
       if(ny<nEy) nEy = ny;
      }else
       nEy = ny;

      bCk = true;
     }
    }
   }
  }

  this.move(nLen, pno, nSx, nSy, nEx, nEy);
}
,nSpeed : 10
,move : function(no, pno, nSx, nSy, nEx, nEy){

  if(bIng){

   setTimeout("Yl.move("+no+","+pno+","+nSx+","+nSy+","+nEx+","+nEy+")", 1);

  }else{

   if((sXy=="x")) this.arrMovDiv[no].style.height = "2px";
   else this.arrMovDiv[no].style.width = "2px";

   if( nEy<this.nHeight+100 ){
    this.moveStart((sXy=="x")?"y":"x", pno, nEx, nEy);
   }else{

    for(var i=0; i<this.arrVerDiv.length; i++){
     if(nEx==parseInt(this.arrVerDiv[i].style.left)){

      this.arrBotDiv[i].innerHTML = "<b>"+(pno+1)+"</b><br>"+this.arrBotDiv[i].innerHTML;

      this.arrGoDiv[pno].innerHTML = '<input type="button" value="확인" onClick="Yl.start('+pno+')">';

      break;
     }
    }
   }
  }
}
};

//F5 새로고침 막기
document.onkeydown = function(e){
if(!e) e = window.event;
if (e.keyCode == 116){
  if( confirm("새로 고침 하시겠습니까?") ){
  }else{
   e.keyCode = 0;
   return false;
  }
}
}

</script>

</head>

<body>

<div id="div_step1" style="font-size:12px;">

갯수 선택
<select id="sel_num">
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5" selected >5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
</select>
개

</div>

</body>
</html>