728x90
반응형

조건

1. "가위", "바위", "보" 중 하나를 선택하면 게임 진행

2. "Com:" 옆에 랜덤으로 선택된 결과를 출력하고 "Player:" 옆에 사용자가 선택한 결과를 출력

3.선택한 결과 밑에 게임 진행 결과를 출력

import logo from './logo.svg';
import './App.css';
import { useState } from 'react';

function Title() {
  return (
    <div className='title'>
      <h1>가위 바위 보 게임</h1>
    </div>
  );
}

function Scissors(props) {
  const { onUserChoice } = props;

  function run() {
    const choice = 'scissors';
    console.log(choice);
    onUserChoice(choice);
  }

  return (
    <div className='control'>
      <img src='http://ggoreb.com/images/react/scissors.png' onClick={run} />
    </div>
  );
}

function Rock(props) {
  const { onUserChoice } = props;

  function run() {
    const choice = 'rock';
    console.log(choice);
    onUserChoice(choice);
  }

  return (
    <div className='control'>
      <img src='http://ggoreb.com/images/react/rock.png' onClick={run}></img>
    </div>
  );
}

function Paper(props) {
  const { onUserChoice } = props;

  function run() {
    const choice = 'paper';
    console.log(choice);
    onUserChoice(choice);
  }

  return (
    <div className='control'>
      <img src='http://ggoreb.com/images/react/paper.png' onClick={run}></img>
    </div>
  );
}

function getRandomChoice() {
  const choices = ['scissors', 'rock', 'paper'];
  const randomIndex = Math.floor(Math.random() * choices.length);
  return choices[randomIndex];
}

function getResultMessage(userChoice, comChoice) {
  if (userChoice === comChoice) {
    return '비겼습니다!';
  } else if (
    (userChoice === 'scissors' && comChoice === 'paper') ||
    (userChoice === 'rock' && comChoice === 'scissors') ||
    (userChoice === 'paper' && comChoice === 'rock')
  ) {
    return '당신이 이겼습니다.';
  } else {
    return '당신이 졌습니다.';
  }
}

function Result(props) {
  const [userChoice, setUserChoice] = useState(null);
  const comChoice = getRandomChoice();
  const resultMessage = getResultMessage(props.userChoice, comChoice);

  function handleUserChoice(choice) {
    setUserChoice(choice);
  }

  return (
    <div className='result'>
      <h1>Com: {comChoice} </h1>
      <h1>Player: {props.userChoice || ''} </h1>
      <h1>{resultMessage}</h1>
    </div>
  );
}

function App() {
  const [userChoice, setUserChoice] = useState(null);

  const handleUserChoice = (choice) => {
    console.log(`User chose: ${choice}`);
    setUserChoice(choice);
  };

  return (
    <div className="App">
      <Title />
      <Scissors onUserChoice={handleUserChoice} />
      <Rock onUserChoice={handleUserChoice} />
      <Paper onUserChoice={handleUserChoice} />
      <Result userChoice={userChoice} />
    </div>
  );
}

export default App;

 

실행 결과

728x90
반응형

'Digital Boot' 카테고리의 다른 글

[Open Weather API] Open Weather로 날씨 API 불러오기  (1) 2023.11.02
[Spring Boot] Project - 미니 게임 만들기  (0) 2023.11.01
Project Report  (1) 2023.10.30
[Html/Java Scrip] - 최대 공약수, 최소 공배수 구하기, 재귀호출 사용  (0) 2023.09.01
[Java Script] - 거스름 돈 구하기  (0) 2023.08.31
728x90
반응형

최대 공약수 구하기

GCD : Greatest Common Divisor

A, B 두 수 중 적은 수를 기준으로 1씩 감소시키면서

A와 B가 나누어 떨어지는 숫자

<!-- 생략 -->

<body>
    <script>
        let a = 21, b = 14;
        let c = Math.min(a, b);
        console.log(c);
        for (let i = c; i >= 1; i--) {
            if (a % i == 0 && b % i == 0) {
                console.log(`최대공약수: ${i}`);
                break;
            }
        }
    </script>
</body>

 

최소 공배수 구하기

LCD : Least Common Divisor

A, B 두 수 중 큰 수를 기준으로 1씩 증가시키면서

A와 B가 나누어 떨어지는 숫자

<!-- 생략 -->

<body>
    <script>
        let a = 21, b = 14;
        let d = Math.max(a, b);
        console.log(d);
        for (let j = d; j <= a * b; j++) {
            if (j % a == 0 && j % b == 0) {
                console.log(`최소공배수: ${j}`);
                break;
            }
        }
    </script>
</body>

 

유클리드 호제법을 재귀호출로 나타내기

유클리드 호제법은 최대 공약수, 최소 공배수를 나타내는 알고리즘

<!-- 생략 -->

<body>
    <script>
            let a = 21, b = 14;
            function gcd(a, b) {
                if (a % b == 0) {
                    return b;
                }
                return gcd(b, a % b);
            }
            console.log(gcd(a, b));
            let 최소공배수 = a * b / gcd(a, b);
            console.log(최소공배수);
    </script>
</body>
728x90
반응형

'Digital Boot' 카테고리의 다른 글

[Open Weather API] Open Weather로 날씨 API 불러오기  (1) 2023.11.02
[Spring Boot] Project - 미니 게임 만들기  (0) 2023.11.01
Project Report  (1) 2023.10.30
[React] 가위바위보 게임 만들기  (0) 2023.09.07
[Java Script] - 거스름 돈 구하기  (0) 2023.08.31
728x90
반응형

문제

 

내기 생각해 본 script

-if 조건문 사용

-각 동전의 최소 개수가 나올 뿐 동전 개수의 합이 나오진 않는다.

<!-- 생략 -->
<body>
    <script>
        let 돈 = 0;
        돈 = prompt('받은 돈을 입력하시오');
        console.log(`받은 돈 ${돈}원`)
        let 동전수 = 0;

        if (parseInt(돈 / 500) >= 1) {
            console.log(`500원 ${parseInt(돈 / 500)} 개`)
        }
        if (돈 % 500 >= 1) {
            console.log(`100원 ${parseInt((돈 % 500) / 100)} 개`)
        }
        if (돈 % 100 >= 5) {
            console.log(`50원 ${parseInt((돈 % 100) / 50)} 개`)
        }

        if (돈 % 50 >= 1) {
            console.log(`10원 ${parseInt(돈 % 50) / 10} 개`)
        }

    </script>
</body>

 

예시 script 1

-greedy 알고리즘

-거스름 돈을 미리 설정해둠(하드코딩)

-조건문 if 사용

-반복문 while 사용

-if문만 사용한다면 조건에 만족할 경우 1번으로 끝나고 반복하지 않는다. 그래서 while문을 써서 돈이 0원보다 크다면 계속 반복하고 0원이 된다면 멈추도록 한다.

<!-- 생략 -->
<body>
  <script>
        let money = 1260;
        let 동전수 = 0;

        while (money > 0) {
            if (money >= 500) {
                동전수 = 동전수 + 1;
                money -= 500;
            } else if (money >= 100) {
                동전수 = 동전수 + 1;
                money -= 100;
            } else if (money >= 50) {
                동전수 = 동전수 + 1;
                money -= 50;
            } else if (money >= 10) {
                동전수 = 동전수 + 1;
                money -= 10;
            }
        }
        console.log(동전수);
  </script>
</body>

예시 script2

<!-- 생략 -->
<body>
    <script>

        let money = 1260;
        let 동전수 = 0;

        while (money > 0) {
            if (money >= 500) {
                동전수 += parseInt(money / 500);
                money = money % 500;
            } else if (money >= 100) {
                동전수 += parseInt(money / 100);
                money = money % 100;
            } else if (money >= 50) {
                동전수 += parseInt(money / 50);
                money = money % 50;
            }
            else if (money >= 10) {
                동전수 += parseInt(money / 10);
                money = money % 10;
            }
        }

        console.log(동전수);
    </script>
</body>

예시 script3

<!-- 생략 -->
<body>
    <script>
        let money = 1260;
        let 동전수 = 0;

        let 동전종류 = [500, 100, 50, 10];
        let count = 0;
        while (count < 4) {
            let 동전 = 동전종류[count];
            count++;
            동전수 += parseInt(money / 동전);
            money %= 동전;
        }
        console.log(동전수);
    </script>
</body>
728x90
반응형

'Digital Boot' 카테고리의 다른 글

[Open Weather API] Open Weather로 날씨 API 불러오기  (1) 2023.11.02
[Spring Boot] Project - 미니 게임 만들기  (0) 2023.11.01
Project Report  (1) 2023.10.30
[React] 가위바위보 게임 만들기  (0) 2023.09.07
[Html/Java Scrip] - 최대 공약수, 최소 공배수 구하기, 재귀호출 사용  (0) 2023.09.01

+ Recent posts

티스토리툴바