<JAVASCRIPT> 22.05.25일자 과제 / 가위바위보 + 도박 기능 추가 / 배팅하기 / 입력 값 검증하기

오늘의 과제!!! 바로 어제 만든 가위바위보에 도박기능을 추가한다!!!ㅋㅋㅋ

 

 

왜 가위바위보에 돈을 걸라는거야!!!!

 

 

구현할 기능조건

1. 10판하기

2. 배팅을 할 수 있다.

3. 유저와 컴퓨터의 소지금은 10000원이다.

4. 유저가 배팅을하고 게임을 하면 배팅한 금액*2배를 받는다

5. 지면 배팅한 돈*2만큼 잃는다

6. 무승부라면 배팅한 금액만큼만 잃는다

7. 종료조건이 있다.(게임을 10판 다하거나 둘중 하나라도 소지금을 다 사용했을때 종료된다.)

8. 구경꾼이 있다. 매판 랜덤한 확률로 내가 배팅한 금액의 1.5배를 유저에게 구경값으로 준다.

 

 

 

 

 

 

 

 

오... 근데 조건을 듣고 나니 좀 재밌어 보인다.

 

후훗..... 내 게임이 너무 재밌어서 전재산을 잃을지도 모른다구.... bboy...!!☆★

 

 

 

 

 

 

새로운 기능 구현은 처음 만들어 놓은 코드에 덧붙여서 만들었다.

함수를 구현하는 방법을 배웠으니 기능들을 함수로 구현했다.

코드를 짤때에는 어떤 데이터를 변수로 지정해줄지 어떤 기능을 함수로 만들지 처음에 설계하는 것도 중요하다고 하셨다.

 

 

 

그래서 조건들을 보고

내가 함수로 구현한 기능들은 이렇다

1. 구경꾼이 매판마다 돈을 줄텐데 그 확률과 돈을 준다면 얼마를 줄지 계산하는기능

2. 게임의 승패에 따른 나와 컴퓨터의 소지금을 계산해주는 기능

 

 

그리고 주석을 달아 놓기도 했지만

변수로 지정해준 값들은

유저의 소지금, 컴퓨터의 소지금, 유저가 배팅할 돈(매판 다르다), 게임의 승자를 표시해줄 변수

구경꾼이 유저에게 돈을 줄 확률, 구경꾼이 나에게 주는 돈, 

게임이 진행된 횟수

이렇게 지정해놓고 짰다.

 

 

 

+) 그리고 도박의 리얼리티를 위해 1000원 단위로만 돈을 걸 수 있도록 검증하는 기능을 추가했다!

 

 

 

구현한 것들이 별거 없어보이지만 정말... 생각보다 오래걸렸다...ㅠㅠㅠ

 

 

 

 

일단 코드 전문

 

<코드 전문>

alert("가위, 바위, 보 게임을 시작합니다.");
// 유저의 패 입력받기

// 유저 돈
let user_money = 10000;
//컴퓨터 돈
let computer_money = 10000;

//유저가 입력하는 베팅할 돈
let betting_money = 0;
// 1000원 단위로 받기위해 한번 걸러낸 돈
let resultMoney = 0;

//구경꾼이 나에게 주는 돈
let helper_money = 0;
//구경꾼이 나에게 돈을 줄 확률, 0~100 두 자리수 정수로 받음
let helper = 0;

//승패 여부 검사
let winner = 0; // 1: 유저가 이김 , 2 : 유저가 짐(컴퓨터가 이김), 0 : 무승부

//게임이 진행된 횟수
let count = 0;


//유저가 입력한 돈 1000원단위로 바꿔주기
function right_Money(inputMoney, unit) {
  //10066 // 100
  // 100.66 -> 100
  const calcMoney = Math.floor(inputMoney / unit);
  // 100-> 10000
  let resultMoney = calcMoney * unit;
  return resultMoney;
}


//구경꾼 이 내게 돈을 줄 확률 계산 & 만약 준다면 얼마나 줄지 계산
//내가 건돈의 1.5배를 준다.
//구경꾼이 내게 돈을 줄 확률은 30%
function help_money(betting_money, helper) {
  console.log("help_money()" + "betting_money: " + betting_money + " helper: " + helper);

  if (helper >= 70) {
    helper_money = betting_money * 1.5;
  } else {
    helper_money = 0;
  }
  console.log("help_money()" + betting_money, helper);
  return helper_money;
}

//리턴값은 하나만 줄 수 있음
// 나와 컴퓨터 사이에만 계산한것(구경꾼 돈 계산 X)
// 유저 돈 계산하기
function set_user_money(betting_money, user_money, computer_money, winner) {
  if (winner == 1) {
    user_money = (betting_money * 2 + user_money);
    computer_money -= betting_money * 2;
  } else if (winner == 2) {
    // 컴퓨터가 이겼을 때
    user_money = (user_money - betting_money * 2);
    computer_money += betting_money * 2;
  } else if(winner == 0) {
    user_money = user_money - betting_money;
  }
  return user_money;
  //computer_money;
}

//컴퓨터의 돈 계산하기
function set_computer_money(betting_money, user_money, computer_money, winner) {
  if (winner == 1) {
    user_money = betting_money * 2 + user_money;
    computer_money -= betting_money * 2;
  } else if (winner == 2) {
    // 컴퓨터가 이겼을 때
    user_money -= betting_money * 2;
    computer_money += betting_money * 2;
  } else if(winner == 0){
    user_money = user_money - betting_money;
  }
  return computer_money;
}
//////////////////////////////////게임시작/////////////////////////////////////////////
//최대 기회 10번
while (count <= 9) {
  helper = Math.floor(Math.random() * 100 + 1);
  // 유저가 돈을 다 잃으면 끝남
  if (user_money != 0 && computer_money != 0) {
    alert(
      "어서오세요! 가위바위보 게임에 오신것을 환영합니다.!" +
        "\n 1. 게임에서 이기면 베팅한 돈의 2배 적립!" +
        "\n 2. 졌을 때 : 베팅한 돈의 2배 차감 " +
        "\n 3. 무승부일 때 : 베팅한 돈만큼 차감"
    );
    //베팅할 금액 입력받기
    let betting_money = Number(
      prompt(
        " 베팅할 돈을 적어주세요. 최소 베팅금액 :1000원  " +
          "\n  현재 고객님의 베팅가능 금액 : " + user_money));
    //베팅할 돈 천원단위인지 검증하기
    console.log("여기보세요" + betting_money);
    if (isNaN(betting_money)) {
      alert(" 1000원 단위로 숫자만 입력해주세요 ");
    } else if (betting_money > user_money) {
      alert(
        " 고객님의 보유 잔고보다 큰 금액은 걸 수 없습니다. " +
          "\n 현재 고객님의 잔고 : " + user_money );
          continue;
        }
        
    // 유저가 본인의 잔고내에서 숫자를 입력했을 때 1000원 단위인지 검사하기
    else {
      console.log("betting_money 유저가 입력한베팅돈 0이아닐때 : " + betting_money);

        
    //함수로 리턴해준값을 받아줄게 필요하다
    betting_money = right_Money(betting_money, 1000);
    console.log("betting_money 함수 빠져나온값 : " + betting_money);

      alert("고객님이 입력한 베팅금액은 : " + betting_money + "로 설정됩니다.");
    }
    //가위바위 보 내기
    let USER = Number(
      prompt("1:가위  2:바위  3:보 입니다. 숫자를 입력하세요 : ")
    );

    //가위바위보 입력한 값이 1, 2, 3 중에 하나인지 검증하기
    if (isNaN(USER)) {
      alert("범위 안의 숫자만 입력해주세요");
    } else if (USER !== 1 && USER !== 2 && USER !== 3) {
      alert(" 범위안의 숫자만 입력해주세요");
    } else {
      console.log("USER " + USER);

      // 컴퓨처의 패 결정
      let COM = Math.floor(Math.random() * 10);
      if (COM >= 7 && COM <= 9) {
        COM = 3;
        console.log("컴퓨터= 보");
      } else if (COM >= 4 && COM <= 6) {
        COM = 2;
        console.log("컴퓨터= 바위");
      } else if (COM >= 0 && COM <= 3) {
        COM = 1;
        console.log("컴퓨터= 가위");
      }

      //승부 판단하기
      if (USER == COM) {
        alert("무승부입니다.");
        winner = 0; //무승부
      }
      // 유저가 가위를 냈을때
      else if (USER == 1 && COM == 2) {
        alert("유저 : 가위, 컴퓨터 : 바위  /   COMPUTER가 이겼습니다.");
        winner = 2;
      } else if (USER == 1 && COM == 3) {
        alert("유저 : 가위, 컴퓨터 : 보   /  USER가 이겼습니다.");
        winner = 1;
      }
      // 유저가 바위를 냈을때
      else if (USER == 2 && COM == 1) {
        alert("유저 : 바위, 컴퓨터 : 가위   /  USER가 이겼습니다.");
        winner = 1;
      } else if (USER == 2 && COM == 3) {
        alert("유저 : 바위, 컴퓨터 : 보   \n  COMPUTER가 이겼습니다.");
        winner = 2;
      }
      // 유저가 보를 냈을때
      else if (USER == 3 && COM == 1) {
        alert("유저 : 보, 컴퓨터 : 가위   \n COMPUTER가 이겼습니다.");
        winner = 2;
      } else if (USER == 3 && COM == 2) {
        alert("유저 : 보, 컴퓨터 :바위  \n  USER가 이겼습니다.");
        winner = 1;
      }

      //구경꾼이 기부할 수도 있는 돈 계산
      helper_money = help_money(betting_money, helper);
      console.log("helper_money: " + helper_money);

      //승패에 따른 돈계산 
      user_money = set_user_money(betting_money, user_money, computer_money, winner) + helper_money;
      console.log("user_money: " + user_money);

      //게임을 한번 하고나면 횟수 세기
      count++;

      // 승패결과 창에 띄워주기
      if (winner == 1) {
        alert(
          " 축하드립니다! 게임에서 이기셨어요! \n" + user_money + " 원 이 되셨습니다. \n" 
          + " 구경꾼이 기부하신 금액 : " +  helper_money);
        alert(" 현재 진행한 게임횟수는 : " + count + " 번 입니다. ");
      } else if (winner == 2) {
        alert(
          " 저런... 게임에서 지셨군요? 다시 도전해보세요! \n" 
          + " 현재 고객님의 남은 금액 : " + user_money +
            " \n 구경꾼이 기부하신 금액 : " +
            helper_money
        );
        alert(" 현재 진행한 게임횟수는 : " + count + " 번 입니다. ");
      } else {
        alert(
          " 띠용 무승부!!! 다시 한번  더 도전해 보세요! " +
            "\n 현재 고객님의 남은 금액 : " +
            user_money +
            "\n 구경꾼이 기부하신 금액 : " +
            helper_money
        );
        alert(" 현재 남은 게임횟수는 : " + count + " 번 입니다. ");

       
      }
    }
  }
}

 

 

어우.... 컴퓨터로 가위바위보 게임하기 한번 힘들다;

 

코드 전문은 이러하고 설정을 어떻게 해줄지 고민한 부분이 있는데

유저가 배팅할 돈을 걸면 거는 순간 소지금에서 빠져나가고 이후에 게임의 승패에 따라 돈을 받거나 잃는 것이다.

 

 

 

 

 

 

ㅁ...머...무...뭐라구요....? 무조건...?

 

 

 

 

즉,  게임에서 이기든 지든 배팅하는 돈은 무조건 잃는 것이다ㄷㄷㄷ

 

음... 그건 너무 가혹한 것 같아서 난 배팅한 돈을 그즉시 뺏지 않기로 했다... 

 

도박기능을 추가하기 전에도 써놨었지만 let winner=0;으로 변수를 만들어서 승자를 판가름하기 쉽게 만들었다.

1이면 유저가 이긴 것, 2는 컴퓨터가 이긴 것, 0이면 무승부인 것으로

해당되는 경우마다 내가 값을 부여해놨다.

 

 

 

그래서 파라미터중 하나로 winner를 받는다.

<유저와 컴퓨터 돈 계산하는 함수 - 구경 값 포함 X>

// 유저 돈 계산하기
function set_user_money(betting_money, user_money, computer_money, winner) {
  if (winner == 1) {
    user_money = betting_money * 2 + user_money;
    computer_money -= betting_money * 2;
  } else if (winner == 2) {
    // 컴퓨터가 이겼을 때
    user_money -= betting_money * 2;
    computer_money += betting_money * 2;
  } else {
    user_money -= betting_money;
  }
  return user_money;
  //computer_money;
}

 

배팅한 돈을 입력받으면 승패에 따라서 돈을 계산해주는데 마지막 줄에 주석을 보면 알겠지만 

처음에  짤때 return 에 두개의 값을 줬었다. 이렇게....

 

return user_money, computer_money;

 

그런데 이렇게 return에 두개의 값을 줄 수 없다고 하셨다ㅠㅠ 내가 이해를 잘못했었는데

return을 쓰게되면 함수를 통해서 나오는 값을 받아서 저장해줘야한다. 그런데 이렇게 두개의 값을 넣어주면

어떤걸 받을지 컴퓨터가 어떻게 알겠어ㅋㅋㅋㅋㅠㅠㅠ..... 이것 때문에 식이 틀린건줄 알고 한참 고민했다.

 

 

 

그리고 alert로 배팅할 돈을 1000원 단위로 입력하라고, 가위바위보도 1,2,3중에 입력하라고 했지만

어디 말을 잘듣는 사람들만 있겠는가....

꼭 1010원 1055555 등등 소지금을 넘는 금액이나 가위바위보의 패도 자기 맘대로 글자로 적는사람이 있을 것이다. 

괘씸해서 천원 단위 이하의 돈을 입력하면 다 버려지게 할까 했지만....

 

 

 

자비를 베풀어서 천원단위 이하로 입력된 돈들은 다시 돌려주기로 했다.

 

 

그게 바로 이 부분이다

 

 

ㅠㅠ능력자 학우분의 도움을 받아 Math.floor의 사용방법을 한번 더 배울 수 있었다.

function right_Money(inputMoney, unit) {
  //10066 // 100
  // 100.66 -> 100
  const calcMoney = Math.floor(inputMoney / unit);
  // 100-> 10000
  let resultMoney = calcMoney * unit;
  return resultMoney;
}

 

 

얼마를 입력하든 관리자가 입력한 단위(unit)으로 나눈다음에 소수점을 버려준다. -> 그러면 내가 1000원으로 단위를 설정했기 때문에 천원이하의 값들이 버려짐

그다음 다시 내가 정한 단위만큼 곱해주면 무조건 1000원단위의 값이 남는다!!!!!

 

 

 

이제 굵직한 기능들은 다 설명을 했다.

게임 10판 조건을 위해 while문으로 전체를 다 감쌌고  친절하게 alert로 게임의 승패와 각자의 소지금 총액을 알려줄 수 있도록 했다.

프론트도 하면 좋겠지만....무리다요......

 

 

 

 

아!! 그리고 하나더 나를 위해서도 적어 놓는데 alert창에 띄워줄 텍스트들을 줄바꿈 해주려면 

alert("돈을 \n" + user_money + "원 걸어라");

 

이런 식으로 사용하면 된다. " " 안에 \n(역 슬래쉬 + n을 적으면 된다.)

document 는 " " 안에 <br> 태그!

 

 

 

 

 

 

 

 

 

휴.... 조금 힘들었지만 그래도 완성하고 나니 뿌듯하다.

주석이 좀 지저분해 보일 수 있지만 최대한 자세하게 적어놓은거니 만약 게임이 궁금하다면 긁어서 해보면서 이해해보기 바란다....★

 

 

 

 

 

 

 

 

 

걸어걸어 가진돈 다 걸어!!!!!