배열과 조건문을 사용해서 컴퓨터와 가위바위보 하다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 지금부터 가위바위보를 시작하겠습니다
// STEP 1. 컴퓨터가 랜덤하게 가위, 바위, 보 중에 하나를 낸다 (comChoice)
// => Math.random() -> ranNum
// => 배열의 인덱스 번호
// STEP 2. 사용자에게 가위, 바위, 보 중에 하나를 입력받는다 (prompt) (myChoice)
// "무엇을 내시겠습니까? [가위,바위,보]"
// ** comChoice, myChoice를 console창에 테스트 출력!
// STEP 3. 가위바위보의 결과를 출력
// document.write('당신의 승리입니다') /패배 / 무승부입니다!
let comChoice = ["가위", "바위", "보"] // 0 1 2
let playerChoice = ["가위", "바위", "보"] // 0 1 2
let ranNum = Math.floor(Math.random() * 3);
console.log("컴퓨터: ", comChoice[ranNum])
let myChoice = prompt("무엇을 내시겠습니까?")
console.log("플레이어: ", myChoice)
console.log(playerChoice.indexOf(myChoice))
if (ranNum == playerChoice.indexOf(myChoice)) {
document.write("무승부입니다.");
}
else if (comChoice[ranNum] == "보") {
(myChoice == "가위") ? document.write("승리") : document.write("패배")
}
else if (comChoice[ranNum] == "가위") {
(myChoice == "바위") ? document.write("승리") : document.write("패배")
}
else if (comChoice[ranNum] == "바위") {
(myChoice == "보") ? document.write("승리") : document.write("패배")
}
</script>
</body>
</html>1. 컴퓨터가 먼저 가위바위보 중에 하나를 내게 만들기
let comChoice = ["가위", "바위", "보"] // 0 1 2 인덱스 번호
let ranNum = Math.floor(Math.random() * 3); // 0부터 2.99999까지의 난수를 정수화
console.log("컴퓨터: ", comChoice[ranNum]) // 컴퓨터가 무엇을 냈는지 콘솔창에 출력컴퓨터의 가위바위보 배열을 만들어준다. 인덱스 번호로 접근해 보겠다. 앞에서 배운 난수를 만드는 방법으로 0 1 2 중 하나를 만들어 주고 ranNum 변수에 대입한다. 배열의 요소를 인덱스로 접근하는 방법을 사용해서 (배열[인덱스]) 컴퓨터가 가위 바위 보 중에 하나를 내도록 만든다.
2. 플레이어의 값 입력받기
let playerChoice = ["가위", "바위", "보"] // 0 1 2
let myChoice = prompt("무엇을 내시겠습니까?")
console.log("플레이어: ", myChoice)
1번 과정과 비슷하게 플레이어의 가위 바위 보를 입력받는다. 1번 과정과의 차이점은 플레이어는 사람이다. 그러니까 입력값을 0, 1, 2가 아닌 "가위", "바위", "보"로 입력받아야 한다. (상식적으로 누가 가위바위보를 0 1 2로 함).
3. 무승부 처리
if (ranNum == playerChoice.indexOf(myChoice)) {
document.write("무승부입니다.");
}무승부를 처리해 주려면 컴퓨터가 낸 것과 플레이어가 낸 것의 인덱스 값이 같거나, 문자열이 같으면 된다.
나는 인덱스로 접근하였으며 그 이유는 다양한 방법을 보여주기 위함이다. 승리와 패배는 문자열로 접근하였다.
ranNum은 컴퓨터의 인덱스, 배열. indexOf(요소)는 플레이어가 선택한 요소의 배열의 인덱스를 추출해 주는 함수이다.
그렇다면 두 인덱스가 나왔으니 두 인덱스 값이 같다면 무승부다.
4. 승리 및 패배 처리
else if (comChoice[ranNum] == "보") {
(myChoice == "가위") ? document.write("승리") : document.write("패배")
}
else if (comChoice[ranNum] == "가위") {
(myChoice == "바위") ? document.write("승리") : document.write("패배")
}
else if (comChoice[ranNum] == "바위") {
(myChoice == "보") ? document.write("승리") : document.write("패배")
}무승부가 아니면 승리 or 패배다. 우리는 컴퓨터의 선택을 기준으로 승리와 패배 처리를 해보겠다.
무승부가 "아니면"이니까 else if로 접근해야 한다. 배열의 요소를 인덱스로 접근하는 방법을 통해 문자열로 접근하였다. 코드에서도 보다시피 이렇게 하면 잘 보인다. 컴퓨터가 인덱스 0을 뽑아 "보"를 냈다면 플레이어는 "가위"를 냈을 때만 이기고 아니면 지기 때문에 삼항 연산자를 사용해서 쓸 수 있다. 플레이어의 입력값이 "가위"가 맞다면 true 승리, false 패배. 같은 방식으로 이어나가면 된다.
'Front-End > 1. JavaScript 기초' 카테고리의 다른 글
| [JS] Ex23_선택정렬.html (0) | 2023.06.15 |
|---|---|
| [JS] Ex22_버블정렬.html (0) | 2023.06.15 |
| [JS] Ex20_배열함수.html (0) | 2023.06.15 |
| [JS] Ex19_배열실습.html (0) | 2023.06.15 |
| [JS] Ex18_배열.html (0) | 2023.06.14 |
