という方、初学者向けの解説記事です。
この記事を読んでできること
・15パズルの作り方を理解することができる
対象読者様
②コードの意味や作り方を理解したい方
③とりあえず動くコードをコピペしたい方
上記のような読者様を想定しております。
まずは③方向けに実際の挙動をご覧いただくのがよいと思います。
こちらをご覧ください。※0.5Xでご使用ください
コピペするだけで15パズルが遊べるようになっております。ご活用ください。
以下、①②読者様向けになります。
概要説明
今一度、完成品をご覧ください。
この完成品のポイントをまとめてみました。
・javascript⇒50行くらい
・関数は3つだけ( init() moveTile() swap() )
上記のように特別な知識は必要なく、変数やプロパティの基本が分かれば楽しく作ることもができます。
当記事ではjavascriptで初めて何かを作りたい方を想定している為
前半(タイルを表示させる)・後半(タイルを動かす)の2つに分けて解説をしていきます。
では前半部分、どのようにタイルを表示させるか解説していきましょう。
解説①htmlを準備しよう
まずはhtmlで次の2つを準備します。
・bodyタグの中に<table id=”table”>を入れる
基本的なところですが、よくある質問として下記を補足します。
日本語にすると
script(本文)にsrc(ソース)としてmain.jsってファイル名を読み込んでください
です。これでjavascriptが書かれたファイルを使うことができます。
実は<div>でもOKですが、今回は
td(横列の中の要素)/tr(横列)タグを使います。
15パズル、方眼紙のような形を作る場合はtableの方が便利ですので、tableタグを使用しています。
馴染みがなく、基本情報から知りたい方はこちらをご覧ください。
table/tdタグの幅を指定する方法と基本知識！
【①htmlを準備しよう】まで
解説②function init()
次はいよいよjavascriptです。
②での目標は「0-15の数字を表示させる」で、こちらが完成図と必要な処理です。
【②function init()】まで
・作ったtr/tdをクラス(tile)を追加
・tableの子要素にtrを追加///trの子要素にtdを追加
・テキストを追加しよう
必要な知識を解説していきます。
解説②-1 for文を使おう！
for文は何かを繰り返す処理を行う時、大変役立ちます。
for (let i = 0; i < 4; i++) {
let yokoretu = document.createElement("tr");
for (let j = 0; j < 4; j++) {
let itimai = document.createElement("td");
}
}必要部分を抜き出すとこのようになります。
forの中にforがあるので複雑に見えますが、青色がtr/緑色がtdです。
「trが1回処理された後、tdについて4回処理して」
という処理です。
forは内側の処理が全て終わった後に外側の処理します。覚えておきましょう。
let itimai = document.createElement("td");let ●● = document.createElement(“〇〇“)
これは「〇〇のタグを●●に代入しなさい」という命令です。つまり
「tdのタグを itimai に代入しなさい」という処理になります。
itimai は変数です。この15パズルがカードに見えたので「1枚」⇒「itimai」という変数名にしました。名前を変えても全く問題ありません。
解説②-2 クラスを追加しよう！
続いてクラスを追加しましょう。
クラス名を追加できれば、CSSで見た目を変えることができます。
itimai.className = "card";●●.className= “〇〇“;
これは「●●にクラス名、〇〇を追加しなさい」ですのでyokoretu(カードの横列)に”card”クラスを追加したことになります。
解説②-3 子要素を追加しよう！
htmlにわざわざ16個分のtr/tdを書くのは大変です。
javascript側でtableタグの子要素にtr/tdを追加をしてあげましょう。
yokoretu.appendChild(itimai);●●.appendChild(〇〇);
これは「●●の子要素に〇〇を追加しなさい」です。つまりこれで
yokoretu に itimai を追加することができます。
解説②-4 textContentを追加しよう！
さて、canvas > yokoretu > itimai の順に要素を追加しましたので
textContetntを入れてあげましょう。
textContentとは⇩の赤色の部分です。htmlで必ず見るテキスト部分
<div >私がtextContentです</div>javascript側でtableタグの子要素にtr/tdを追加をしてあげましょう。
itimai.textContent = (index === 0) ? " " : index;●●.textContent = 〇〇
これは「●●のテキストに〇〇を追加しなさい」です。つまり
itimai のテキストに index を 追加したことになります。
1点だけ補足として(index === 0) ? " " : index; とは
「index が 0 の時 ⇒ 何も書かない。index が0以外の時は index を入れる」という意味です。15パズルは何もないマスを1つ作る必要があります。
これで16個の数字を順番に並べることができました。
解説③CSSを追加しよう
ここまでで0-15までの数字を並べることに成功しました。
前半の最期です。きれいなパネルを作る為にCSSを追加しましょう。
.card {
width: 80px;
height: 80px;
font-size: 40px;
border: 2px solid;
color: #000;
text-align: center;
}基本的なプロパティばかりですので、特別迷うところはないかもしれませんが
中央寄せするための text-align:center は苦手な方が多いと思います。
間違いやすい例など解説をしておりますので、よろしければご参考ください。
【CSS】margin:auto/text-align:centerの違いを解説
また、CSSの部分が上手くいかない場合は、指定がどこかで反対になったりスペルミスの可能性もあります。こちらをご参考下さい。
まとめ
ここまでで前半終了です！
お疲れさまでした！
後半は タイルを動かす 関数の処理を実装していきます。
難しく感じる方も多いと思いますが、できるだけ分かりやすく解説できればと思います。