FRONT-END/Javascript

[Javascript] 퍼즐게임 만들기

단비_danbee 2020. 8. 18. 15:33

시작버튼을 누르면 random(난수)을 이용해서 사진을 섞는다.

 

파란색을 기준으로 상, 하, 좌, 우로만 이동이 가능하고 대각선으로 이동하려고 시도하면, 안내창이 나온다.

 

 

 

<HTML>
	<HEAD>
	
	<script type="text/javascript">
		//var  flag=false;
		var sunsu = new Array( );
		var temp = 1;
		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 blink = 0;
	
		function start( ) { //시작버튼클릭시 호출되는 함수
			 for(a=0; a<16 ; 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;
				   //alert("blink : " + blink);
			   }
			} 
		}// mix end
	
	
		function move(k) {
			var direction = Math.abs(blink-(k)) // -4, 4, -1, 1 절댓값만들기 
			var clicked_img = k;
			var blue = "blink.gif";
			var original = document.images[k].src;
			
			if(direction == 4 || direction == 1){
			document.images[k].src = blue;
			document.images[blink].src = original;
			blink=k;
			} else {
				alert("대각선은 안됩니다.");
			}


		}// move end
	
		function bingo( ){
			for(i=0; i<16; i++) {
			   document.images[i].src = imgsource1[i];
			   alert("성공!");
			} 
		}// bingo end
	</script>
	</head>
	
	<body>
	
	<form>
		<font  size=7  color=green> <b> 퍼즐게임 </b></font> 
		<input id="btn_name" type = "button" value = "  시&nbsp;&nbsp;&nbsp;&nbsp;작  " 
		 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<16 ; i++){
		  document.write("<img src=" + imgsource[i] + " id='img' border = 1 onClick = 'move(" + i + ")'>") ;
		  if (((i+1)%4)==0) document.write("<br>") ;
		}
	</script>

	</body>
</html>

 

round 는 소숫점을 빼주는 기능을 한다.