Nizbridge

UI Developer

Navigation
 » Blog
 » About Me
 » Projects
 » Github
 » Bookmark
 » XML Feed

GOGO BROWN

2015.03 » jQuery
GOGO BROWN View
  • JS 개발자로 참여.
  • 모든 이미지는 css3를 사용하여 그림.

사내에서 진행된 10k 컨테스트 출품작입니다.

10k 컨테스트는 아래의 조건을 만족해야 합니다.


* SIZE : 이미지, 스크립트, 마크업까지 포함된 파일이 압축후 10KB를 넘지 않아야 합니다.
* LIBRARIES : 사용가능한 라이브러리는 Jquery이며, Jquery는 10KB 용량에 포함되지 않습니다.
* CROSS BROWSING : IE, Chrome, Safari 최신버전에서 정상 동작해야 합니다.


조건을 충족하여 만들기가 생각보다 쉽지 않았는데요,
어떤 게임을 만들지 고민하다가 그 당시 유행하던 게임들의 모티브를 얻어서
runner 게임을 만들게 되었습니다.

팀원들끼리 기획, 디자인, 마크업을 나눠서 진행하였으며,
저는 JS개발로 참여하였습니다.

html5의 로컬스토리지 활용하여 최고점수를 기록하고 있으며,
모든 이미지들을 css3로 그려서 용량을 최소화했습니다.
동적인 부분들도 css3의 애니메이션 속성을 활용했습니다.

가장 어려웠던 부분은 충돌을 체크하는 부분인데,
장애물과 캐릭터가 충돌시 어떤방식으로 체크할 것인가를 가장 많이 고민했었던 것 같습니다.
결과적으로 충돌체크가 부드럽게 되지는 못했고, 그래서 난이도가 꽤 높았습니다.

JS를 공부하면서 작업했던거라서 코드를 아쉬움이 많이 남는데요,
특히 최적화가 안되어서 모바일에서 상당히 느렸던 것이 가장 아쉽니다.