박스 UI
Css로 꾸며줄것은 html로 박스로 잡아줬던것들을 꾸며주면 되겠다.
남아있는 시간과 남아있는 총알을 같은 ui로 꾸며준뒤 너비만 좀 바꿔주었다.
디지털폰트
그리고 남아있는 숫자와 시간을 보면 디지털식으로 되어있어 구글폰트에서 최대한 비슷한
Tourney체를 가져와서 구현해보았다.
에임
에임은 font awesome에서 crosshair을 따서 구현하였고,팝업창은 처음에는 안보이도록 display:none으로 설정한뒤 게임시작,게임끝날시에만 보이도록 자바스크립트에서 할예정이다.
애니메이션
마지막으로 몬스터들의 움직임을 애니메이션으로 표현해야하는데 실제 메이플스토리의 base.wz에서 몬스터들의 움직임,처치시 사라지는 모션을 css의 @keyframe으로 구현하였다.그리고 움직이는 애니메이션을 같이 넣어줘야하는데 화면에서 왼쪽에 위치한다면 오른쪽방향으로 아치모양이동, 오른쪽에 위치한다면 왼쪽방향으로 아치모양이동,처치시 서서히 사라지는 몬스터,이런식으로 총 3개의 애니메이션을 만들어주었다.
아쉬운점
에임의 이미지가 살짝아쉽고 에임의 z-index가 몬스터랑 큰경우 클릭을 하여도 몬스터를 인지하지못하여 강제로 에임의 z-index를 낮추어서 몬스터에게 에임이 갔을때 에임이 몬스터의 아래에 위치하게된다, 총알의 이미지를 구하지못해 총알대신 윈도우 이모지에 있는 🧨 모양을 사용하였다.
몬스터는 자바스크립트로 배치만 한 상황이고 css로 구현한 이미지이다.
딩구르르