02_점심랜덤룰렛

Javascript

by 모모87 2021. 3. 13. 02:21

<body onload="initsize();">
        <div id="wrap">
            <div id="gameContainer">
                <div class="board_start join">메뉴뽑기</div>
                <div class="board_on obj"></div>
                <div class="pin"></div>
            </div>
            <div id="popup_gift" class="popup">
                <div class="lottery_present"></div>
                <a href="javascript:;" class="reset">다시 뽑기</a>
                <a href="javascript:;" class="close">확정</a>
            </div>
        </div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/easing/EasePack.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js"></script>
        <script src=" https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="./js/03.js"></script>
        <script>
            function initsize() {
                self.resizeTo(document.body.scrollWidth, document.body.scrollHeight);
            }
        </script>
    </body>

$(document).ready(function() {
	var gift;
    var  present =[ '짜장면','파전','해물된장찌게','떡볶이','짬뽕','비빔국수']

	iniGame = function(num){
		gift = num;
		TweenLite.killTweensOf($(".board_on"));
        TweenLite.to($(".board_on"), 0, {css:{rotation:rotationPos[gift]}});
        //돌린판 돌아가는 바퀴/속도
		TweenLite.from($(".board_on"),2, {css:{rotation:-500}, onComplete:endGame, ease:Sine.easeOut});
               console.log("gift 숫자 : "+ (gift +1) +"rotationPos" + rotationPos );
	}

	var rotationPos = new Array(60,120,180,240,300,360);

	TweenLite.to($(".board_on"), 360, {css:{rotation:-5000}, ease: Linear.easeNone});
	function endGame(){
              var  copImg= "./img/menu"+( gift +1) + ".png";
                console.log("이미지 : " + copImg );

                  	 $("#popup_gift .lottery_present" ).text(function( ) { return "오늘 점심은 " +present[gift]  + " 먹으러 고고씽!";    });
                          $( '<img  src="' + copImg+ '" />' ).prependTo("#popup_gift .lottery_present");
  setTimeout(function() {openPopup("popup_gift");	}, 100);
  
   }

	$(".popup .btn").on("click",function(){
		location.reload();
	});
	function openPopup(id) {
		closePopup();
		$('.popup').slideUp(0);
		var popupid = id
		$('body').append('<div id="fade"></div>');
		$('#fade').css({
		'filter' : 'alpha(opacity=60)'
		}).fadeIn(300);
		var popuptopmargin = ($('#' + popupid).height()) / 2;
		var popupleftmargin = ($('#' + popupid).width()) / 2;
		$('#' + popupid).css({
			'margin-left' : -popupleftmargin
		});
		$('#' + popupid).slideDown(500);
	}
	function closePopup() {
		$('#fade').fadeOut(500, function() {
			// $(".player").html('');
		});
		$('.popup').slideUp(500);
		return false
	}
    $(".close").click(closePopup);

    function reset() {
		$('#fade').fadeOut(500, function() {
			// $(".player").html('');
		});
        $('.popup').slideUp(500);
        location.reload();
	}
    $(".reset").click(reset);
    
});



$(function() {
	var clicked  =0;
	for(i=1; i<7; i++){
	
	  var  pictures = "./img/menu"+ i + ".png";
	  $(".board_on").append('<img  src="' + pictures + '" />');
	}

	$(".join").on("mousedown",function(){
	  if( clicked <= 0){    
          iniGame(Math.floor(Math.random() *6)
          );    
        }
	  else  if( clicked >=1 ){    
          event.preventDefault(); 
          alert( "다시뽑기는 안되요! 오늘 점심은 확정되었습니다."); 
        }
	  clicked ++
	});
})

'Javascript' 카테고리의 다른 글

05_키보드 드럼 (0)	2021.03.13
04_출석체크 (0)	2021.03.13
03_로또랜덤뽑기 (0)	2021.03.13
01_투두리스트 (0)	2021.03.13
Javascript 자주쓰는 문법 모음 #배열 (0)	2021.01.03