난수 발생시키는 방법
let randomNumber = Math.random();
요렇게! Math.random(); 을 이용해서 만든다.
그런데 이 함수는 실수로 랜덤숫자를 만들어준다!!!
나는 정수 형태가 필요하기 때문에 좀더 다듬어 줘야한다.
바로 이런식으로!!!
let randomNumber = Math.random();
console.log(randomNumber); //실수 형태로 출력된다.
let ran1 = Math.floor(Math.random()); // Math.floor : 소수점부분을 버려줌(내림)
// 10을 곱하고 소수점부분을 버려줘서 0~9까지 랜덤한 숫자를 뽑아준다
let ran2 = Math.floor(Math.random()*10);
console.log(ran2);
let ran3 = parseInt(Math.random());
console.log(ran3);
let ran4 = Math.ceil(파라미터로 받은 값); // 올림(음수인 경우에도)
let ran5 = Math.ceil(파라미터로 받은 값);// 반올림(음수인 경우 6부터 다음 정수로 출력해줌)
- Math.floor : 소수점부분을 버려줌(내림)
- Math.ceil (파라미터로 받은 값 ) : 올림(음수인 경우에도)
- Math . round(파라미터로 받은 값) : 반올림( 입력받은 값이 0.5~ 올림 , 음수일 경우에는 0.5까지 내린다.)
- parseInt (string , n) : 문자열을 n진법을 이용해 수로 전환해주는 함수. n을 입력하지 않으면 10이 디폴트값
랜덤함수를 감싸주니까 정수로 바꿔주었다. parseInt(Math.random()); 이렇게 사용함
이것들을 적절하게 섞어서 필요할때 쓰면 되겠다 ^ㅡ^/
이제 이것들을 이용해서 실습 문제를 풀어볼 거다.
오늘의 과제
조건
1. 유저와 컴퓨터가 가위바위보 게임을 한다.
2. 이기는지 지는지 무승부인지 승패를 나타내라
내가 생각한 첫번째 방법
<첫번째 방법- 코드 전문>
alert("가위, 바위, 보 게임을 시작합니다.");
// 유저의 패 입력받기
let USER = Number(prompt("1:가위 2:바위 3:보 입니다. 숫자를 입력하세요 : "))
// 컴퓨처의 패 결정
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("무승부입니다.");
}
// 유저가 가위를 냈을때
else if(USER == 1 && COM ==2){
alert("유저 : 가위, 컴퓨터 : 바위 / COMPUTER가 이겼습니다.");
}
else if(USER == 1 && COM ==3){
alert("유저 : 가위, 컴퓨터 : 보 / USER가 이겼습니다.");
}
// 유저가 바위를 냈을때
else if(USER == 2 && COM ==1){
alert("유저 : 바위, 컴퓨터 : 가위 / USER가 이겼습니다.");
}
else if(USER == 2 && COM ==3){
alert("유저 : 바위, 컴퓨터 : 보 / COMPUTER가 이겼습니다.");
}
// 유저가 보를 냈을때
else if(USER == 3 && COM ==1){
alert("유저 : 보, 컴퓨터 : 가위 / USECOMPUTER가 이겼습니다.");
}
else if(USER == 3 && COM ==2){
alert("유저 : 보, 컴퓨터 :바위 / USER가 이겼습니다.");
}
사용자가 내는 패는 입력을 3개의 숫자로만 받는다.
그리고 난수를 발생시켜서 그 값을 컴퓨터가 내는 패로 정해준다.
* 일정범위 안의 숫자들을 모두 같은 패로 지정해주었다.
// 컴퓨처의 패 결정
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("컴퓨터= 가위");
}
이렇게!
+) 컴퓨터의 패를 정해주는 부분의 논리 연산자를 처음에는 | | 로 사용했었다. 그러자 틀린답으로 나오는 경우가 있어서
&&로 수정해주었더니 알맞게 나왔다.
a ~ b까지 이니 and가 맞는건데 왜 | | 썼던건지 모르겠다ㅎㅎ
이렇게 묶어주고나니 단순 if문으로도 판별이 가능했다. 그리고 어떤 패로 이긴건지 알려주기 위해서
alert를 이용해서 친절하게 적어주었다.
그다음 두번째 방법!
이건 switch와 if를 섞었고 그리고 값을 양식에 맞지않게 입력하면
다시 되돌아가서 입력하라는 안내문구 + 자동으로 첫화면으로 돌아가기를 추가했다.
그리고 이게 바로 범위를 변수에 지정해주는 것이다.
옆자리 짝궁이 이렇게 해주는건 안되나? 해서 써본건데
난생 처음보는 형태인데 이게 된다고???? 문법적으로 안될거라고 우기다가 가능해서 만들어진 방법이다.ㅋㅋㅋ
짝궁이 만들던 코드를 보고 컴퓨터의 패를 기준으로 코드를 짤 수 있겠다 싶어서 만들었다.
<두번째 방법 - 코드 전문>
// 가위바위보 게임 유저랑 컴퓨터랑 하기 유저는 가위, 바위, 보 중에 하나를 낸다 컴퓨터도 마찬가지로 가위, 바위, 보를 낸다(랜덤) 결과에
// 따라 무승부, 패배, 승리를 표시한다 입력값이 1~3이 아니면 다시 처음화면으로 돌아가기
while (true) {
// 얘네도 그때그때 다른값으로 해야하기때문에 while문 안에 있어야한다.
let input = Number(prompt("가위바위보 게임, 1은 가위, 2는 바위, 3은 보입니다. 숫자를 입력하세요."));
let COM = Math.floor(Math.random() * 10);
let GAWI = (COM < 4);
let BAWI = (COM > 3 && COM < 7);
let BO = (COM > 6 && COM < 10);
if (isNaN(input)) {
console.log("dkddddd");
alert(" 범위안의 숫자만 입력해주세요");
} else if (input !== 1 && input !== 2 && input !== 3) {
alert(" 범위안의 숫자만 입력해주세요");
} else {
switch (GAWI) {
case true:
if (input == 1) {
alert("무승부입니다.");
} else if (input == 2) {
alert("유저가 승리했습니다.");
} else if (input == 3) {
alert("컴퓨터가 이겼습니다.");
}
break;
}
switch (BAWI) {
case true:
if (input == 1) {
alert("컴퓨터가 승리했습니다.");
} else if (input == 2) {
alert("무승부입니다.");
} else if (input == 3) {
alert("유저가 승리했습니다.");
}
break;
}
switch (BO) {
case true:
if (input == 1) {
alert("유저가 승리했습니다.");
} else if (input == 2) {
alert("컴퓨터가 승리했습니다.");
} else if (input == 3) {
alert("무승부입니다.");
}
break;
}
}
continue;
}
사실 내일 배울 것 같긴한데 계속 이 프로그램을 돌리기 위해 while문이라는 반복문을 넣었다. break; 문을 꼭 넣어야 한다고 하는데 몰라서 못넣었다ㅎㅎㅎ;
여튼 그게 중요한게 아니라 각각 패의 변수범위를 지정한것을 봐야한다!!!!
let input = Number(prompt("가위바위보 게임, 1은 가위, 2는 바위, 3은 보입니다. 숫자를 입력하세요."));
let COM = Math.floor(Math.random() * 10);
let GAWI = (COM < 4);
let BAWI = (COM > 3 && COM < 7);
let BO = (COM > 6 && COM < 10);
가위, 바위, 보의 부분을 범위로 정해줬는데 이게 됐다ㄷㄷ;
그래서 처음에는 switch문에서 범위 자체와 case 조건 부분과 비교를 해주는 줄 알고 다른 값을 넣었었다.
그런데!!! 변수에 범위를 저장시키면 그 범위 안의 값들이 저장되는게 아니라 boolean 으로 변한다고한다ㅜㅜㅜ
이걸 몰라서 왜 안되는건지 한참 헤맸다....
그러니까
switch (범위로 지정해준 변수){
case 조건문(boolean으로 지정해 주어야함) :
}
요런식으로 써야 한다는 말이다. 난 case 옆에 조건문 부분에 상수값이었나? 여튼 다른 값을 넣어줬었다....
switch (GAWI) {
case true: <======= 이 부분!!!!!!!!!!!!!
if (input == 1) {
alert("무승부입니다.");
} else if (input == 2) {
alert("유저가 승리했습니다.");
} else if (input == 3) {
alert("컴퓨터가 이겼습니다.");
}
break;
}
오호.... 그래서 변수에 범위를 저장할 수 있지만 그게 생각처럼 값이 담기는게 아니라 이 범위안에 들어가는게 맞는지
(예: a = (0<=a && a<= 3) 이면 a에 0,1,2,3 이 담기는게 아니라는 말) ㅋㅋㅋ나만 이렇게 생각했을 수도 있다.
논리형으로 바뀐다는 말이다!!!!
후후.... 이걸 해결하고 나니 이제 유저가 입력하는 값이 거슬리기 시작했다. 만약 숫자를 입력하지 않는다면...?
문자나 특수문자나 내가 지정한 값외에 다른걸 넣는다면.....?????
열심히 만들었는데 빈화면만 보이게 될것이다....ㅂㄷㅂㄷ
그래서 입력하는 값을 검사해서 원하는 값이 아니면 다시 입력하라고 첫 화면으로 돌아가게 만들고 싶어졌다.
처음엔
(input !== 1 && input !== 2 && input !== 3)이렇게 일일히 써주었다. 그런데 이것보다 범위가 커지면???
UM.......
이리저리 코드도 쳐보고 어떻게 해야할지 고민+ 인터넷을 뒤져보고 학우분들에게 도움을 청해보았더니
뜨든 isNAN (매개변수) 등장 !!!!!!!!!!!
바로바로 매개 변수가 숫자인지 검사해주는 함수가 있었다!!!
오호! 그래서 바로 적용시켜보았다.
이렇게ㅋㅋㅋ
<틀린시도 - 코드 전문>
// 가위바위보 게임 유저랑 컴퓨터랑 하기 유저는 가위, 바위, 보 중에 하나를 낸다 컴퓨터도 마찬가지로 가위, 바위, 보를 낸다(랜덤) 결과에
// 따라 무승부, 패배, 승리를 표시한다 입력값이 1~3이 아니면 다시 처음화면으로 돌아가기
while (true) {
// 얘네도 그때그때 다른값으로 해야하기때문에 while문 안에 있어야한다.
let input = Number(prompt("가위바위보 게임, 1은 가위, 2는 바위, 3은 보입니다. 숫자를 입력하세요."));
let COM = Math.floor(Math.random() * 10);
let GAWI = (COM < 4);
let BAWI = (COM > 3 && COM < 7);
let BO = (COM > 6 && COM < 10);
if (if(isNaN(input)&& (input !== 1 && input !== 2 && input !== 3)) {
console.log("dkddddd");
alert(" 범위안의 숫자만 입력해주세요");
} else if (input !== 1 && input !== 2 && input !== 3) {
alert(" 범위안의 숫자만 입력해주세요");
} else {
switch (GAWI) {
case true:
if (input == 1) {
alert("무승부입니다.");
} else if (input == 2) {
alert("유저가 승리했습니다.");
} else if (input == 3) {
alert("컴퓨터가 이겼습니다.");
}
break;
}
switch (BAWI) {
case true:
if (input == 1) {
alert("컴퓨터가 승리했습니다.");
} else if (input == 2) {
alert("무승부입니다.");
} else if (input == 3) {
alert("유저가 승리했습니다.");
}
break;
}
switch (BO) {
case true:
if (input == 1) {
alert("유저가 승리했습니다.");
} else if (input == 2) {
alert("컴퓨터가 승리했습니다.");
} else if (input == 3) {
alert("무승부입니다.");
}
break;
}
}
continue;
}
이렇게 썼다ㅋㅋㅋㅋ
if(isNaN(input)&& (input !== 1 && input !== 2 && input !== 3))
그런데 문제는 고쳤는데... 분명 숫자를 입력했는지랑 1, 2, 3 만 입력한건지 검사해줘야하는데...
숫자가 아닌 다른 값을 입력하면 alert창이 잘뜨는데 1, 2, 3이 아닌 숫자들을 입력하니
알림창이 안뜨는 것이었다....1!! 맞는 값을 입력하면 코드가 작동하긴하는데.....ㅋㅋㅋㅋㅋ
유효성 검사해!!! 라고 시켰더니 갑자기 입을 꾹다문다ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
결국 선생님께 여쭤보았다... 그랬더니 isNaN( )이 무슨뜻인지 다시 한번 잘 생각해보라고 하셨다ㅋㅋㅋ
(사실 이렇게 상냥하게 말 안해주심ㅋㅋㅋㅋ)
그랬더니 아차.....
isNAN이 숫자인지 아닌지만 판단해주는 것이기 때문에 옆에 조건을 거는게 의미가 없던 것....
이게 무슨말이냐!!!
isNAN(매개변수) 이 함수는 매개수가 숫자값이면 false를, 숫자값이 아니면 true를 반환해준다
isNaN( ) 옆에 (input !== 1 && input !== 2 && input !== 3) 이렇게 조건을 걸어도
(1, 2, 3 이외의 다른 숫자라도 )숫자를 입력하면
어차피 isNaN( ) =>false 를 반환하니까 해당 블럭의 console과 alert 명령이 실행이 안되었던것이다...
(true여야 해당 블럭의 실행문을 실행해주니까...)
그래서 내가 원하는 답이 나오려면 <두번째 방법 -코드 전문>에서 처럼 isNaN(input) 으로 한번 숫자인지 아닌지 검사해주고 그다음에 한번 더 if문으로 입력한 값이 1,2,3인지 판별을 해주면 된다.
휴.... 덕분에 함수가 어떤 값을 반환해주는지 잘알봐야 한다는 교훈을 얻었다!!ㅎㅎ^ ㅡ ^
그래 .... 안되는 이유는 컴퓨터가 아니라 인간에게 있다... 말 잘듣는 컴퓨터야...!!! 곰마워....!
'블록체인기반 SW 개발자 과정(feat.경일게임아카데미) > 과제' 카테고리의 다른 글
| <JAVASCRIPT> 22.05.25 일자 과제 / 로또번호 생성기 (0) | 2022.05.26 |
|---|---|
| <JAVASCRIPT> 22.05.25일자 과제 / 가위바위보 + 도박 기능 추가 / 배팅하기 / 입력 값 검증하기 (0) | 2022.05.25 |
| 영화 포스터 (0) | 2022.05.19 |
| <HTML>22.05.17일 과제3 / input 태그의 type 속성에 대해 알아보자! (0) | 2022.05.17 |
| <HTML>22.05.17일 과제2 / HTML로 표 만들기 (KY사이트 만들기)(feat. <colspan>, <rowspan>) (0) | 2022.05.17 |
