Lemmings CSS 애니메이션

• Walker Playground는 걷는 캐릭터를 추가하고, 드래그로 옮기거나 빠르게 튕겨 던질 수 있는 놀이터임
• 버튼이나 __walker.add() 로 캐릭터를 추가할 수 있으며, 계단, 공중 플랫폼, 구덩이, 벽 등 여러 지형이 마련돼 있음
• 창 크기를 바꾸면 캐릭터가 서 있는 표면을 따라 이동하며, 빠르게 크기를 조절하면 공중으로 튀어 오름
• 테두리, 상자, 버튼, 이미지, 입력 필드는 캐릭터를 막지만, 텍스트는 착지와 통과가 모두 가능한 바닥으로 작동함
• 텍스트의 각 줄이 개별 바닥이어서 캐릭터가 줄 사이로 떨어지거나 짧은 줄 끝에서 아래로 낙하할 수 있음

캐릭터 조작과 지형

• 추가 버튼 또는 __walker.add()로 캐릭터를 생성하고, 드래그로 들고 이동하거나 튕겨서 던질 수 있음
• 창 크기 조절 시 캐릭터는 자신이 서 있는 표면을 따라 움직이며, 빠른 크기 변경은 캐릭터를 날려 보냄
• 계단, 오르기에 너무 높은 계단, 공중 플랫폼, 구덩이, 벽, 카드, 우리가 마련돼 있음
• 페이지 하단 근처에는 끝까지 떨어진 캐릭터를 받아 주는 긴 바닥이 있음

카드와 텍스트의 충돌 동작

• 카드는 창 너비가 줄어들면 새 행으로 재배치되며, 그 위에 서 있던 캐릭터를 밀어냄
  • 카드 테두리는 단단한 경계여서 윗변을 걸을 수 있고 내부에 갇힐 수도 있음
  • 버튼과 입력 필드도 단단한 장애물로 작동함
  • 텍스트에는 착지할 수 있지만 통과도 가능하며, 네 번째 카드에는 캐릭터를 위로 던져 올려 볼 수 있음
• 읽기 영역은 창 크기가 바뀔 때 텍스트 배치가 크게 달라져, 크기 조절로 캐릭터를 날려 보내기 좋은 장소임
  • 각 텍스트 줄이 별도의 바닥이므로 줄에서 줄로 떨어지거나, 짧은 줄 끝에서 떨어져 아래에 있는 표면에 착지할 수 있음
  • 줄 간격은 캐릭터 키보다 좁지만 텍스트는 이동을 막지 않아 문단의 두 줄 사이에 갇히지 않음
  • 이동을 막는 요소는 테두리, 상자, 버튼, 이미지, 입력 필드임