javascriptライブラリ「mootools」でパズルを作成する

このエントリーをはてなブックマークに追加

Slide Puzzle in JavaScript (mootools)では簡単に画像からパズルを作成するjavascriptを公開しています。
mooPuzzle

使用方法
Slide Puzzle in JavaScript (mootools)から、puzzle.js、puzzle.cssをダウンロードします。
<link rel="stylesheet" href="http://yourdomain/puzzle.css" media="all" type="text/css">
<script src="http://yourdomain/mootools.js" type="text/javascript"></script>
<script src="http://yourdomain/puzzle.js" type="text/javascript"></script>

あとは、画像とパズルのナビゲーションを以下のように記述すれば完成です。
<div id="puzzle"><img src="画像パス"></div>
<a href="#shuffle" onclick="return Puzzle.make(3)">開始</a> |
<a href="#shuffle" onclick="return Puzzle.shuffle()">シャッフル</a> |
<a href="#shuffle" onclick="return Puzzle.fix()">答え</a>

javascriptライブラリ「mootools」でパズルを作成するサンプル

sponsors

コメントする

記事作成:
記事URL:

TOP > > > javascriptライブラリ「mootools」でパズルを作成する