2021/12/31
Test Tube Chess の jacket の問題
CSS の Test も兼ねての endgame の紹介をやっている。先日の Test Tube Chess の Jacket の問題、袖の解説文
after Black's third move from 333
とあるので、元の図を揚げてみる。
A.J. Roycroft
EG No.1, vil.1965
♗
♘
♔
♖
♟
♟
♝
♞
♚
Win
前の盤面表示では、盤を表示しながら、駒も表示というシンプルな構成だったが、使い回しを考えると、盤表示と駒表示を別けているのがイイと思われた。 html のソースは以下の通り。
<div class="Chess盤">
<span></span><div></div><span></span><div></div><span></span><div></div><span></span><div></div>
<div></div><span></span><div></div><span></span><div></div><span></span><div></div><span></span>
<span></span><div></div><span></span><div></div><span></span><div></div><span></span><div></div>
<div></div><span></span><div></div><span></span><div></div><span></span><div></div><span></span>
<span></span><div></div><span></span><div></div><span></span><div></div><span></span><div></div>
<div></div><span></span><div></div><span></span><div></div><span></span><div></div><span></span>
<span></span><div></div><span></span><div></div><span></span><div></div><span></span><div></div>
<div></div><span></span><div></div><span></span><div></div><span></span><div></div><span></span>
<div class="駒f8">♗</div><div class="駒h7">♘</div>
<div class="駒c5">♔</div><div class="駒c3">♖</div>
<div class="駒b5">♟</div><div class="駒c4">♟</div>
<div class="駒d3">♝</div><div class="駒e3">♞</div>
<div class="駒b2">♚</div>
</div>
空白の盤を書き、座標に拠って駒の位置を指定した。 CSS では 駒位置の class を Chess盤 では64、将棋盤では81 用意。
EG No.1, vil.1965
♟
♝
♗
♗
♚
♚
♘
♘
♟
♟
♔
♔
♚
♗
♞
♞
♔
♚
♖
♘
1 ♗g7 ♔b1
2 ♘f6 b4
3 ♔xb4 ♔b2
4 ♗h8! ♘c2+
5 ♔a4 ♔xc3
6 ♘e4 mate!
