2021/12/31
Test Tube Chess の jacket の問題
CSS の Test も兼ねての endgame の紹介をやっている。Win
EG No.1, vil.1965
1 ♗g7 ♔b1
2 ♘f6 b4
3 ♔xb4 ♔b2
4 ♗h8! ♘c2+
5 ♔a4 ♔xc3
6 ♘e4 mate!
2021/12/31
Win
1 ♗g7 ♔b1
2 ♘f6 b4
3 ♔xb4 ♔b2
4 ♗h8! ♘c2+
5 ♔a4 ♔xc3
6 ♘e4 mate!
2021/12/30
2021/12/29
2021/12/27
CSS のテストも兼ねて、study (end game)の紹介。 problem よりも考えやすいし、必ずしも王手を掛けなくて良いのだが、詰将棋に近いような気もするのだった。
Chess盤のところの html のソースは以下の通り。div と span が交錯しているが、div だけでも塗り分けは出来るようだが、まだ、書き方を理解出来ていない。そのうち改良予定。
<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>
1 ♗f5+ ♔d8
2 ♖d4+ ♔e7 (or e8)
3 ♖e4+ ♔d8!
4 ♗d7! e1♕
5 ♗b5!!
2021/12/26
1 f8♕! ♖xf8
2 gh+ ♔f7
3 ♖h8!! ♖xh8
4 ♖h1+ ♔g8
5 h6! gh
6 ♔e7
83飛 72玉 84飛生 83歩
同角成 71玉 81飛 同玉
92馬 同玉 93歩 同玉
94金 92玉 83飛成まで15手詰
☆ 5手目83同飛成以下
2021/12/22
2021/12/20
HTML と CSS だけで将棋盤の表示ができるようになると、CSS にはアニメーション機能があるとのことで、使ってみる。
CSS改良のため不具合発生 2021-12-26
当初は、途方に暮れていたが、grid の指定した位置に表示できるようになったのが大きかった。
また、アニメーションで、表示位置を動かすことを考えていたが複雑すぎた。そこで、WEB で アニメーションのサンプルをひたすら眺めていたら、とうとう思いついた。
表示位置は固定で、透過率(opacity)を操作することにより、動いたこととした。
という class を定義すれば良かった。とりあえず、10手までの class を作った。
使い方は、、
「持駒」の表示のhtml のソースが、こんなの。
<div class="駒台">
<div class="持駒 fadeOut_1">持駒 飛飛</div>
<div class="持駒 fade_1_3">持駒 飛</div>
<div class="持駒 fade_3_5">持駒 なし</div>
<div class="持駒 fade_5_7">持駒 銀</div>
<div class="持駒 fadeIn_7">持駒 なし</div>
</div>
css の fade_1_3" ソースが、こんなの。
0% {opacity: 0} /*不透明度0%*/
30% {opacity: 0} /*1手目開始*/
33% {opacity: 1} /*1手目終了不透明度100%*/
40% {opacity: 1} /*3手目開始*/
43% {opacity: 0} /*3手目終了*/
100% {opacity: 0} /*不透明度0%*/
}
2021/12/19
このところ、CSS にハマって抜けられないが、ようやく一歩を踏み出せた。
SVG を使っての実装 は je t'aime で済んでいたのだが、 HTML と CSS だけで将棋盤の表示ができるようになってきた。まあ、 div の class を定義しただけなのだが
CSS改良のため不具合発生 2021-12-26
持駒 銀
このブログでは 、html のソースを表示する方法がわからない.
CSSは pre で表示できそうだ。
.将棋盤{ position: relative; width: 368px; height: 368px; /* 40*9 + 4*2 */ background-color: darkred; border: 4px solid darkred; display: grid; gap: 1px 1px; grid-template-columns: repeat(9, 40px); grid-template-rows: repeat(9, 40px); } .枡{ width: 40px; height: 40px; background-color: #ffffc0; font: bold 40px "MS 明朝"; } .後手{ transform: rotate(0.5turn); }
将棋盤として、40pxの 9×9 のグリッドを用意し、81個の div を並べる。gapを 1px としているので、枡目の線を引かなくてもgapが升目線となる。
40px の枡を用意し、81個並べないと、将棋盤が出来上がらないのが難点か。画像を使えばシンプルにできそうだが。先手の場合は中身をそのまま書けばいいが、後手の場合は回転させている。
駒がない場合 <div class="枡"></div>
先手駒の場合 <div class="枡">銀</div>
後手駒の場合<div class="枡 後手">銀</div>
2021/12/16
2021/12/15
2021/12/14