[1人 프로젝트] 다른 색깔 찾기 게임 3회차

🎉 성과

완성한 부분

1. flex-flow를 이용하여 정렬하기
2. 사각형을 감싼 상자 360px로 고정하기
3. 사각형 개수 변화때마다 사각형 크기 조절

 

 

---

 

 

✨ 느낀점

👍 알게 된 점

사각형 개수 변할때마다, 사각형 크기 조절

사각형을 flex-wrap하기위해 계산식에 사용할 row변수를 1로 지정한다. 그리고 초기 사각형 크기로 176px을 지정한다.

색깔이 같은 사각형과 다른 색깔을 가진 사각형의 style에 boxsize 변수를 넣는다.

 

사각형 크기는 BoardCalculate 함수를 이용해 계산한다. 계산한 값을 setBoxsize를 이용해 동기화한다.

BoardCalculate 함수에 사용되는 row변수값은 사각형의 개수(변수 count)가 변화하면 +1씩 더한 값을 가진다.