「勉強の為にhtmlとJavaScriptで将棋を作りたい」
という方向け、初学者向けの解説記事となります。
※当記事は解説パート①にあたります。
まだの方はこちらをどうぞ
【html】将棋の作り方解説！コピペだけで簡単に動く！【javascript】
前置き
・コードの全体像をできるだけ簡潔にご説明いたします。
※0.5Xでご使用ください
【5*5将棋 サンプル】
当コードの全体像
私も含めプログラミングの初学者はコードが長いだけでストレスがかかり
モチベーションに大きく影響してしまうものかと思います。
そこで、まずはコード全体をできるだけ簡単に分解してみようと思います。全て含めると300行ありますが、行数ごとに分解してみますと
・4～32行
変数定義①_駒の動き/初期配置・34～47行
変数定義②_盤本体・駒台の大きさ/色/手番
・52～87行
init 駒と盤の初期配置の描画・90～103行
redraw 再描画・106～109行
isinside 盤上の中かどうかの判定・112～144行
drawpiece マス目/駒の名前の描画
・149～154行
「駒に触った時」のイベント登録・157～162行
touchstart スマホ用イベント登録・164～166行
mousedown PC用イベント登録・169～181行
touchpiece 駒をタッチした時の処理全般
・184～252行
movestart 動けるマスの表示
・255～298行
moveend 指定したマスに駒を動す
となります。
一番長い関数「movestart」でも60行くらいしかありません。
つまり、60行近くの関数や処理を一度でも触れてみた方であれば、
解説込みで理解できる可能性が極めて高いといえます。
全体像として理解
大まかにいえば「変数を定義」「9つの関数を実行する」
ことで将棋の挙動を実現しています。
変数定義については別記事に行うとして
関数は以下のような順番で動いています。
「init」⇒「redraw」⇒「isinside」⇒「drawpiece」
「touchpiece」⇒「isinside」⇒「movestart」⇒「moveend」⇒「redraw」
144行までで初期配置
146行以降で駒を触って動かした結果を再描画
しています。
そしてこの中には将棋の醍醐味である駒を動かす処理が入っています。
駒の「持ち駒使う/盤上の駒使う」は「movestart」
「成るor成らない/移動先に駒が存在するorしない」は「moveend」
です。
こうやって分けて考えると
実際に駒を動かす処理は100行足らずです。
ここで理解いただきたいのは
・そして駒を触った時の処理を準備する
・実際に駒を動かす処理は長くない
・それぞれの関数もそんなに長くない
ということです。
長いコードが苦手、不安な方へ
「こんなに長いコードが理解できるのだろうか…」
ボリュームが大きく、不安になる気持ちは大変よくわかります。
説教くさくなってしまいますが、3行だけ自分語りをさせてください。
私は半年も勉強した後にも関わらず、たった1つのLP(ランディングページ)を作るのに1か月かかっていました。当然、誰よりも出来が悪かったです。
しかし、人に解説してもらいながら1回でも完成してしまえば自信がつき、理解も大変深まるものであります。
ですので、解説である私が頑張ればどんな不安な方でも当コードを理解できるものと私は信じています！
できるだけ初学者目線で解説しようと思いますので、不安な方も一緒に頑張りましょう！
まとめ
今回、具体的なコードの説明の前段階でした。
それぞれに分けて考えると長いコードも理解できる気がしてきいますよね。
次回からは実際のコードを一行ずつ解説していこうと思います。
できるだけ分かりやすく解説できるよう精進します。
皆様のよいコーデイングライフと将棋ライフを祈っております。