JavaScript - 구구단 구현

Sangho Moon·2020년 7월 2일
0

JavaScript

목록 보기
2/25
post-thumbnail

1. 알고리즘

구구단을 구현하기 앞서 다음과 같은 간단한 알고리즘을 생각해볼 수 있다.


2. Math.random( ) - 랜덤 숫자 생성

Console 창에 Math.random( )을 입력하면 아래와 같이 0부터 1사이의 소수점이 있는 숫자들로 랜덤하게 출력된다.

여기에 9를 곱하면 1의 자리가 8인 숫자까지 랜덤하게 출력된다.


3. Math.floor( ), Math.ceil( ) - 정수 반환

  • Math.floor( ) 함수는 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 정수로 반환한다. (소수값이 존재할 때 소수값을 버리는 역할)
Math.floor( 45.95); //  45
Math.floor( 45.05); //  45
Math.floor(  4   ); //   4
Math.floor(-45.05); // -46 
Math.floor(-45.95); // -46
  • Math.ceil( ) 함수는 주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자를 정수로 반환한다. (소수값이 존재할 때 값을 올리는 역할)
Math.ceil(.95);    // 1
Math.ceil(4);      // 4
Math.ceil(7.004);  // 8
Math.ceil(-0.95);  // -0
Math.ceil(-4);     // -4
Math.ceil(-7.004); // -7

구구단을 구현하기 위해서는 이 둘의 함수 중 아무거나 사용해도 상관없다.
다만 Math.floor( )를 적용하면 숫자의 1의 자리가 최대 8까지만 출력되므로 뒤에 +1을 추가해줘야 한다. 따라서 코드를 간소화하기 위해 Math.ceil( )을 사용했다.

기존에 Console 창에서 출력되었던 소수점이 있던 숫자들을 Math.ceil( ) 함수로 감싸주면 아래와 같이 1부터 9까지의 숫자들이 랜덤하게 정수로 출력된다.


4. 변수 설정

구구단의 기본 로직은 숫자1 * 숫자2 = 결과이므로
다음과 같이 먼저 변수를 설정한다.

var 숫자1 = Math.ceil(Math.random() * 9);
var 숫자2 = Math.ceil(Math.random() * 9);
var 결과 = 숫자1 * 숫자2;

그리고 '숫자1 곱하기 숫자2는?'을 나타내는 prompt 창을 만든다.

var 숫자1 = Math.ceil(Math.random() * 9);
var 숫자2 = Math.ceil(Math.random() * 9);
var 결과 = 숫자1 * 숫자2;
var= prompt(String(숫자1) + '곱하기' + String(숫자2) + '는?');

5. if문을 통한 정답 체크

prompt 창이 뜨고 내가 답을 숫자로 입력했을 때, 그것의 결과가 맞았는지 틀렸는지 체크하는 alert 창을 만들기 위해 if 문을 적용한다.

var 숫자1 = Math.ceil(Math.random() * 9);
var 숫자2 = Math.ceil(Math.random() * 9);
var 결과 = 숫자1 * 숫자2;
var= prompt(String(숫자1) + '곱하기' + String(숫자2) + '는?');
if (결과 === Number()) {
  alert('딩동댕');
} else {
  alert('땡');
}

6. while( ) - 반복문을 통한 무한루프 생성

while문은 조건문이 참일 때 실행되는 반복문이다. 조건은 문장안이 실행되기 전에 참, 거짓을 판단한다.

while (condition)
  statement

우선 위의 코드 전체를 while 문으로 감싸면

while (true) {
  var 숫자1 = Math.ceil(Math.random() * 9);
  var 숫자2 = Math.ceil(Math.random() * 9);
  var 결과 = 숫자1 * 숫자2;
  var= prompt(String(숫자1) + '곱하기' + String(숫자2) + '는?');
  if (결과 === Number()) {
    alert('딩동댕');
  } else {
    alert('땡');
  }
}

정답을 체크한 뒤 구구단 문제가 무한 반복된다.
여기서 답이 틀렸을 때 그 문제를 다시 묻도록 처리하려면
중간에 while 문을 한번 더 사용해야 한다.

while (true) {
  var 숫자1 = Math.ceil(Math.random() * 9);
  var 숫자2 = Math.ceil(Math.random() * 9);
  var 결과 = 숫자1 * 숫자2;
  var 조건 = true;
  while (조건) {
    var= prompt(String(숫자1) + '곱하기' + String(숫자2) + '는?');
    if (결과 === Number()) {
      alert('딩동댕');
      조건 = false;
    } else {
      alert('땡');
    }
  }
}

'조건'이라는 변수를 true로 설정한 뒤, 두 번째 while문의 condition에 '조건'을 입력한다.
while문은 조건문이 true일 때 실행되는 반복문이므로, 답이 맞았을 때는 조건 = false; 로 설정하여 같은 문제를 다시 물어보지 않도록 처리한다.
답을 틀리게 적었을 경우, 조건은 여전히 true이므로 같은 문제를 물어보게 된다.


Ref.
inflearn_웹 게임을 만들며 배우는 자바스크립트
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/floor
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/whil
https://m.blog.naver.com/PostView.nhn?blogId=diceworld&logNo=220174711730&proxyReferer=https:%2F%2Fwww.google.com%2F

profile
Front-end developer

0개의 댓글