2010-08-06 4 views
1

안녕하세요, 내 페이지 (http://marioplanet.com/images/logo/logo.png)의 머리글을 이미지의 일부를 클릭하면 작은 미니 게임을 대화 형으로 만들 수 있는지 궁금합니다.jQuery는 CSS 스프라이트로 대화 형 "게임"을 제어했습니다.

마리오는 텍스트 위에 마리오 만 붙이면 "미니 게임"이 시작될 때 나머지 문자가 사라집니다.

그러면 최종 사용자는 왼쪽 및 오른쪽 화살표 키를 사용하여 Mario를 왼쪽 및 오른쪽으로 이동하고 스페이스 바를 사용하여 이동할 수 있습니다.

jQuery 기술을 개발할 때 "미니 게임"에 대한 "업데이트"를 조금이라도 더 많이 발표하는 것이 처음이었습니다.

나는이 프로젝트가 실현 가능한지, 얼마나 많은 시간을 투자 할 것인가에 대해 궁금해하고있었습니다.

앞으로 나아갈 수있는 방법에 대한 제안이나 정보는 최고 일 것입니다. 또한 이것이 단지 jQuery와 CSS로하기가 어렵다면 조언을 받고 싶습니다! :)

답변

2

너무 어렵지 않을 것입니다. 분명히 Mario를 게임 세계와 분리 된 이미지로 분리해야합니다. 그런 다음 이미지의 모양을 만들어야합니다. 이것은 아마 이미지 맵을 사용하여 가장 쉽게 달성 될 것입니다. 그런 다음 키보드 이벤트를 캡처하고 거기에서 가져옵니다.

+0

다음은 유용한 스프라이트를 포함하고있는 이미지 중 하나의 예입니다. http : //www.spriters-resource.com/ds/marioandluigi3/sheet/25827이 파일들을 하나의 파일로 압축합니다. 그의 오른쪽 운동을 당기고, 왼쪽으로 걷고, 오른쪽으로 뛰어 오르고, 왼쪽으로 뛰어 오릅니다. 난 그냥 주로 산책 왼쪽에 애니메이션을 어떻게 해야할지 모르겠 권리 .. 내가 스프라이트의 CSS 위치를 변수에 저장하고 그들을 타이머에 연결하겠습니까? 12fps 속도로 프레임 전환? 키를 누를 때 특정 애니메이션을 전환 할 수 있습니까? – Qcom

4

체크 아웃 gameQuery, jQuery 플러그인.

+0

나는 그것을 실제로 보았다. :) 나는 그것을 오히려 사용하고 싶으면 그냥 말할 수 없다. 그것은 내 의견으로는 나 자신을 코딩하는 훌륭한 경험이 될 것이다. 그러나 내가 실패를 감지하기 시작하면, 나는 이것을 다음으로 바꿀 것이라고 생각한다 : D – Qcom