[JavaScript] star 3_왕관

안녕하세요. 이제 막 기획자로 시작한 아기 기획자 소소한G 입니다.

비전공자 출신으로 IT 웹 기획자로서 살아남기위해 일주일에 두번 프로트엔드 개발 수업을 듣고 있어요.

온전히 비전공자의 시선으로 꼼꼼하게, 원초적으로 설명드리려고 합니다.

저처럼 초보자 웰컴이에용.

 

오늘은 별 씨리즈 3탄으로 Javascript를 이용하여 왕관 모양 별을 찍어보겠습니다. 

2탄은 아래 링크로 확인하세요.

https://hjp-recipe.tistory.com/7?category=835412 

[JavaScript ] star 2_피라미드

 

---

 

왕관 모양 별 찍기

 

○는 공백, ★는 별

1. 모든 열과 행 찍기

    ★★★★★★★★★★★★★★★★★

    ★★★★★★★★★★★★★★★★★

    ★★★★★★★★★★★★★★★★★

    ★★★★★★★★★★★★★★★★★

    ★★★★★★★★★★★★★★★★★

 

    * 여기서 별의 갯수 규칙은 w(j)=h(select)x4-3 으로 찾을 수 있다.

모든 열과 행 찍기

여기에서 이제 공백과 별의 규칙을 찾아서 if문으로 조건문을 넣어주면 된다.

★○○○○○○○★○○○○○○○★

★★○○○○○★★★○○○○○★★

★★★○○○★★★★★○○○★★★

★★★★○★★★★★★★○★★★★

★★★★★★★★★★★★★★★★★

 

1. 파란색 별을 본다면

i=0일때 j=0

i=1일때 j=0,1

i=2일때 j=0,1,2

i=3일때 j=0,1,2,3

i=4일때 j=0,1,2,3,4

이렇게 별이 하나씩 증가하게 된다.

j는 i까지 별을 찍는다.

그러므로 조건은 j<=i 이렇게 해주면 된다.

 

2. 빨간색 별을 본다면

i=0일때 j=16

i=1일때 j=15,16

i=2일때 j=14,15,16

i=3일때 j=13,14,15,16

i=4일때 j=12,13,14,15,16

파란색 별과는 반대라는 것을 알 수 있다.

그러므로 조건은 j>=17-(i+1)이렇게 해주면 된다.

 

3. 노란색 별의 규칙은

i=0일때 j=8

i=1일때 j=7,8,9

i=2일때 j=6,7,8,9,10

i=3일때 j=5,6,7,8,9,10,11

i=4일때 j=4,5,6,7,8,9,10,11,12

8-i부터 8+i까지 별을 찍으면 되므로 조건은 j>=8-i && j<= 8+i 이렇게 해주면 된다.

 

4. 공백의 규칙은 저 조건들이 성립이 안 되는 것들은 공백을 찍어주면 되므로 else로 공백을 출력하면 된다.

 

여기서 잠깐!

만약에 select값에 따라 왕관의 별 갯수도 달라진다.

select=5일때 맨 아래줄의 별의 갯수 17개

select=4일때 맨 아래줄의 별의 갯수 13개

select=3일때 맨 아래줄의 별의 갯수 9개

select=2일때 맨 아래줄의 별의 갯수 5개

select=1일때 맨 아래줄의 별의 갯수 1개

규칙은 selec*4-3이다.

 

그러므로

 

왕관모양 별찍기 완성!

완성본은 캡쳐한다는 걸 깜빡했네요~!