PC、主要スマホ／タブレットにてプラグインフリーで動作可能なパズルゲーム。

下記jsdo.itのサンプルコードは単純なゲームのみですが

• 難易度変更オプション
• 画像変更オプション（File APIで可能？）
• ゲームクリア後に特典を加える

など、機能追加・工夫する事でよりゲーム性が増すでしょう。

当社オフィシャルサイトTOPのパズルゲームでは
ティザー効果を演出しているスライドギャラリーを、ゲームクリアで全て見える状態にする、といった連携を実装しています。

ユニークなアイデア、よりスマートな実装があれば是非forkしてください！

canvasでパズルゲーム - jsdo.it - share JavaScript, HTML5 and CSS

ポイント（非力なモバイル端末対策）

モバイル（タッチ）端末ではclickイベントではなくtouchイベントを使う

clickでも動作しますが、パフォーマンスが非常に悪くなります（タップから1～2秒後に反応）

ピースの移動アニメーションはrequestAnimationFrame()を使う

従来のsetTimeout()では滑らかな動きが実現できないため、requestAnimationFrame()を利用

今後canvasAPIに期待すること

アニメーションメソッドの追加

現状アニメーションを実現するには、右に5px移動→消す（canvasを塗り潰す）→移動→消すといったことを
繰り返す事でアニメーションを実現しています。そのため処理が重い。

3D対応

CSS3の3D機能は既にWebkit系のブラウザで先行実装されていますが、
同様にcanvasも3Dに対応予定とのこと。