CSS3 체크 타일을 사용하여 경기하기

Question

HTML5와 CSS3를 사용하여 게임을 개발 중입니다.

나는 hover 이벤트에 CSS3 애니메이션이 첨부 된 div가 있습니다. 이 게임은 타일/자동차 게임과 기본적으로 일치합니다. 이것은 -webkit-이므로 Chrome에서 최상으로 실행됩니다. http://tinyurl.com/3ry2bgn

나는 게임 로직을 첨부하고 싶지만 취할 접근 방식에 난처한 상황에 빠진 오전 : 여기

은 미리보기입니다.

추가 ID를 DIV에 첨부하고 JavaScript를 사용하여 확인할 수 있습니까?

어떻게 애니메이션을 onClick 이벤트 애니메이션으로 만들 수 있습니까? 또는 iPad의 탭 이벤트에서 더 좋습니까?

감사합니다.

Answer 1

자바 스크립트를 통해 CSS3 애니메이션을 제어하려면 일반적으로 애니메이션 스타일을 클래스에 배치 한 다음 해당 클래스를 onClick 이벤트 처리기에 추가하는 것이 가장 좋습니다.

애니메이션 이벤트를 사용하여 애니메이션의 끝을 감지하고 클래스를 제거하여 애니메이션이 후속 이벤트에서 다시 시작되도록하거나 클래스가 이미 추가 된 경우 각 onClick 이벤트를 체크 인 할 수 있습니다. 그것을 읽으시기 전에 제거하십시오.

당신이 웹킷 기반 브라우저를 사용하고 있지만은 Mozilla Developer Reference CSS Animations Page는 여전히 훌륭한 참조입니다 - 날이 접근에 대한 몇 가지 아이디어를 제공하는 -webkit- ;-)