どうも!LSSです!!
だいぶ前ですが、
ブラウザ上で遊べる15パズルを作っていました。
この15パズル、実は昔ブラウザゲームサイトをやってた頃にも作ってて、その頃にはこの「1~15の数字」で遊ぶものの他に、用意した画像を16分割してスライドさせて完成する、というのもあったんですね。
(その場合、正解位置が分かりづらくなるので難易度は上がります。)
その時は、自分で用意した画像を予め16分割したものをコマにする…という事をやっていたのですが、
のようにCSSで位置調整する事で、予め画像を切り分けなくても画像をパーツ分けする事はできます^^
また、
でやったように「ユーザーが手元のファイルを選択して使用できる」という事もできそうですし、
のエディット機能で使ったような「画像URLをURLの?以降につけて、それをスクリプトから読み込む」事で、他の人に指定画像で遊べるURLを生成して渡す、なんてことも。
(そうなると完全にユーザー任せなので、例えば版権画像だったり、ムフフ画像だったりになるかもw)
よりゴージャスにするなら、
効果音やBGMをつけるのも楽しそうです^^
それを言ったら、コマの移動を
transition で滑らかにスライドさせるほうが先かな。
…みたいな事を考えてたりする今日この頃です^^
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^