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 用意。

A.J. Roycroft
EG No.1, vil.1965
Win

1 ♗g7 ♔b1
2 ♘f6 b4
3 ♔xb4 ♔b2
4 ♗h8! ♘c2+
5 ♔a4 ♔xc3
6 ♘e4 mate!

スポンサーサイト



study のタネ本

endgame の図を紹介する前に、解こうと思ってたら、解けなくなっているのだった。

で、持っている本を紹介してみよう。

Test Tube Chess (1972)


tesTtubeChess.jpg


Endgame Magic (1996) この本の最初の1図を紹介。AMAZON でも見れる。

s-EndgameMagic.jpg

Studies for Practical Players (2009) この本の最初の1図を紹介。AMAZON でも見れる。

s-SfPP.jpg

The Art of the Endgame (2011) Chapter 1 は 「Limit 7」である!?

s-tAotE.jpg

10年程前、円高だった時に、セールの時期の 7掛け時を狙って買い集めた、今の売られている半分位の値段で買えたような気もする。


study

R. Réti 1928, modified by H.Rinck 1935
Win

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>



R. Réti 1928, modified by H.Rinck 1935
Win

1 ♗f5+ ♔d8
2 ♖d4+ ♔e7 (or e8)
3 ♖e4+ ♔d8!
4 ♗d7! e1♕
5 ♗b5!!

駒を CSSのアニメーションで

ようやく見られるようになった。

書けるようになってから探すと、Web には いくらでも似たようなものがあるのだった。まあ、将棋とChessの両方の駒のアニメーションということで、お茶濁すことにしよう。chess の参考図は、ルークが隅に動くというもので、詰将棋ではお目にかかれないような意味付けで、驚いたモノだった。将棋の参考図は、現行ルールでは5手目から余詰ということなのだろう、しかし未来ではどうなるのだろうか? なお、CSSだけで20手までのアニメーションが可能となっている。

A. Wotawa 1960
Win

1 f8♕! ♖xf8
2 gh+ ♔f7
3 ♖h8!! ♖xh8
4 ♖h1+ ♔g8
5 h6! gh
6 ♔e7

丸田祐三 :1957-06-02: 毎日新聞夕刊
持駒
飛飛
飛歩
なし

83飛 72玉 84飛生 83歩
同角成 71玉 81飛 同玉
92馬 同玉 93歩 同玉
94金 92玉 83飛成まで15手詰
☆ 5手目83同飛成以下

毎日新聞 1956(昭和31)年

毎日新聞 第9回
mnt1956_1.jpgmnt1956_2.jpg

No.1216 1956-04-29 の図 攻方25歩 追加。
CSS改良のため不具合発生 2021-12-26

持駒 角金銀桂
持駒 角金桂
持駒 角桂
持駒 角銀桂
持駒 角銀
持駒 銀

CSS で駒を動かして見る。

HTML と CSS だけで将棋盤の表示ができるようになると、CSS にはアニメーション機能があるとのことで、使ってみる。

CSS改良のため不具合発生 2021-12-26


持駒 飛飛
持駒 飛
持駒 なし
持駒 銀
持駒 なし


当初は、途方に暮れていたが、grid の指定した位置に表示できるようになったのが大きかった。

また、アニメーションで、表示位置を動かすことを考えていたが複雑すぎた。そこで、WEB で アニメーションのサンプルをひたすら眺めていたら、とうとう思いついた。

表示位置は固定で、透過率(opacity)を操作することにより、動いたこととした。

  • ずーっと見えている駒
  • n 手目に消える駒
  • n 手目に現われる駒
  • n 手目に現われ、  m 手目に消える駒

という 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" ソースが、こんなの。

@keyframes 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%*/

}


再現時間は 20秒 で繰返し。 最初の 6秒 は初形で、あとは1秒毎に 1手。



CSS で将棋盤を表示してみる。

このところ、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>


象戲解頤 1

今は昔、「詰とうほく」という冊子を出していたとき、おかもとさんから提供してもらった資料。埋もれさせて措くわけにも行かないので紹介。表紙と裏表紙か。
smr0187_01.jpg

「古今詰将棋書総目録」の No.187 or No.189 にあたるものなのだろうか。
187 象戲解頤 赤池賢齋 清泉堂 天保 9. 8. -序 小本  2 50
189 象戲解頤 赤池賢齋 歳々堂 天保 9. 8. -序 小本  1 50

来歴などの資料も戴いたハズなのだが見つからず。添付の資料は以下の通り。
smr0187_description-1.jpgsmr0187_description-2.jpg
以下、内容の紹介。書かれている文字の解読も別資料にあるはずなのだが。
smr0187_02.jpgsmr0187_03.jpg

毎日新聞 1951(昭和26)年

毎日新聞 第2回
戦後に入る。さて、何年まで紹介していいものか。一応1971年(50年前)までを予定しているのだが。
大山康晴名義の詰将棋は数多くある。しかし、その殆どは自作では無いとする説があるのだった。

mnt1951.jpg

初出誌

ss197501.jpg捨てる前に、scan した。何も初出誌に拘ってはいないのだが、なんとなく初出誌で読むと特別な気がするのだった。小説新潮 1975年1月号。
詰将棋もそうだ、とは謂わないが。