HTML で碁盤を表現する (2)
table タグで碁盤を表現するサンプルです。
(注意:2022年) ES2015 に更新したので IE では動作しません。
table タグで碁盤を表現する (2023/03)
table タグは HTML で表を表現するためのタグで、 単純なサンプルでは下の絵のようになります。
TestJS_edit_html01.htmltableタグ
table タグは CSS と呼ばれる HTML の装飾設定を調整することで、 たとえば下の絵のようにタイルを並べた感じの表示もできます。
table の各セルに碁盤の部品の画像を置くと碁盤を表示できます。TestHTML_goban_table01.html
もうちょっと工夫して、 石を置いたときに番号やマークなどの文字がつけられるようにします。
TestHTML_goban_table02.html枠線の画像を td 内の img タグにせず td の背景画像に設定し、 枠線以外の部分は透明にして背景が見えるようにしてあります。 背後の table には木目調の背景画像を置きます。
td タグ内には数字などの文字列を置き、 石の画像と重なって見えるように調整します。
CSS background
SVG 画像を使う (2023/03)
石や枠線の画像を png から svg に置き換えたサンプル。HTML: svg タグ
- TestSVG_goban_table01.html
img タグで SVG 画像を並べる。 - TestSVG_goban_table02.html
CSS background-image: url(SVGファイル名) で SVG 画像を並べる。
JavaScript で碁盤を作成する
上のサンプルの table を JavaScript で作成します。
任意のサイズの碁盤が表示できるようにします。
JavaScript で碁盤のテーブルを作成する。
◎クラス + BoardImage 盤の画像関連の処理 (囲碁、将棋、チェスなどの共通の親クラス) + GoImage 囲碁用の処理 + Piece 駒(石) (囲碁、将棋、チェスなどの共通の親クラス) + GoPiece 囲碁用の石JavaScript: ボードゲームのクラスを作る (1)
TestJS_goban_table_create02.html
表示テスト用に石を置く処理が少し入っています。 マウスでクリックするとそこに石を置きます。 まだ、石を取ったり着手禁止をチェックしたりする処理は入っていません。
見た目は大分碁盤らしくなった。
碁盤のモデルを作成する
上の話までのサンプルは見た目 (ビュー) と操作 (コントローラ) の話で、 碁盤の盤面のデータを処理する話 (モデル) はまったく出てきていません。 モデルとビュー・コントローラは独立した部品として分けて考えます。
◎クラス + Matrix 2次元配列を扱うクラス。 + BoardModel 駒の配置のモデル (囲碁、将棋、チェスなどの共通の親クラス) + GoModel 囲碁用のモデルTestJS_goban_table05.html
SGF ノードのテスト。SGF テキストを読んでモデルにセットして表示する。 TestJS_goban_table06.html
碁盤のデータモデルのテスト。石を取る処理。
五目並べ、オセロの盤
上の碁盤の話と同じようにして五目並べやオセロの盤も作れます。
HTML: オセロと五目並べ