html

Javascriptで8パズル

前回の画像データを分割+シャッフルして表示する処理に機能を追加してパズルゲームにしてみた。

www.segmentation-fault.xyz

完成品

canvasで図形を描く

8パズル

画像データのURL:

シャッフル処理の変更

前回作ったシャッフルの処理をそのまま使うとパズルがゴール不可能なケースが発生する問題がある。この問題を回避するにはパズルのゴール可否を判定して再シャッフルする処理を追加するか、ゴール可能なシャッフル処理をするか2択になるが、前者は面倒そうだったので後者に変更することにした。

変更前
変更後

パズルのゴールから空ブロックを適当に移動させることでシャッフルしている。

ソースコード