[Zerocho-02] 별찍기연습 (반복문 연습하기)

이번 시간에는 원래 구구단 게임을 만들기로 했는데,

구구단 게임을 하기 전에 잠시 반복문 연습을 위해 별찍기를 해보도록 하겠습니다.

 

 

 

1. 1개씩 증가하는 별찍기

*

**

***

****

*****

위와 같은 형태의 별을 반복문을 활용해 찍어봅시다.

for(var star=1; star <= 5; star +=1){
	console.log('*'.repeat(star));
}


// repeat에 관하여

something.repeat(반복횟수);

위와 같은 형태로 사용 할 수 있습니다.
예를들어,

'a'.repeat(3); -> aaa;

위와 같이 출력됩니다.

코드를 약간 설명해보자면, for 반복문으로 star변수를 만들어 1~5까지 반복하게 만들었으며, .repeat이라는 메소드를 활용해 *을 star만큼 출력하게 해줬습니다.

 

 

2. 거꾸로 별찍기

*****

****

***

**

*

위와 같은 형태의 별을 반복문을 활용해서 찍어보겠습니다.

for(var star=5; star >= 1; star -= 1){
	console.log('*'.repeat(star));
}

for 반복문이 이번엔 5부터 시작하고, 1보다 크거나 같을 때까지 계속 반복하라했으며, 5로 시작한 star는 -1씩 줄어듦에 따라서 star변수는 1이 될때까지 순차적으로 하나씩 줄어듭니다. 따라서 이를 repeat()부분에 삽입해 *을 star개 만큼 찍을 수 있게 해줬습니다. 단순히 위 1번 별찍기를 반대로한 것이니 1번을 이해했다면 2번은 수월하게 이해가 가능할 것 입니다.

 

3. 두배씩 늘어나는 별찍기 (짝수로 늘어나는 별)

*

**

****

********

이런식의 별찍기를 한번 해보겠습니다.

for(var star = 1; star <= 10; star *= 2){
	console.log('*'.repeat(star));
}

뒤의 star *= 2 부분만을 변경해주면 쉽게 찍어줄 수 있습니다.

 

 

4. 두개씩 작아지는 별

********

******

****

**

for(var star=8; star >= 2; star-=2){
	console.log('*'.repeat(star));
}

 

5. 공백이 있는 작아지는 별

*****

 ****

  ***

   **

    *

위와 같이 공백은 1개씩 늘어나며, 별은 한개씩 줄어드는 별찍기를 해보도록하겠습니다.

for(var s=5; s >= 1; s -= 1){
	console.log(' '.repeat(5-s) + '*'.repeat(s));
}

변수 star 대신에 s로 바꾸어 주었구요. s의 값은 5-> 4-> 3-> 2-> 1 이렇게 순차적으로 줄어들고,

공백의 숫자는 0-> 1-> 2-> 3-> 4 이런식으로 늘어나야 합니다.

따라서 s의 최초값인 숫자 5에서 점점 출어드는 s(5,4,3,2,1)을 빼준다면, 공백의 0,1,2,3,4 를 만족하는 수를 만들 수 있습니다.

위와 같이 ' '(공백)의 repeat문과, '*'(별) repeat문을 합쳐주어서 원하는 앞에 공백이 있는 별찍기를 완성했습니다.

 

6. 트리모양 별찍기

    *
   ***
  *****
 *******
*********

위와 같이 트리모양으로 별을 찍으려면 어떻게 접근해야 할까요?

for(var s=1; s<=9; star+=2){
	console.log(' '.repeat((9-s)/2) + '*'.repeat(s));
}

이렇게 잡아주면 되겠쬬?

*은 1개부터, 3개, 5개, 7개, 9개 이렇게 두단위씩 넘어갑니다.

그리고 공백은 앞에 4개, 3개, 2개, 1개, 0개 이런식으로 줄어들게 됩니다.

그래서 공식을 위처럼,

(9 - s(1,3,5,7,9) ) / 2

이런식으로 짜주면, 공백이 요구하는 4, 3, 2, 1, 0을 가질 수 있습니다.

 

 

 

 

다음시간에는 크롬 검사 탭에서 실행하지 않고, 끝말잇기게임의 화면을 구현해보도록하겠습니다.