ravenz weblog: [web関連] とりパズル作ってみた。 [暇つぶし]

2014年4月9日水曜日

[web関連] とりパズル作ってみた。 [暇つぶし]

以前、我がのウェブサイトでも作ったことがあるのですが、

改めてまた作ってみました。

とりパズル

暇つぶしにどうぞ〜。

あ、念のため簡単なtipsを。(jQuery使用)

1

まず、jqPuzzleのサイトで[ jqPuzzle.zip ]ファイルをダウンロードします。

2

そして、解凍したzipファイルの以下二つをサーバーにアップロードする。
　　　　[ jquery.jqpuzzle.css ]
　　　　[ jquery.jqpuzzle.min.js ]
　　　　(3つの[ js ]ファイルが入っていましたが、私は[ min ]を使用。)

3

<head></head>内に以下の記述

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>
<script src="jquery.jqpuzzle.js" type="text/javascript"></script> 
<link href="jquery.jqpuzzle.css" rel="stylesheet" type="text/css"></link>

※何気にキモなのが、1行目のjQueryのバージョン。

これが最新だったり、1.9...代でも駄目でした。1.4.3付近なら大丈夫みたいです。

4

あとは、パズルにしたい対象の<img>にclass="jqPuzzle"を付与するだけ。

<img src="画像ファイルの指定" class="jqPuzzle" />

そして以下オプション
記述方法は後ほど。

言語 : en fr de pt : デフォルトはen (記述が無ければデフォルトが反映)

行数 : r3 〜 r9 (3行から9行まで設定できる)

列数 : c3 〜 c9

穴の場所 : h1〜 : デフォルトは右下

シャッフルの回数 : s1〜 : デフォルトでは3回=s3
追加オプション
- S: 最初からシャッフルする。
- N: 最初に数字を隠す。
- A:「Shuffle」ボタンを隠す。
- B:「Original」ボタンを隠す。
- C:「Numbers」ボタンを隠す。
- D:「moves」表示を隠す。
- E:「seconds」表示を隠す。

===記述例===

<img src="画像ファイルの指定" class="jqPuzzle jqp-de-r5-c5" />

ドイツ語で、5行、5列

<img src="画像ファイルの指定" class="jqPuzzle jqp-fr-r3-c3-s2-NDE" />

フランス語で、3行、3列、シャッフルは2回、最初に数字を隠す、moves表示隠す、seconds表示隠す。

ちなみに上のとりパズルでは下記のようなオプション設定にしました。

<img src="画像ファイルの指定" class="jqPuzzle jqp-r3-c3-s2-SNBCDE">

次は何試そっかな〜。

jQuery関連で試してみた記事をまとめました。
Tips付きのものだけ列挙してます。
(JavaScriptだけのものも含む)

2014年4月9日水曜日

[web関連] とりパズル作ってみた。 [暇つぶし]

とりパズル

1

2

3

4

0 件のコメント:

コメントを投稿