모바일 이벤트 프로토타입

모바일에서 터치로 할 수 있는 이벤트 3가지를 제작해 보았습니다. http://dev.iamdenny.com/Mobile-Events/index.html

  1. 복권 긁기 이벤트

Canvas, jQuery Mobile을 사용하였습니다. 이미지가 하단에 배치되어 있고, 그 위에 Canvas가 겹쳐져 있도록 하였습니다. 그리고 터치가 시작될 때(vmousedown), Canvas에서 Line을 그리기를 시작하고, 터치가 이동할 때(vmousemove)마다 Line을 그리도록 하였습니다. 다만 Line의 색은 투명하도록 Canvas 설정하였습니다(oCtx.globalCompositeOperation = 'destination-out', 참고 : https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html). 터치가 끝났을 때(vmouseup)에는 지워진 픽셀 수를 계산하여, 70% 이상이 지워졌을 때, 당첨 또는 꽝을 알리도록 하였습니다.








2. 화분 물주기 이벤트

 CSS3 Animation과 Jindo Mobile Component를 이용하여 개발하였습니다. 구름과 화분 사이를 손으로 수차례 긁으면 비가오고, 화분이 자라는 이벤트 입니다. JMC의 Touch 모듈을 사용하였고, 터치가 위/아래로 70px 이상일때만 'touchmove' 발생하도록 하였습니다. 'touchmove'가 발생하는 횟수에 따라 -webkit-animation을 이용하여 비의 속도를 점점 빠르게 하였습니다.

3. 프리킥 이벤트

 CSS3 Animation + Jindo Mobile Component를 이용하여 개발하였습니다. CSS3를 이용하여 왼쪽, 가운데, 오른쪽으로 공이 움직일 수 있는 것과 선수가 공을 찬 후의 상태를 적절히 class로 만들어 놓았고, JMC의 DragArea & DropArea 모듈을 이용하여, 축구공은 Draggable, 골대 이미지 위의 떠 있는 왼쪽, 가운데, 오른쪽의 투명 레이어를 Droppable로 하였습니다. 그래서 Drop이 발생할 때, 축구 선수와 공의 class 이름을 변경 하였습니다.

Gracias.