15パズル
2016-09-18(日)
全体公開
ミニゲームとして15パズル紹介してもらいました。
ハルsのご協力のおかげで、成績登録も可能になりました。
さて、昨日の日記で美しくないとか言っていたプログラムですが、
今日の日記では簡単なコーディングとプログラム解説をします。
デザイン部分は基本的にCSSで記述。
この関係で閲覧環境によってはバグがあるかもしれません。
この辺の修正については、対応してないブラウザの方が極めて少数であるからパス。
大丈夫だとは思いますが、widthで指定した幅がcontentの幅で互換が取れてるはず。
昔の記述だと標準か互換かモードの関係で、widhtにborderを含むか含まないかが変わってた気がする。
ピクセル単位で端を合わせているので、これがずれてると隙間とかはみ出しとか起きます。
ページを読み込むと同時にJavaScriptの関数が起動します。
まず、数字パネル1から16を生成。
そして16番のパネルを上下左右ランダムに移動させます。(300回繰り返し)
これで適当な初期配置の完成です。
(繰り返し回数100だと不十分だったので、思い切って300回)
数字パネルをクリックするとパネルを入れ替える関数が起動します。
この時、上下左右に16番のパネルがあるかどうかを調べ、あれば入れ替えです。
最後に変更後のゲーム板の色を変更します。
この時16番のパネルの文字色が白になり、空白のパネル(に見えるよう)になります。
何回かプレーして通常プレーで問題が出ることはないと思います。
何かあればミニメでお知らせください。