Dpangz - Leagure of Clonoid
Dpangz - Leagure of Clonoid
프로젝트 소개
웹에서 Play할 수 있는 HTML5 기반 게임을 제작하였습니다. 전체 웹사이트 ui를 제작하고, Game페이지에서는 Canvas로 게임을 제작하였습니다. Canvas 내부의 인게임은 게임 개발자가 개발 하였으며, 게임 내 상점, 채팅, 거래 시스템 등 버튼을 클릭하여 제어 할수 있는 부분은 제가 담당하여 개발하였습니다. 메인 홈페이지에 Chart.js를 사용하여 데이터를 시각화 하였고, sheets.js를 사용하여 엑셀 파일을 읽어와서 데이터를 시각화 하였습니다.
프로젝트 기여도
전체 30% (UI 100%) - 디자이너(2), 백엔드(2), 프론트엔드(1)
사용 기술
- Asp.net core
- html
- css
- sass
- JavaScript
- TypeScript
- 반응형
- chart.js
- sheets.js
- Lottie
- PWA
사용 기능
chart.js
-Chart.js를 사용하여 데이터를 시각화 하였습니다.
sheets.js
-sheets.js를 사용하여 엑셀 파일을 읽어와서 chart.js와 함께 데이터를 시각화 하였습니다.
Lottie
-Lottie를 사용하여 애니메이션을 적용하였습니다.
PWA
-PWA를 적용하여 웹앱 형식으로 개발하였습니다.
프로젝트 후기
이전 HTML5 게임 Digtoc 게임을 제작해본 경험이 있었기 때문에 이번 프로젝트는 더 쉽게 제작할 수 있었습니다. sheet.js와 chart.js를 혼합하여 데이터 시각화를 해보았고, 구조회된 가이드를 제공하고 기획에서 excel 파일을 받아 변경 사항이 있더라도 즉시 chart.js에 반영할 수 있어서 업무 효율성을 높일 수 있었습니다.