html・JavaScript だけで将棋を作りたい
という方向け、初学者向けの解説記事となります。
当記事は解説パート②です。
・コードだけコピぺしたい
【html】将棋の作り方解説!コピペだけで簡単に動く!【javascript】
解説箇所
当記事では
・下記コードの34~47行目
下記に完成図を載せておりますので、お手元のエディタにコピペして活用いただきれば幸いです。
【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(フィル)は塗りつぶしという意味。以下のようになります。
boxcolor → マス目の枠の色
fillcolor → マス目を塗りつぶす色
・盤含めた全体の大きさ
上述した「将棋盤」以外に以下のようなものが必要です。
・画面の余白
・駒の大きさ
[psize][board]
var psize = 40;
var board = [];
psizeは p=piece(ピース:英語で「駒」という意味)の略です。
今回作成する駒は文字だけで駒を表現しています。
その為、文字の大きさ=駒のサイズとなります。
boardは後で空の配列を入れるための箱です。
後で配列を代入していくので今時点では何も定義せずOKです。
[bw][by][ofsx][ofsy]
var bw = 11;
var bh = 11;
var ofsx = 3;
var ofsy = 3;
bwのbは「Ban(盤)」です。他、それぞれ言葉を簡単にしますと
h = height
ofs = 余白
x/h = 横軸か縦軸
![](https://paj117117.com/wp-content/uploads/2023/02/将棋② 大きさ解説-300x247.jpg)
今時点では、上記の画像のようなイメージをしていただければ問題ありません。
・手番
最期に手番、「今は先手/後手だよ」を示す変数です。
こちらは大変シンプルですのでこのままご紹介いたします。
var turn = 0;
var startx = -1;
var starty = -1;
var playtbl = ["先手", "後手"];
playtbl は画面に「今は先手/後手のターンですよ」を表示させる為の文字列です。
また、他の変数はそれぞれの関数の中で
その判定をする為に、0という数字を定義しているということですね。
まとめ
ここまで、大変お疲れさまでした。
今回は変数定義の後半でしたが、いかがだったでしょうか。
煩雑な説明で伝わりづらい箇所も多々あったかと思います。
今後、できるだけ分かりやすく解説できるよう精進します。
前回 将棋の作り方解説!変数定義①[駒の動き/初期配置]編
次回
皆様のよいコーデイングライフと将棋ライフを祈っております。