(Javascript) 자바스크립트 기초실습 (4) 조건문을 활용한 가위바위보

안녕하세요 영감을 주는 개발자 방민방민입니다.

오늘은 지난 시간에 실습한 

(Javascript) 자바스크립트 기초실습 (3) 함수사용에 기반하여 가위바위보 게임을 만들어 보려고 합니다.

본 포스팅은 코드카데미 자바스크립트 과정을 토대로한 포스팅입니다.

참조 : https://www.codecademy.com/en/tracks/javascript

그럼 바로 시작하도록 하겠습니다.

1. 사용자 입력과 컴퓨터 입력받기

사용자의 입력은 prompt 를 통해 rock, paper, 또는 scissors 를 받습니다.

컴퓨터의 입력은 Math.random() 함수를 이용하여 0~1사이의 난수를 받습니다.

그리고 입력받은 random 수에 따라 rock, paper 또는 scissors 를 결정하는 if~else if ~ else 문을 구현하면 아래와 같습니다.

var userChoice;//유저의 입력을 받을 매개변수

userChoice = prompt("Do you choose rock, paper or scissors?");

var computerChoice;//컴퓨터의 입력을 받을 매개변수

computerChoice = Math.random();

if (computerChoice>=0 && computerChoice<=0.33){//랜덤숫자를 가위바위보로 바꾸어 주는 조건문
    computerChoice = "rock";
}
else if(computerChoice>=0.34 && computerChoice<0.66){
    computerChoice = "paper";
}
else {
    computerChoice = "scissors";
}

2. 승자 알아내기

기본적인 가위바위보에 규칙은 생각보다 간단합니다. 규칙은 아래와 같습니다.

1. 두 사람이 같은 선택을 하면 무승부이다.

2. 묵은 가위에게 이기지만 보에게는 진다.

3. 보는 묵에게는 이기지만 가위에게는 진다.

이를 코드로 구현하면 if ~else if ~ else 뿐만 아니라 조건문 내부에 조건문이 들어가는 중첩 조건문이 발생합니다. 코드를 세부적으로 설명드리지는 않겠지만 위에서 제시한 조건에 따라 아래 코드가 어떻게 형성되는지 깊이 생각해보시기 바랍니다.

function compare(choice1, choice2)
{
    if(choice1===choice2)// 조건 1
    {
        return "The result is a tie!";
    }
    else if(choice1==="rock")// 조건 2
    {
        if(choice2==="scissors")
        {
            return "rock wins";
        }
        else
        {
            return "paper wins";
        }
    }
    else if(choice1==="paper")// 조건 3
    {
        if(choice2==="rock")
        {
            return "paper wins";
            
        }
        else
        {
            return "scissors wins";
        }
    }
}

3. 결론

위의 1번 사용자와 컴퓨터의 입력을 받는 것과, 2번 승자를 알아내는 함수 두가지를 연결하기 위해서는

1번에서 구해지는 computerChoice 와 userChoice 를 매개변수로 compare() 함수를 호출합니다.

완성된 코드는 아래와 같습니다.

var userChoice = prompt("Do you choose rock, paper or scissors?");
var computerChoice = Math.random();
if (computerChoice < 0.34) {
	computerChoice = "rock";
} else if(computerChoice <= 0.67) {
	computerChoice = "paper";
} else {
	computerChoice = "scissors";
} console.log("Computer: " + computerChoice);

compare(userChoice,computerChoice);// 함수 호출!

function compare(choice1, choice2)// 함수 정의
{
    if(choice1===choice2)
    {
        return "The result is a tie!";
    }
    else if(choice1==="rock")
    {
        if(choice2==="scissors")
        {
            return "rock wins";
        }
        else
        {
            return "paper wins";
        }
    }
    else if(choice1==="paper")
    {
        if(choice2==="rock")
        {
            return "paper wins";
            
        }
        else
        {
            return "scissors wins";
        }
    }
}

이렇게 하면 아래와 같이 사용자의 입력을 받아 컴퓨터와 비교하여 그 승패여부를 출력하는 게임이 완성됩니다.

오늘은 지금까지 배운 자바스크립트 내용을 바탕으로, 사용자의 입력을 받아서 컴퓨터와 비교하여 

승패를 결정하는 가위바위보 게임을 만들어 보았습니다.

50줄 가까이 되는 프로그램이지만 결과는 생각보다 흥미롭습니다. (누군가에게는 시시해 보일수도 있습니다.)

아직은 작은 발걸음이지만 한걸음 한걸음이 즐거운 프로그래밍이 되시기를 바랍니다.

화이팅!

지금까지 영감을 주는 개발자 방민방민 이었습니다!