HTML5 の canvas による将棋盤

作成日 : 2020-04-12
最終更新日 :

文字の描画とスケーリングの応用

HTML5 の canvas で、文字の描画とスケーリングの応用として、将棋盤を描くことを考えた。 図例として、伊藤看寿による詰将棋の名作「将棋図巧」の第百番「寿」の初期盤面を選んだ。 テキストだけで描くとたとえば右のようになる。これは BOD 形式といわれていて、 主な特徴として次の決まりがある。

  1. 自分の駒は左に文字をつけず、相手の駒は左に半角vを表示する。駒がないマスは・を記す。
  2. 成銀、成桂、成香はそれぞれ、全、圭、禾という省略形で表す。

これは普通のアスキーテキストで記載できるという長所はあるが、 相手方の駒も同じ向きのため、区別がつきにくいという短所がある。 また、成銀、成桂、成香が省略形のため、どの成駒の判断がつきにくい。 これらの短所を解消するため、普通行なわれているのは駒を画像形式で表現することである。 画像形式にすれば問題はないと思われるが、もう一つはアスキー文字形式のまま表現する方法である。

大きく分けると、次の３種類があるだろう。

  1. CSS を使う
  2. SVG を使う
  3. HTML5 の canvas を使う

いろいろな理由でCSS や SVG と使うのがいいかと思う。 SVG を使った将棋盤は過去に作ったこともあり、 私がひねくれものであることもあり、canvas を使うことにした。その後、 CSS の回転を習得するために、 文字の回転とその応用：将棋盤も作った。

文字の描画とスケーリングの応用

駒を表現するときに、次の４種類の盤面を表す配列を考えた。

  1. 自分の駒：suba
  2. 相手の駒：supra
  3. 自分の駒（成の字を入れる）：suba_prm
  4. 相手の駒（成の字を入れる）：supra_prm

ここで suba とはエスペラントで「下の」という形容詞、supra はエスペラントで「上の」という形容詞である。 またら、prm はやはりエスぺラントで「成りの」という意味の promiciita の省略形のつもりだ。 駒の五角形の底辺が下にあるのがたいていは自分のもの、上にあるのが相手のもの、ということにした。 盤面を読み取らせたらこうなってほしい： 

	supra = ["91香", "51歩", "11龍", ……];
	suba = ["52歩", "42金", …];
	supra_prm = ["37銀"];
	suba_prm = ["98桂"];

なお、上記配列に入れるときに、全、圭、禾はそれぞれ銀、桂、香に変換しておく。

sfen 形式

今までは BOD 形式で盤面を表してきたが、 他にもsfen 形式というものがある。 こちらは 1 行で表示できる利点がある。
例１：初期盤面の例（平手）
lnsgkgsnl/1r5b1/ppppppppp/9/9/9/PPPPPPPPP/1B5R1/LNSGKGSNL b - 1
例２：伊藤看寿「将棋図巧」第百番「寿」の初期盤面（詰将棋）
g3p3+r/3lPG3/1s4ppp/1l1B4P/L2b1kPl1/3+p3+R+p/3+p2+s1S/+NP+p1gS3/1g+p2P3 b PPPPnnn 1

参考

https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Canvas_tutorial が役に立つ。