火曜日, 4月 09, 2013

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

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




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 さんに感謝です。