gorogoronyan FC2

HTML で碁盤を表現する (2)

table タグで碁盤を表現するサンプルです。

(注意:2022年) ES2015 に更新したので IE では動作しません。

table タグで碁盤を表現する (2023/03)

table タグは HTML で表を表現するためのタグで、 単純なサンプルでは下の絵のようになります。

TestJS_edit_html01.html
tableタグ

table タグは CSS と呼ばれる HTML の装飾設定を調整することで、 たとえば下の絵のようにタイルを並べた感じの表示もできます。

TestHTML_table_css02.html
テーブルのセル(tdタグ)にマウスカーソルがくると色を変える。
TestJS_table_td_click02.html
テーブルのセルをクリックすると、そのセルを青色にする。
JavaScript イベント処理 (1)
tableタグによる碁盤,1
tableタグによる碁盤,1
table の各セルに碁盤の部品の画像を置くと碁盤を表示できます。
TestHTML_goban_table01.html

もうちょっと工夫して、 石を置いたときに番号やマークなどの文字がつけられるようにします。

tableタグによる碁盤,2
tableタグによる碁盤,2
TestHTML_goban_table02.html
枠線の画像を td 内の img タグにせず td の背景画像に設定し、 枠線以外の部分は透明にして背景が見えるようにしてあります。 背後の table には木目調の背景画像を置きます。
td タグ内には数字などの文字列を置き、 石の画像と重なって見えるように調整します。
CSS background

SVG 画像を使う (2023/03)

石や枠線の画像を png から svg に置き換えたサンプル。
HTML: svg タグ

JavaScript で碁盤を作成する

上のサンプルの table を JavaScript で作成します。 任意のサイズの碁盤が表示できるようにします。

TestJS_goban_table_create01.html
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: オセロと五目並べ

関連

inserted by FC2 system