【html】将棋の作り方解説！変数定義②盤本体/駒台の大きさ/色/手番編【javascript　将棋】

html・JavaScript だけで将棋を作りたい
という方向け、初学者向けの解説記事となります。

当記事は解説パート②です。

【html】将棋の作り方解説！コピペだけで簡単に動く！【javascript】

解説箇所

当記事では

【5*5将棋　サンプル】
※0.5Xでご使用ください

変数定義

当コードには、必要な変数がいくつかあります。
その中で今回は、以下を表示させる準備をしています。

順に見ていきましょう。

・将棋盤本体

今回、将棋盤を表示するのにJavascriptのcanvasを使用します。
キャンバスの名前通り、自分で指定した大きさ/色で描画(ブラウザにお絵描き)ができる
機能です。

関数について解説する際にも触れますが、わかりやすいサイトを見つけましたので
よろしければご参考ください。

canvas要素とは？HTMLとJavaScriptを使って図形を描いてみよう！

[Komadai][ctx]

var Komadai;
var ctx;

見た目の通り、何かを特別に定義しているわけではありません。これは
canvas機能を使う為、分かりやすい名前の変数を定義しただけ

となります。つまり、名前は何でもいいわけです。
[Syogiban]とか[Ban]とか名前は自由に決めることができます。そのため

と理解いただくだけで大丈夫です。

・色

また、初学者の方向けに補足を1つします。

var fontcolor = ["black", "maroon"];

上記のように関数の中に色の名前を入れています。
使いたい色を場面に応じて抜き出すことで駒やマス目の色を変えることができます。

var fontcolor = ["black", "maroon"];
////////////////////////////////////////////////////
fontcolor[0] = ["black"];
fontcolor[1] = ["maroon"];
////////////////////////////////////////////////////
ctx.fillStyle = fontcolor[0];//文字を"黒"色にしなさい

この「何番目の色で描画(お絵描き)してね」という処理が今後たくさんでてきますので
今一度ご認識いただければ今後の理解がわかりやすくなると思います。

[fontcolor][boxcolor][fillcolor]

var fontcolor = ["black", "maroon"];
var boxcolor = ["LimeGreen", "gray", "blue", "red"];
var fillcolor = ["LimeGreen", "khaki", "white", "LightPink"];

font(フォント)は文字、fill(フィル)は塗りつぶしという意味。以下のようになります。

var psize = 40;
var board = [];

var bw = 11;
var bh = 11;
var ofsx = 3;
var ofsy = 3;

var turn = 0;
var startx = -1;
var starty = -1;
var playtbl = ["先手", "後手"];

まとめ

ここまで、大変お疲れさまでした。

今回は変数定義の後半でしたが、いかがだったでしょうか。

煩雑な説明で伝わりづらい箇所も多々あったかと思います。
今後、できるだけ分かりやすく解説できるよう精進します。

前回　将棋の作り方解説！変数定義①[駒の動き/初期配置]編
次回

皆様のよいコーデイングライフと将棋ライフを祈っております。