게임
[List][Prev][Next]
규니님의 퍼즐게임입니다. [ Preview ]

프로그램에 대한 설명입니다.

var numPannel=9;
//조각그림의 갯수를 지정합니다.

var pattern=new Array(numPannel);
//조각그림을 움직일 수 있는 곳과 없는 곳을 숫자로 저장한 것입니다.

var pannel_img=new Array(numPannel);
//조각그림을 담을 변수입니다.

var current=new Array(numPannel);
//현재 모든 위치에 몇번조각그림이 있는가를 저장하는 변수입니다.
//이는 조각그림이 모두 제위치에 있는가를 검사하는데 쓰입니다.

var blnk,temp;
var gameOver=1; //게임이 끝났는지를 알수있는 변수입니다.
var blank_img; //비어있는 공간을 채울 그림을 저장할 것입니다.
var blank=9; //게임 시작전에 오른쪽 아래를 빈공간으로 둡니다.
var startTime,endTime; //시작시간과 끝난시간 기록용입니다.
pattern[1]="2400";
pattern[2]="1350";
pattern[3]="2600";
pattern[4]="1570";
pattern[5]="2468";
pattern[6]="3590";
pattern[7]="4800";
pattern[8]="5790";
pattern[9]="6800";

// 패턴의 숫자는 다음에서 비롯됩니다. 빈공간이 몇번으로 움직일 수 있는가를 나타냅니다.
//
// 1 | 2 | 3
// --+---+--
// 4 | 5 | 6
// --+---+--
// 7 | 8 | 9
//
// pattern[1]은 왼쪽위의 1번의 위치로 2번 또는 4번으로 움직일 수 있습니다.
// pattern[5]는 가운데 5번의 위치로 2,4,6,8번으로 움직일 수 있습니다.
// 이런식으로 움직일 수 있는 곳을 번호로 저장한 것입니다.
// 0번은 패턴문자열의 길이를 일괄적으로 맞추기 위한것입니다.

for(var i=1;i<=numPannel; i++){
//조각그림의 갯수만큼 반복하는 루틴입니다.

pannel_img[i]=new Image();
//이미지를 담을 변수로 선언하는 것입니다.

pannel_img[i].src="pannel"+i+".gif";
//이미지의 이름을 적어줍니다.

current[i]=i;

//초기화하는 것이므로 모든 그림은 제위치에 있습니다.
}

blank_img=new Image(); blank_img.src="blank.gif";
//빈공간에 넣을 이미지를 지정합니다.

function clicked(n){
//조각그림을 클릭했을 때 실행합니다.
//n은 클릭된 절대적인 위치의 번호를 나타냅니다.
// 1 | 2 | 3
// --+---+--
// 4 | 5 | 6
// --+---+--
// 7 | 8 | 9

if(gameOver){
document.forms[0].elements[0].value="게임이 끝났잖아요 !";
//게임이 끝났을 때 오른쪽 위의 입력 창에 메시지를 씁니다.
//게임이 진행중이지 않을 경우 실행합니다.

}else{
for(var i=0; i<4; i++){
blnk=parseInt(pattern[n].charAt(i),10);

if(numPannel==current[blnk]){

//blnk는 n번위치에서 움직일 수 있는 방향을 패턴으로부터 차례로 가져옵니다.
//current배열은 현재 어느위치에 몇번조각그림이 있는가의 배열입니다.
//그러므로 currenr[blnk]는 클릭한 그림ㅁ이 움직일 수 있는 방향이며
//그것이 numPannel 즉, 빈공간인가 검사합니다.
//조각그림을 섞을때 빈공간의 위치는 그림의 갯수였음을 상기하세요.

document.images[n-1].src=blank_img.src;

//브라우저에서 첫번째그림은 document.images[0].src입니다.
//조각그림의 위치는 첫번째 그림의 위치가 1부터입니다.
//다음라인까지는 클릭한 그림과 빈그림을 바꿉니다.
document.images[blnk-1].src=pannel_img[current[n]].src;


temp=current[blnk];

current[blnk]=current[n];

current[n]=temp;

//current배열도 서로 위치를 바꿉니다.

document.forms[0].elements[0].value="";
//아무런 에러가 없으므로 오른쪽위의 메시지를 없앱니다.

break;
//갈수 있는 곳이 있으니 여기서 for문을 여기서 탈출합니다.
}
}
if(i==4) document.forms[0].elements[0].value="그건 못움직여요 !";
//빈공간이 움직일 수 없는 경우입니다. i==4라는 것은 위의 for문에서
//모든 움직일 수 있는 공간을 조사해본 결과입니다. 문자열은 i==3까지

//존재하므로 i==4라면 움직일 수 있는 곳이 없다는 것이 됩니다.

for(i=1; i<=9; i++){
if(current[i]!=i)break;

//조각그림을 모두 제위치에 이동시켰는가를 검사합니다.
}
if(i==10){ drawPannel(); gameOver=1;}

//조각그림을 모두 제위치에 이동시켰을 경우입니다.
//모든 그림을 다시 그려넣고 게임이 끝났음을 변수에 저장합니다.
}
}

function initial(){
//'게임시작'을 클릭했을 경우 실행합니다. 조각그림을 섞는 함수입니다.

var m=0,n;

document.images[8].src=blank_img.src

document.forms[0].elements[0].value="섞고 있습니다...";
while(m++<1000){
//랜덤하게 수를 발생하여 clicked(n)함수의 일부루틴을 이용해 그림판을 섞습니다.
//그림은 나중에 그리며 이 while문에서는 current배열의 값만 섞습니다.

n=Math.ceil(Math.random()*9);

for(var i=0; i<4; i++){
blnk=parseInt(pattern[n].charAt(i),10);

if(numPannel==current[blnk]){

temp=current[blnk];

current[blnk]=current[n];

current[n]=temp;

break;
}
}
}
for(i=1; i<=9; i++){
//current배열내의 값은 조각그림의 번호이므로 이를 이용해서 그림을 그립니다.

if(current[i]==numPannel){

document.images[i-1].src=blank_img.src;

}else{
document.images[i-1].src=pannel_img[current[i]].src;

}
}
gameOver=0;

document.forms[0].elements[0].value="시작하세요 !"

var now=new Date();
startTime=(now.getMinutes() * 60)+now.getSeconds();
//시작시간을 체크합니다.
}

function drawPannel(){
//게임이 끝났을 경우 실행합니다.

for(var i=1; i<=9; i++){
document.images[i-1].src=pannel_img[i].src

//모든그림을 다시 그려줍니다.
}
var now2=new Date();
endTime=now2.getMinutes()*60 + now2.getSeconds();
//끝난시간을 체크합니다.

var theScore=(endTime-startTime+3600)%3600;

document.forms[0].elements[0].value="해냈군... " + theScore + " 초 걸렸음";
document.forms[1].elements[0].value=theScore;

}


<%//# DataBinder.Eval(Container.DataItem, "album_title") %>
<%//# DataBinder.Eval(Container.DataItem, "contenttype") + " views" %>
link list for hairwigbeautyshop.com ::
Javascript Source List :