그누보드 포인트 연동형 추억의 짱껨뽀 가위바위보 게임 만들기

그누보드 포인트 연동형 추억의 짱껨뽀 가위바위보 게임 만들기

 

90년대생이라면 누구나 다 알법한 짱껨뽀 게임이에요.

수 많은 가위바위보 게임을 보고난 후 갑자기 이 게임의 생각나 추억팔이 겸 만들어보았습니다.

게임의 기능적인 부분보다 퍼블리싱 영역에 시간이 가장 많이 걸린 것 같네요.

 

 

🚩 최종 목표의 게임은 이렇게 구성됩니다.

가위바위보 게임 규루리세상

 

 

게임처럼보이기 위해 

포인트와 스타트의 글씨는 구글 폰트 Bungee를 사용하였어요.

가위바위보 승리 시, 베팅 (1000 P) * 당첨 포인트 만큼 가져갈 수 있습니다.

 

 

 포인트 회수율을 위해 승률 셋팅을 할 수 있도록 구성합니다.

$game_config['game_cf02'] = 55; // 승리확률
$game_config['game_cf03'] = 25; // 비길확률

 

 

게임판과 점수를 원형으로 보여주기 위해 게임판을 원형으로 셋팅해줍니다.

원판의 당첨수를 표기하기위해 16개의 점수판을 셋팅해줍니다.

새로고침할때마다 원판의 점수가 랜덤해 질 수 있도록 랜덤 array_rand를 사용하였어요.

<?php
$numbers = explode(",","10,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5");
$j=1;
while (!empty($numbers)) {
    $randomIndex = array_rand($numbers);
?>
    <div class="gLlPoiNt point_<?php echo str_pad($j,"2","0",STR_PAD_LEFT)?>" id="point_<?php echo $j ?>" >
    	<div><?php echo $numbers[$randomIndex]; ?></div>
    </div>
<?php	
    unset($numbers[$randomIndex]);
    $j++;
}
?>

 

 

게임판 셋팅 - 규루리세상

 

 

 

게임판에 아무것도 없으니 배경을 셋팅하고, 점수들에 구글 폰트를 적용해주었어요.

게임판 배경 셋팅 - 규루리세상

 

 

 

각 점수들을 게임판의 위치에 맞게 게임판의 끝으로 정렬을 하기위해 스타일을 정의해줍니다.

공통적인 스타일을 주고, 각 점수마다 rotate를 다르게 주어야합니다.

.gLlPoiNt {
    height: 100%;
    position: absolute;
    width: 100%;
    text-align: center;
    padding-top: 10px;
    font-size: 35px;
    font-weight: 600;
    font-family: "Bungee", sans-serif;
}

 

원판에 점수 셋팅 - 규루리세상

 

 

 

 

게임을 진행하지 않고 있을 때의 가위바위보 화면을 구성하기위해

검은 배경과 기본 가위바위보 이미지를 셋팅해주었어요.

 

 

 

이제 게임을 할 수 있는 포인트와, 가위바위보 버튼을 생성합니다.

<div class="gameBottom">
    <div class="gameset">
        <div class="pp">	
            <span>POINT</span>
            <input type="number" min="1000" max="50000" id="" value="1000" step="1000"  /> 
        </div>
        <div id=""><button id="" >START</button></div> 
    </div>
    <div class="gllBtnChoice">
        <div class=""> <img id="" src="/game_ggb/img/R.png" > </div>
        <div class=""> <img id="" src="/game_ggb/img/P.png" > </div>
        <div class=""> <img id="" src="/game_ggb/img/S.png" > </div>	
    </div>
</div>

 

 

게임을 도전할 수 있는 포인트를 직접 설정이 가능하도록 처리하였고,

각 가위바위보 버튼을 셋팅해주며 각 기능에 대해 설정합니다. 

배팅과 당첨에 대한 포인트를 연계하는게 최종 목표였습니다.

 

01

게임플레이 - 규루리세상