jQueryスクラッチカード wScratchPad をスマホ対応にしてみた

 Websanova Scratch Pad という jQuery のプラグインを使うと、
ＰＣブラウザ上で、スクラッチカードをコインで削る表現 が簡単に作れます。




PC用スクラッチデモ

sample:golgo_JK_PC

0%

マウス対応だったのですが、スマホで使いたいので、マウス関連のイベ ントをタッチ関連のイベントに書き換えました。

イベント

• mousedown → touchstart
• mousemove → touchmove
• mouseup → touchend

座標取得

• e.pageX → e.originalEvent.changedTouches[0].pageX
• e.pageY → e.originalEvent.changedTouches[0].pageY

スマホ用スクラッチデモ（スマホでお試しください）

sample:golgo_JK_Phone

0%

書き換えるのが面倒な方は、こちらからダウンロードして お使いください。
↓
一式ダウンロード

とってもいいプラグインを作ってくれた WEBSANOVA さんに感謝です。

jQueryでスクラッチカードを実 現する wScratchPad をスマホ対応にしてみた