JQUERY를 이용하여 만든 가위, 바위, 보 프로그램
JQUERY를 이용하여 만든 가위, 바위, 보 프로그램
REDINFO
약 1년전 2023-02-13 02:06:53

이번에 소개할 프로그램은 JQUERY를 이용하여 만든 가위, 바위, 보 프로그램이다. 해당 프로그램은 결과값에 대한 조건처리가 많이 없기에 생각보다 빠르게 만든것 같다. 

 

아래는 가위, 바위, 보 프로그램의 처음 시작 화면이다. 

 

처음 화면에서 게임 시작을 누르면 아래와 같이 실제 게임 레이어 팝업이 뜨게 되고 게임을 시작할 수 있다. 

 

게임이 시작되고 가위, 바위, 보 중에서 하나를 선택하면 게임은 종료되고 결과는 아래와 같이 업데이트가 된다. 

 

게임소스는 아래 예제소스를 참고하자. 

 

| 예제소스

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>가위 바위 보 프로그램</title>
	<script src="//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 
  </head>
  <body>

  	<div id="contaner">
  		<h1>가위 바위 보 프로그램</h1>
  		<div class="score-box">
  			<ul>
  				<li class="th">게임횟수</li>
  				<li class="td"><strong class="event-score" data-id="total">0</strong></li>
  			</ul>
  			<ul>
  				<li class="th">승리</li>
  				<li class="td"><strong class="event-score" data-id="win">0</strong></li>
  			</ul>  			
  			<ul>
  				<li class="th">무승부</li>
  				<li class="td"><strong class="event-score" data-id="draw">0</strong></li>
  			</ul>  			  			
  			<ul>
  				<li class="th">패배</li>
  				<li class="td"><strong class="event-score" data-id="lose">0</strong></li>
  			</ul>  			  			  			
  		</div>
  		<div class="play-box">
  			<a href="#none" onclick="return false" class="btn event-startGame">게임시작</a>
  		</div>
  	</div>

  	<div id="game">
  		<div class="bg"></div>
  		<div class="game-box">
  			<h2>게임시작</h2>
  			<div class="notice event-notice" data-id="">
  				가위, 바위, 보 중 하나를 선택해 주세요
  			</div>
  			<div class="robot">
  				<div class="tit">로봇</div>
  				<div class="ej event-ej">✌</div>
  			</div>

  			<div class="me">
  				<div class="tit">나</div>
  				<div class="choice">
  					<ul>
  						<li><a href="#none" onclick="return false;" class="event-choice" data-id="rock">✌</a></li>
  						<li><a href="#none" onclick="return false;" class="event-choice" data-id="paper">✊</a></li>
  						<li><a href="#none" onclick="return false;" class="event-choice" data-id="scissors">✋</a></li>
  					</ul>
  				</div>
  			</div>

	  		<div class="replay-box">
	  			<a href="#none" onclick="return false" class="btn close event-closeGame">닫기</a>
	  			<a href="#none" onclick="return false" class="btn replay event-replayGame">다시하기</a>
	  		</div>  			
  		</div>

  	</div>

  	<style>
  		body{box-sizing: border-box;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;word-break: break-all;}
  		h1,h2,h3{ margin:0; padding:0; }
  		ul,li{ list-style:none; margin:0; padding:0; }
  		a,span{ display:inline-block;text-decoration:none; }
  		#contaner{ width:100%; max-width:450px; margin:0 auto;}
  		#contaner h1{ margin:10px 0; border-bottom: solid 3px #333; text-align: center; }
  		#contaner .score-box{ overflow: hidden; }
  		#contaner .score-box ul{ overflow: hidden; }
  		#contaner .score-box ul li{ float:none; float:left; padding:10px 0; font-size:14px; }
  		#contaner .score-box ul li.th{ width:30%; background-color:#006699; color:#fff; font-weight: 900; text-align:center;}
  		#contaner .score-box ul li.td{ width:70%;}
  		#contaner .score-box ul li.td strong{ margin-left:10px; }
  		#contaner .play-box{ margin:10px; text-align: center;; }
  		#contaner .play-box .btn{ border:solid 1px #eee; padding:5px 10px; cursor:pointer; color:#fff; background-color:#333;}

  		#game{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 9998; display:none;}
  		body.game-on #game{  display:block;}
  		#game .bg{position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 9998;   background:#000; opacity: 0.6;}
  		#game .game-box{ position: relative; z-index: 9999; width:100%; max-width:450px; margin:0 auto; background-color:#fff; padding:1%;  margin-top:10%; border:solid 1px #eee;}
  		#game .game-box h2{ border-bottom:solid 2px #333; }
  		#game .game-box .notice{ border:solid 1px #eee; margin:10px 0; padding:10px 0; text-align:center; font-size:14px; font-weight:900; }
  		#game .game-box .notice[data-id="win"]{ color:blue; }
  		#game .game-box .notice[data-id="lose"]{ color:red; }
  		#game .game-box .notice[data-id="draw"]{ color:gray; }
  		#game .game-box .robot{ text-align:center; border:solid 1px #eee; margin:5px 0; }
  		#game .game-box .robot .tit{ padding:10px 0; background-color:#eee; color:#333; font-weight:900; }
  		#game .game-box .robot .ej{ opacity: 1;font-size:54px; padding:10px;  }
  		#game .game-box .me{ text-align:center; border:solid 1px #eee; margin:5px 0; }
  		#game .game-box .me .tit{ padding:10px 0; background-color:#369; color:#fff; font-weight:900; }  		
  		#game .game-box .me .choice{overflow: hidden; padding:10px 0;}
  		#game .game-box .me .choice ul li{float:left;  text-align:center; width:33.33%;  }
  		#game .game-box .me .choice ul li a{font-size:54px;}
  		#game .game-box .me .choice ul li a.on{ background-color:#999; border-radius: 50px; }
  		#game .game-box .replay-box{ text-align:center;}
		#game .game-box .replay-box .btn{ border:solid 1px #eee; padding:5px 10px; cursor:pointer; color:#fff; background-color:#369;}
		#game .game-box .replay-box .btn.replay{display:none;}
		#game .game-box .replay-box .btn.close{ background-color:#eee; color:#333; }

  	</style>

	<script>
		var rps = {
			item: {'rock': '✌','paper':'✊','scissors':'✋'},
			robotOption : {
				activeIndex : 0,
				activePlay: true,
			},
			db:{
				score:{
					total : 0,
					win :0,
					draw :0,
					lose :0,
				},
				// 가위,바위,보 비율
				rate :{
					'rock':3,
					'paper':3,
					'scissors':4,
				}
			},
			robotRate : function(){
				var thisObj = this;
				var arrRate = new Array();
				$.each(thisObj.db.rate, function(i,v){
					for(c=0;c<v;c++){
						arrRate.push(i);
					}
				});
				arrRate.sort(() => Math.random() - 0.5);
				return arrRate;
			},
			robotEvent: function(){
				var thisObj = this;
				var itemKeys = Object.keys(thisObj.item);

				if( thisObj.robotOption.activePlay === true){		
					var ej = thisObj.item[itemKeys[thisObj.robotOption.activeIndex]];
					$('.event-ej').css('opacity',1).html(ej);
					if( thisObj.robotOption.activeIndex >= (itemKeys.length-1)){thisObj.robotOption.activeIndex = 0; }
					else{thisObj.robotOption.activeIndex ++; }			

					$('.event-ej').stop(true).animate({'opacity':0},150,function(){
						if( thisObj.robotOption.activePlay === true){
							rps.robotEvent();	
						}
					});
				}
			},
			checkGame:function(target1,target2){
				var result = '';
				switch(target1){
					case "rock":
						if( target2 == 'rock'){ result = 'draw'; }
						if( target2 == 'paper'){ result = 'lose'; }
						if( target2 == 'scissors'){ result = 'win'; }
					break;
					case "paper":
						if( target2 == 'rock'){ result = 'win'; }
						if( target2 == 'paper'){ result = 'draw'; }
						if( target2 == 'scissors'){ result = 'lose'; }					
					break;
					case "scissors":
						if( target2 == 'rock'){ result = 'lose'; }
						if( target2 == 'paper'){ result = 'win'; }
						if( target2 == 'scissors'){ result = 'draw'; }					
					break;					
				}		

				return result;		
			},
			playChoice : function(meResult){
				var thisObj = this;
				if( thisObj.robotOption.activePlay !== true){ return false; }
				thisObj.robotOption.activePlay = false;

				var arrRate = thisObj.robotRate();
				var robotRateIndex = Math.floor(Math.random()*((arrRate.length-1)-1+1)) + 1
				var robotResult  = arrRate[robotRateIndex];
				var gameResult = thisObj.checkGame(meResult,robotResult);

				$('.event-ej').stop(true).css('opacity',1).html(thisObj.item[robotResult]);

				thisObj.db.score['total'] ++;
				thisObj.db.score[gameResult]++;
				var resultMsg = '';
				switch(gameResult){
					case "win":
						resultMsg = '게임에서 이기셨습니다.';
					break;
					case "draw":
						resultMsg = '게임에서 비기셨습니다.';
					break;
					case "lose":
						resultMsg = '게임에서 패배하였습니다.';
					break;										
				}

				$('.event-choice[data-id="'+meResult+'"]').addClass('on');
				$('.event-notice').attr('data-id',gameResult).text(resultMsg);
				$('.event-replayGame').show();
				thisObj.scoreUpdate();
			},
			scoreUpdate : function(){
				var thisObj = this;
				$.each(thisObj.db.score, function(i,v){
					$('.event-score[data-id="'+i+'"]').text(v);
				});
			},
			startGame : function(){
				var thisObj = this;
				thisObj.replayGame();
				$('body').addClass('game-on');
			},
			stopGame: function(){
				var thisObj = this;
				$('.event-replayGame').hide();
				$('.event-choice').removeClass('on');
				$('.event-notice').attr('data-id','').text('가위, 바위, 보 중 하나를 선택해 주세요');
				thisObj.robotOption.activePlay = false;
			},
			replayGame : function(){
				var thisObj = this;
				thisObj.stopGame();
				thisObj.robotOption.activePlay = true;
				thisObj.robotEvent();
			},
			closeGame: function(){
				var thisObj = this;
				thisObj.stopGame();
				$('body').removeClass('game-on');
			}
		};
		$(function(){
			rps.robotEvent();
		});
		$(document).on('click','.event-startGame',function(){
			rps.startGame();
		});		
		$(document).on('click','.event-choice',function(){
			var thisData = $(this).data();
			rps.playChoice(thisData.id);
		});
		$(document).on('click','.event-replayGame',function(){
			rps.replayGame();
		});	
		$(document).on('click','.event-closeGame',function(){
			rps.closeGame();
		});				
	</script>

  </body>
 </html>

 

급하게 만들다 보니 게임소스내  주석을 거의 추가하지 못해서 조금 아쉽긴한데 조금 중요 포인트라고 하면 가위, 바위, 보의 비율을 설정할 수 있는데 해당 소스는 예제소스중 아래와 같다. 

db:{
	......... 생략
	// 가위,바위,보 비율
	rate :{
		'rock':3, // 가위의 비율
		'paper':3, // 바위의 비율
		'scissors':4, // 보의 비율
	}
},

 

예제소스를 바로 테스트해보고 싶을 경우 아래의 테스트 링크를 이용하면 된다. 

 
R BLOG - 테스트 뷰어
보고 계시는 페이지는 R BLOG 에서 제공된 테스트 뷰어 입니다.
blog.redinfo.co.kr/test/ex/rps

 

마지막으로 소스에 대한 궁금한 사항있을 경우 lcy@redinfo.co.kr 메일로 문의.

 

이 포스트글이 도움이 되었나요?
2
카테고리 연관글

Comment

댓글작성

0(500) | 1(30)