CSS Image Sprite를 이용한 유령 잡기 게임 ~ !

안녕 ~! 

오늘은 이미지 스프라이트를 이용해서 유령 잡기 게임을 만들었다 !

이미지 스프라이트란 ? 

여러개의 이미지들을 합쳐서 하나의 이미지 파일로 만들어서 관리하는 것입니다  ^^

예시를 한 번 볼까요 ~? 저기 용맹하게 싸우고 있는 용사는 좌, 우, 정지 시에 보여지는 모습이 다른데, 이것은 놀랍게도 ?!?!

 

단 한장의 이미지 !!!! 이렇게 붙어있는 이미지를 첨부하는 것입니다 !

 

그렇다면 어떻게 하는 것이냐 ? 

용사님의 CSS입니다

빈 태그에 이미지를 첨부한 뒤, width와 height를 지정하여, 원하는 모습만 보여주는 아주 음흉한 수법을 취합니다 !

이렇게 하나의 이미지로 여러 이미지를 보여주면, 로드 시에 끊김이 발생하지 않는다는 사실 !

하지만 너무 많은 이미지를 담다간 로딩이 길어질 수 있으니 주의하시길 바랍니다.

  

이후엔 javascript를 이용하여 window에 keyup 이벤트 리스너를 걸어서

keyCode가 왼쪽 화살표일 때는 좌표를 이동하면서 hero.style.backgroundPosition 의 값을 ?

왼쪽 바라보는 얼굴인 70px 0px를 줘버리는거에요~~ 그렇다면 왼쪽 무빙치는 용사가 쉬리릭~