ホーム > HTMLサンプル

2017/12/01-2018/07/06

HTML,将棋とチェスのボード

将棋とチェスのボードの HTML の素材サンプルなど。
HTMLと囲碁
目次
  1. アプリケーション (07/06)
  2. 盤を table で表示
  3. データファイル SGF (4/29)
  4. 駒の定義、データモデル (04/29)
  5. GUI部品などのサンプル
  6. GUI部品:SGFのツリー表示 (06/09)
  7. その他

アプリケーション (07/06)

TestHTML_SCboard02.html
Chromeで動作チェックしています。Firefoxも動くと思う。
古いブラウザでは動作しません。
IE11では動作が変かも。

説明と注意事項
scboard.zip (79kB)
ネットやこのWebがなくてもローカルで動かせます。

9マス将棋のサンプル

下の SGF ファイルをダウンロードして、アプリケーションのファイル選択で読み込んでください。
sample_shogi9masu_1.sgf
関連:SGFファイルの先頭の方にある SZ[数字] の値で盤の大きさを変えられます (1から9まで)。

盤を table で表示

table サンプル
HTML で碁盤を表現

TestHTML_table_shogi01.html
将棋の盤面を表示した例。
TestHTML_table_chess01.html
チェスの盤面を表示した例。駒は Unicode の文字を使用。
TestHTML_table_chess02.html
矢印などの説明を入れた図の例。 Unicode文字で間に合わせだけど、この程度の表示は画像を用意しなくてもできる。

データファイル SGF (4/29)

SGF (Smart Game Format) を流用してみる。 SGFというのはツリー構造が扱えるテキストデータで、囲碁の棋譜のデータファイルでもよく使われます。

テストサンプル

囲碁用に作ったソースを手直ししています。
囲碁,SGFデータの処理

駒の定義、データモデル (04/29)

ここでは GUI や操作系はまったく関係ないデータ定義の話です。
WebなどのUIの話とゲーム自体のモデルは分離して考え、 ごちゃまぜにしないようにします。
コンソールやテキストデータ通信で使う程度の範囲の話。

テストサンプル

GUI部品などのサンプル

TestHTML_input_radio02.html
input タグ、ラジオボタンのサンプル。将棋の駒を選択する。 JavaScript を使用せず、CSSのみで処理した例。
TestHTML_input_radio03js.html
JavaScriptでinput, lable 要素を生成。
inputタグ

TestHTML_SCSelectBox03.html
駒を選択して盤に並べるサンプル。

GUI部品:SGFのツリー表示 (06/09)

SGFツリービューのサンプル

TestHTML_TreeView1.html
TreeView1.js のテスト。
表示とツリーのブラウズのみ。ツリー編集や SGF はなし。
TestHTML_SGFTreeView_memo02.html
SGFツリービューのテスト。
ノードNとコメントC だけを使ったテキストメモ帳にもなります。

その他

将棋の表示例。
チェスの表示例。将棋とチェスは似た処理も多いので共通化しやすい。
目次
gorogoronyan@gmail.com
inserted by FC2 system