[UI] 제이쿼리 UI 사용해서 직소퍼즐 만들기

 

 

 

 

			<!-- 퍼즐 -->
			<div class="puzzle">				
				<a href="#none" class="btn-hint">힌트보기</a>
				<div class="puzzle-map">
					<img src="./asset/img/puzzle/puzzle_bg.jpg" alt="">
					<div class="piece1-on"><img src="./asset/img/puzzle/1.png" alt=""></div>
					<div class="piece2-on"><img src="./asset/img/puzzle/2.png" alt=""></div>
					<div class="piece3-on"><img src="./asset/img/puzzle/3.png" alt=""></div>
					<div class="piece4-on"><img src="./asset/img/puzzle/4.png" alt=""></div>
					<div class="piece5-on"><img src="./asset/img/puzzle/5.png" alt=""></div>
					<div class="piece6-on"><img src="./asset/img/puzzle/6.png" alt=""></div>
					<div class="piece7-on"><img src="./asset/img/puzzle/7.png" alt=""></div>
					<div class="piece8-on"><img src="./asset/img/puzzle/8.png" alt=""></div>
					<div class="piece9-on"><img src="./asset/img/puzzle/9.png" alt=""></div>
					<div class="piece10-on"><img src="./asset/img/puzzle/10.png" alt=""></div>
					<div class="piece11-on"><img src="./asset/img/puzzle/11.png" alt=""></div>
					<div class="piece12-on"><img src="./asset/img/puzzle/12.png" alt=""></div>
				</div>
				<div class="puzzle-piece">
					<span class="piece1"><img src="./asset/img/puzzle/1.png" alt=""></span>
					<span class="piece2"><img src="./asset/img/puzzle/2.png" alt=""></span>
					<span class="piece3"><img src="./asset/img/puzzle/3.png" alt=""></span>
					<span class="piece4"><img src="./asset/img/puzzle/4.png" alt=""></span>
					<span class="piece5"><img src="./asset/img/puzzle/5.png" alt=""></span>
					<span class="piece6"><img src="./asset/img/puzzle/6.png" alt=""></span>
					<span class="piece7"><img src="./asset/img/puzzle/7.png" alt=""></span>
					<span class="piece8"><img src="./asset/img/puzzle/8.png" alt=""></span>
					<span class="piece9"><img src="./asset/img/puzzle/9.png" alt=""></span>
					<span class="piece10"><img src="./asset/img/puzzle/10.png" alt=""></span>
					<span class="piece11"><img src="./asset/img/puzzle/11.png" alt=""></span>
					<span class="piece12"><img src="./asset/img/puzzle/12.png" alt=""></span>
				</div>
			</div>

 

			/* -------------------------
					퍼즐 맞추기
			-------------------------*/

			//랜덤
			const piece = $('.puzzle-piece span');
			const pieceOdd = $('.puzzle-piece span:nth-child(odd)');
			const pieceEven = $('.puzzle-piece span:nth-child(even)');
			const width = $('.puzzle-piece').width() - 180;
			const height = $('.puzzle-piece').height() - 150;

			for (let i = 0; i < piece.length; i++) {
				let topPosition = Math.floor(Math.random() * height) ;
				let leftPosition = Math.floor(Math.random() * width) ;

				pieceOdd.eq(i).css({top: topPosition + 'px', left: leftPosition + 'px'});
				pieceEven.eq(i).css({bottom: topPosition + 'px', right: leftPosition + 'px'});
			}

			//퍼즐 drag
			let drop_count = 0;
			$('.puzzle-piece span').draggable({revert: true});			
			for (let i = 0; i < piece.length+1; i++) {
				$('.puzzle-map .piece'+i+'-on').droppable({
					accept: '.puzzle-piece .piece'+i,
					drop: function (event, ui) {
						$('.puzzle-piece span').eq(i-1).hide();
						$('.puzzle-map div').eq(i-1).css({"opacity": "1"});
						drop_count++;
						sucessPiece();
					}
				});
			}

			function sucessPiece(){
				if(drop_count==12){
					$('.pop-bg, .pop-next').fadeIn();
					$('#btn-m3').addClass('on');
					stopTimeUp();
					countdown.stop(); //stop
				}
			}