이번에 소개할 프로그램은 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, // 보의 비율
}
},
예제소스를 바로 테스트해보고 싶을 경우 아래의 테스트 링크를 이용하면 된다.
마지막으로 소스에 대한 궁금한 사항있을 경우 lcy@redinfo.co.kr 메일로 문의.
Comment