본문 바로가기
PROJECT/MINI

퍼즐게임

Binsoo 2020. 8. 18. 15:16
728x90
반응형

두번째 미션 퍼즐 움직이기

 

시작 버튼을 누르면 

 onClick = "start( )" 을 실행하겠다

 

start 가 하는 일은 for 문 두 개가 일을한다.

 

  • 첫번 째 for 문은
    • 0부터 16까지 반복문을 돌리면서 Math 함수를 사용해서 난수를 생성한다 => sunsu[a] 번째에 저장한다
  • 두번 째 for 문은
    • 0 부터 a 까지 반복문을 돌리면서 중복 체크를 진행한다.
    • 즉,  방금 전 a에 대입한 숫자가 b에 대입 되어있니?
  • 그리고 mix() 함수를 호출한다

  • 배열에 있는 이미지 파일의 경로를 대입을 해주는구나

 

 

그럼 이제 내가 해야 할 것은 move 와 bingo 함수 채우기.

 

move가 하는 일은 퍼즐을 움직이는 거겠지

 

move 를 호출 할 때 i를 보내는거 같은데 i가 뭘까 싶어서 찍어보자

이미지 파일 경로를 보내는건 아니네 

 

이게 Array 의 숫자를 뜻하는거 같기도하다..

 

30분쯤 고민했는데 이 방법은 어떨까

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

다른 방법을 생각해보자.

임시로 다른 배열을 만들어서 다 복사하는거지

if 를 걸어서 blink 일때랑 k 번째 일때는 continue 해주고

 

미리 temp 로 blink 랑 k 를 바꾸고?

 

어허이 하다가 이 방법은 어떨까 싶었는데

에라이 움직이지도 않아

js 문자열 비교 함수가 틀릴 수도, 

 

 

아니네 비교 잘 되네 헛다리 꿀잼

 

엥 이방법도 어쩌면 잘 되겠다.. 싶었는데 

이 고냥이가 날 그냥 애잔하게 쳐다본다 ㅋㅋㅋ 아냐 난 괜찮아 그렇게 쳐다보지마

오 이렇게 바꿨더니

 

움직이기 시작했다...

 

한단계는 올라온 듯 이제 루틴을 찾자!

 

절대값

abs(-4) => 4

abs(-1) => 1

 

헛다리 제대로 짚은 나! ㅋㅋㅋㅋㅋ

태웅 코드 보고서는 아,, 이렇게 하는거구나,,,

 

응 ~ 완성본!  해석해보자*^^*

<HTML>
	<HEAD>
	
	<script type="text/javascript">
		//var  flag=false;
	   var sunsu = new Array( );
	   var temp = 1;
	   var temp2 = 1;
	   var tempimg;
	   var cnt = 0;
	   var imgsource1 = new Array("1.gif", "2.gif", "3.gif",
					   "4.gif", "5.gif","6.gif", "7.gif",
					   "8.gif", "9.gif", "10.gif", "11.gif",
					   "12.gif", "13.gif", "14.gif", "15.gif","blink.gif");
	   var imgsource2 = new Array("1.gif", "2.gif", "3.gif",
					   "4.gif", "5.gif","6.gif", "7.gif",
					   "8.gif", "9.gif", "10.gif", "11.gif",
					   "12.gif", "13.gif", "14.gif", "15.gif","blink.gif");
	   var blink = 0;
	
	   function start( ) { //시작버튼클릭시 호출되는 함수
		   for(a=0; a<imgsource1.length ; a++){
				 sunsu[a] = Math.round(Math.random()*15); //난수 
			  for(b=0 ; b<a ; b++){
			   if( sunsu[a] ==  sunsu[b]) {  a--;  } //중복체크 
			   }// for b end 
			} //for a end
		  mix( );  //그림섞기
	   }//start end
	
	   function  mix( ){
		  for(i=0; i<16; i++) {
			 document.images[i].src = imgsource1[sunsu[i]];
			 if (sunsu[i]==15) blink = i;
		  } 
	   }// mix end
	
	   function movea(k){
		  document.images[k].src     = imgsource2[sunsu[blink]];
		  document.images[blink].src = imgsource2[sunsu[k]];      
		  
		  tempimg                  = imgsource2[sunsu[k]];
		  imgsource2[sunsu[k]]     = imgsource2[sunsu[blink]];
		  imgsource2[sunsu[blink]] = tempimg;
	
		  tempk = blink;
		  blink = k;
		  k     = tempk;
	   }
	
	   function move(k){
		  if(blink%4==3){
			 if(k==(blink-1)||k==(blink-4)||k==(blink+4))
				movea(k);
		  }else if(blink%4==0){
			 if(k==(blink+1)||k==(blink+4)||k==(blink-4))
				movea(k);
		  }else if(k==(blink+1)||k==(blink-1)||k==(blink+4)||k==(blink-4))
				movea(k);
	   }
	
	   function bingo( ){
		  if(imgsource1==imgsource2){
			 alert('성공'); 
		  }
	   }// bingo end
	</script>
	</head>
	
	<body>
	<font  size=7  color=green> <b> 퍼즐게임 </b></font><br>
	<form>
	   <input id="btn_name" type = "button" value = "시 작" onClick = "start( )"
		  style="font-size:24pt; font-style:bold; " > <p>
	</form>
	
	<script type="text/javascript">
	   imgsource = new Array("1.gif", "2.gif", "3.gif", "4.gif",
						"5.gif", "6.gif", "7.gif", "8.gif",
						  "9.gif", "10.gif", "11.gif", "12.gif",
					   "13.gif", "14.gif", "15.gif", "16.gif") ;
	
	   for (i =0 ; i<imgsource.length ; i++){
		 document.write("<img src=" + imgsource[i] +
					  " border = 1 onClick = 'move(" + i + ")'>") ;
		 if (((i+1)%4)==0) document.write("<br>") ;
	   }
	</script>
	
	</body>
	</html>

 

[ 해 석 ]

 

	   function move(k){
		  if(blink%4==3){
			 if(k==(blink-1)||k==(blink-4)||k==(blink+4))
				movea(k);
		  }else if(blink%4==0){
			 if(k==(blink+1)||k==(blink+4)||k==(blink-4))
				movea(k);
		  }else if(k==(blink+1)||k==(blink-1)||k==(blink+4)||k==(blink-4))
				movea(k);
	   }

move 를 단 두 줄에 끝낼려고 했던 나,,,,

내가 생각했던 것보다 더 많은 변화가 필요하구나

 

일단 이 체크하는 방식은

파랑을 기준으로 상하좌우만 이벤트가 발생해야해 그러기 때문에 이렇게 체크를 해주는건데

파랑은 blank 니까

 

blank 랑 좌우는 abs(1) 씩 차이나고

blank 랑 상하는 abs(4) 씩 차이나고

 

아니 태웅,, 태웅꺼 보기는 했는데 나는 절대값을 이용해 봐야겠다 

 

오예! 성공 코드가 훨씬 짧아졌다 얄루

	   function move(k){

		  var num = Math.abs(blink-(k))
		  
		  if(num==4 || num==1){
			movea(k);
		  }
	   }

이 코드로 그러면 이제 사용자가 누른 값이 bkank 랑 절대값으로 1하고 4 씩 차이가난다면 성공

 

	   function movea(k){
		  document.images[k].src     = imgsource2[sunsu[blink]];
		  document.images[blink].src = imgsource2[sunsu[k]];      
		  
		  tempimg                  = imgsource2[sunsu[k]];
		  imgsource2[sunsu[k]]     = imgsource2[sunsu[blink]];
		  imgsource2[sunsu[blink]] = tempimg;
	
		  tempk = blink;
		  blink = k;
		  k     = tempk;
	   }

 

이 두 코드는 내가 생각한 대로지만

document.images[k].src     = imgsource2[sunsu[blink]];

document.images[blink].src = imgsource2[sunsu[k]];      

 

실제로 배열도 손을 봐주고 이동 시키기

tempimg                  = imgsource2[sunsu[k]];

imgsource2[sunsu[k]]     = imgsource2[sunsu[blink]];

imgsource2[sunsu[blink]] = tempimg;

 

나는 문자열을 비교해서 blink.gif 를 찾으려고 했는데 태웅은 애초에  blink.gif의 위치를 설정해주고

이렇게 moves 에서 바꿔주는 구나

tempk = blink;

blink = k;

k     = tempk;

 

난 태웅이 만든 movea() 를 삭제하고 합체 시켜야지

코드가 간결해서 마음에 든당

	   function move(k){

		  var num = Math.abs(blink-(k))

		  if(num==4 || num==1){

			 document.images[k].src     = imgsource2[sunsu[blink]];
		 	 document.images[blink].src = imgsource2[sunsu[k]];      
		  
			 tempimg                  = imgsource2[sunsu[k]];
		 	 imgsource2[sunsu[k]]     = imgsource2[sunsu[blink]];
		 	 imgsource2[sunsu[blink]] = tempimg;

		 	 blink = k;
		  }
	   }

 

자, 그러면 move 에서 하는일을 진짜 제대로 차근이 짚어보자.

 

사용자가 누른 위치 값을  k 매개변수로 받자

여기서 제일 먼저 할 일은 blink 값에서 k 값을 뻰다.

 

사용자가 상하좌우에 있는 칸을 클릭했다면 ( 6, 9, 11, 14 )

이렇게 되어있겠지?

 

10 - 6   = 4

10 - 9   = 1

10 - 11  = -1

10 - 14  = -4

 

 

 

 

 

 

Math.abs(num) 을 이용해서 애를 절대값으로 바꾸고

(num==4 || num==1) 이 조건을 확인하자.

 

 

 

 

 

 

 

 

 

참이라면 이제 교체 작업을 실행해 줘야 하는데,

 

document.images[k].src     = imgsource2[sunsu[blink]];

사용자가 누른 값에는 blink 값을 넣어주고.

 

document.images[blink].src = imgsource2[sunsu[k]];

blink 값에는 사용자가 누른 값을 넣어주지.

 

 

그리고 temping 을 이용해서 두 값을 교체 해주자

tempimg                       = imgsource2[sunsu[k]];

imgsource2[sunsu[k]]      = imgsource2[sunsu[blink]];

imgsource2[sunsu[blink]] = tempimg;

 

blink 의 값과 k 의 값도 다시 바꿔줘야 하니까 바꿔주자

blink = k;

 

 

[ 최 종 완 성 본 ]

<HTML>
	<HEAD>
	
	<script type="text/javascript">
		//var  flag=false;
	   var sunsu = new Array( );
	   var temp = 1;
	   var temp2 = 1;
	   var tempimg;
	   var cnt = 0;
	   var imgsource1 = new Array("1.gif", "2.gif", "3.gif",
					   "4.gif", "5.gif","6.gif", "7.gif",
					   "8.gif", "9.gif", "10.gif", "11.gif",
					   "12.gif", "13.gif", "14.gif", "15.gif","blink.gif");
	   var imgsource2 = new Array("1.gif", "2.gif", "3.gif",
					   "4.gif", "5.gif","6.gif", "7.gif",
					   "8.gif", "9.gif", "10.gif", "11.gif",
					   "12.gif", "13.gif", "14.gif", "15.gif","blink.gif");
	   var blink = 0;
	
	   function start( ) { //시작버튼클릭시 호출되는 함수
		   for(a=0; a<imgsource1.length ; a++){
				 sunsu[a] = Math.round(Math.random()*15); //난수 
			  for(b=0 ; b<a ; b++){
			   if( sunsu[a] ==  sunsu[b]) {  a--;  } //중복체크 
			   }// for b end 
			} //for a end
		  mix( );  //그림섞기
	   }//start end
	
	   function  mix( ){
		  for(i=0; i<16; i++) {
			 document.images[i].src = imgsource1[sunsu[i]];
			 if (sunsu[i]==15) blink = i;
		  } 
	   }// mix end
	
	
	   function move(k){

		  var num = Math.abs(blink-(k))

		  if(num==4 || num==1){

			 document.images[k].src     = imgsource2[sunsu[blink]];
		 	 document.images[blink].src = imgsource2[sunsu[k]];      
		  
			 tempimg                  = imgsource2[sunsu[k]];
		 	 imgsource2[sunsu[k]]     = imgsource2[sunsu[blink]];
		 	 imgsource2[sunsu[blink]] = tempimg;
	
		 	 blink = k;

		  }
	   }
	
	   function bingo( ){
		  if(imgsource1==imgsource2){
			 alert('성공'); 
		  }
	   }// bingo end
	</script>
	</head>
	
	<body>
	<font  size=7  color=green> <b> 퍼즐게임 </b></font><br>
	<form>
	   <input id="btn_name" type = "button" value = "시 작" onClick = "start( )"
		  style="font-size:24pt; font-style:bold; " > <p>
	</form>
	
	<script type="text/javascript">
	   imgsource = new Array("1.gif", "2.gif", "3.gif", "4.gif",
						"5.gif", "6.gif", "7.gif", "8.gif",
						  "9.gif", "10.gif", "11.gif", "12.gif",
					   "13.gif", "14.gif", "15.gif", "16.gif") ;
	
	   for (i =0 ; i<imgsource.length ; i++){
		 document.write("<img src=" + imgsource[i] +
					  " border = 1 onClick = 'move(" + i + ")'>") ;
		 if (((i+1)%4)==0) document.write("<br>") ;
	   }
	</script>
	
	</body>
	</html>

 

장장 4시간 만에 마무리 짓다 🥳🥳🥳🥳

 

 

 

728x90
반응형

'PROJECT > MINI' 카테고리의 다른 글

반반 피자 만들기  (0) 2020.08.18

'PROJECT/MINI' Related Articles

티스토리툴바