CSS 연습 Flexbox Defense

guri67·2025년 1월 21일

CSS 게임

목록 보기
2/2
post-thumbnail

Flexbox Defense

링크 : http://www.flexboxdefense.com/

전에 즐겼던 Flexbox Froggy와 유사한 게임으로 CSS요소를 활용해서 진행하는 게임이다. Froggy와 다르게 스테이지 구성은 12단계로 구성되어있으며 Froggy보다 어렵다고 한다

🎮 게임 진행

지문에서 CSS요소를 먼저 알려주고 이에 해당하는 요소를 입력해서 포탑을 배치하면 된다.


위에서 지정한 요소들을 배치한 상황이다 투명선은 타워 그룹이며 그룹별로 justify-content요소를 사용해서 포탑을 배치하고 웨이브 시작을 눌러 게임을 진행 할 수 있다.

게임 시작전에 팝업창으로 해당 스테이지에서 사용할 CSS요소들에 대해 알려주고 요소들을 사용해 포탑을 배치하게 된다.

개인적으로 Froggy 보다 어렵다고 느낀부분은 Froggy에서는 힌트 자체도 간결했고 무엇보다 입력한 값을 통해 바로바로 피드백 되어서 틀리더라도 금방 다른 요소를 넣어 확인 할 수 있는 반면 Defense에서는 포탑을 배치하고 게임을 진행해 웨이브를 막아야한다는 기믹있어서 결과를 보기까지 시간이 더 걸린다는 점 때문에 Froggy보다 어렵다고 느껴졌다.

🎈 클리어

📝 후기

Froggy보다 어려웠지만 생각보다 단순했다. Froggy를 통해 각 요소들이 어떤게 있는지 알았다면 Defense에서는 생각을 하면서 포탑을 어떻게 배치해야되는지 생각을 하는 시간이었다. 이제 다시 한번 플레이 해보면 각 요소들에대해 고민을 하지 않고 선택 할만큼 연습이 되는 시간이었다.

0개의 댓글