先日の「箱入りメロン」に続いて、日曜コーディングで4マス×4マスのスライドパズルを作りました。
オーソドックスな右下16番が欠番のほか、16マスのうち欠番がランダムにもできます。
スライドパズル
「16を抜く」または「ランダム抜き」をクリックするとゲームが開始します。
手数:0000
タイムは最初の移動から計測
不具合があれば問い合わせフォームよりお知らせください。
◆◆操作説明◆◆
- 左上から1行目1,2,3,4、2行目5,6,7,8、3行目9,10,11,12、4行目13,14,15,16と順に並べばゴールです。
- パネルのうち一つが抜けています。その周りのパネルをクリックすると動きます。
- 「16を抜く」は常に16が欠番となります。「ランダム抜き」は1~16のうちランダムに欠番が決まります。
- 「ランダム抜き」の場合は、欠番の部分が空白になるように並べばゴールです。例えば3が欠番の場合は1行目の左から3番目が空白であとが順番に並べばゴールです。
- アイテムを動かして元に戻した場合も1手としてカウントされます。
HTML、JavaScript、CSSをワードプレスに埋め込む
今回は、JSファイルやCSSファイルを使わずにワードプレスに載せました。
HTMLについては、ワードプレスの投稿内の「カスタムHTML」ブロックに書き込みました。
CSSについてはカスタムCSS欄に、JavaScriptのコードについてはカスタムJavaScript欄にそれぞれ貼り付けました。
備忘としては、HTMLのclassやidには、ワードプレスで使われないようなオリジナリティのある名前を付けておいたほうがいいです。
また、CSSでは要素だけで指定すると思わぬところが影響を受けたりするのでクラスやidで要素を指定しておくほうがいいです。
「date」などありきたりなクラスを使うと、ワードプレス部分のレイアウトに影響がでることがあります。
コメント