Puchi Puchi jQuery plugin

概要

jQueryは、JavaScriptをさらに便利に使うフレームワークですが、そのプラグインでプチプチを作成してみました。 このプラグインを使用することにより、ご自分のサイトのページにプチプチが簡単に設置できます。

使用方法

jQueryのプラグインなので、jQueryを導入しなければ話が始まりません。
htmlのヘッダ部分で、jQueryを読み込ませてからjquery.puchi.jsを読み込ませます。

<script src="./js/jquery-1.7.1.min.js"></script>
<script src="./js/jquery.puchi.js"></script>

えっ？jQueryを知らない？ネットで調べてください。(^^ゞ

プチプチを表示したいdivタグを定義します。

<div id="puchiTest" style="height: 480px; width: 640px;">
</div>

このdivタグに対して、createPuchiメソッドを呼び出すと、divタグ内にプチプチが生成されます。

<script type="text/javascript">
$(function(){
    $('#puchiTest').createPuchi();
});
</script>

プチプチの描画にはHTML5のCanvasの機能を使用していますので、古いInternet Explorerでは動かないかもしれません。 そういった対策には、 HTML5業界ではよく知られている、excanvasを使用すれば使えるようになるようです。 「それ何？」って？自分で調べてください。(^^ゞ

<!--[if IE]>
  <script type="text/javascript" src="./js/excanvas.compiled.js"></script>
<![endif]-->

って感じです。
実は、マウス左ボタンのダブルクリックで、プチプチの絞る動作を行えます。
しかしながら、iPadやiPhoneのダブルタップでは、うまく動作しないかもしれません。
そんな時は、この業界では有名な、jquery.ui.touch.jsを読みこませるだけでうまくいくかもしれません。 iPadやiPhoneを持っていないので、本当に大丈夫かどうかは未確認です。(^^ゞ

<script src="./js/jquery.ui.touch.js"></script>

まぁ、こんな感じです。(^_^;)

オプション

サイズについては、以下の様に設定できます。

$('#puchiTest1').createPuchi({
    size : 1
});

$('#puchiTest2').createPuchi({
    size : 0
});

デフォルトは、「1(大きいプチプチ)」です。

オプション	説明	デフォルト値
size	プチプチのサイズ	1
backColor	プチプチの背景色を設定します。	残念ながらプチプチの色は白固定ですが、背景色を少しイジるとそれっぽい色のプチプチが楽しめるかもしれません。 透明度も指定すると更に雰囲気が出ます。 'rgba(192,192,192,0.7)'
cursor	プチプチの上のマウスカーソルを設定します。	'pointer'
sound	プチプチの音をさせるかさせないかの設定をすることができます。	true

まぁ、jQueryで作成されているので、ソースを見れば何をやっているか分かりますよね。(^_^;)

仕様

アプリケーション版のプチプチの仕様を引き継いでいますので、以下の様な仕様です。
実物のプチプチを忠実にエミュレーションするためにあえてそうなっています。

• プチプチを潰した時に音が出る確率は、1/6です。
• 端っこで見切れているプチプチは潰れません。(既に潰れているので)
• 絞った時に全部は潰れません。
• 絞った時に一定数のプチプチが潰れないと、絞った音がしません。

ライセンス

MIT
jQueryの世界では、一番一般的なライセンスにしておきます。

設置例

プチプチ on Web

ダウンロード

jquery.puchi.zipのダウンロード (58KB)