silver tumekster

2021/12/31

Test Tube Chess の　jacket の問題

Win

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

2021/12/31

毎日新聞 1960(昭和35)年 続

2021/12/30

Réti's Study Is 100 Years Old!

2021/12/30

毎日新聞 1960(昭和35)年

2021/12/29

study のタネ本

2021/12/29

毎日新聞 1959(昭和34)年続

2021/12/28

毎日新聞 1959(昭和34)年

2021/12/27

study

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/27

毎日新聞 1958(昭和33)年 続

2021/12/26

毎日新聞 1958(昭和33)年

2021/12/26

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

2021/12/25

毎日新聞 1957(昭和32)年　続

2021/12/24

毎日新聞 1957(昭和32)年

2021/12/23

毎日新聞 1956(昭和31)年 続

2021/12/22

毎日新聞 1956(昭和31)年

2021/12/21

象戲解頤 3

2021/12/21

毎日新聞 1955(昭和30)年 続

2021/12/20

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

    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/20

毎日新聞 1955(昭和30)年

2021/12/19

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 "ＭＳ 明朝"; 
}

.後手{
  transform: rotate(0.5turn);
}

将棋盤として、40pxの 9×9 のグリッドを用意し、81個の div を並べる。gapを 1px としているので、枡目の線を引かなくてもgapが升目線となる。

40px の枡を用意し、81個並べないと、将棋盤が出来上がらないのが難点か。画像を使えばシンプルにできそうだが。先手の場合は中身をそのまま書けばいいが、後手の場合は回転させている。

駒がない場合　<div class="枡"></div>

先手駒の場合　<div class="枡">銀</div>

2021/12/19

毎日新聞 1954(昭和29)年 続

2021/12/18

毎日新聞 1954(昭和29)年

2021/12/17

象戲解頤 2

2021/12/17

毎日新聞 1953(昭和28)年

2021/12/16

象戲解頤 1

以下、内容の紹介。書かれている文字の解読も別資料にあるはずなのだが。

2021/12/16

毎日新聞 1952(昭和27)年

2021/12/15

毎日新聞 1951(昭和26)年

2021/12/14

初出誌

2021/12/14

毎日新聞 1944(昭和19)年

2021/12/13

東京日日新聞 1940(昭和15)年 続