jQueryでスライドパズルを作ってみた
OVERVIEW
好きな画像から自動で「スライドパズル」を生成するアプリを発案し、実装方法を解説した。アップデートverでは、スライダーバーで「重み」を設定、視覚的に画像に「錆び」の表現を与え、スライドガタツキを伴う体験をユーザーに提供する工夫をした。
ver.1 好きな画像を読み込むと自動で「スライドパズル」が生成されるアプリ
基本的なパズルの選択・移動方法について、個人的に「どのような考え方で、どのように作り進めていったか」をまとめた。
アップロードした画像をスライドパズルとして生成し、マス目の数もスライダーで設定できるようにもした。
▼解説記事はこちら
▼実際にここから好きな画像をアップロードしてパズルにして遊ぶことができる
ver.2 スライドパズルを錆びさせる新機能を追加してみた
スライダーバーで「重み」を設定し、重い設定にするとブロックの動きが鈍くなるだけでなく、視覚的にも「錆び」の表現が加わり、動きも錆びついたようなガタツキを伴うようにしてみた。
▼解説記事はこちら
▼実際に錆びついたパズル体験はこちらから