このサイトで囲碁棋譜を表示する、JavaScriptプログラムを紹介する。
The program to show Igo record is explained.

下記４つのimageファイルを作る。

1. 碁盤のimage (ここでは xy003.jpg を使う。)
2. 黒石のimage (ここでは blackstone.png を使う。)
3. 白石のimage (ここでは whitestone.png を使う。)
4. 打った石の周囲に付ける、緑色の枠 (ここでは greenMark.png を使う。)

下記HTMLを作り、碁盤と棋譜を進めるボタンを作る。
HTMLを表示する

下記JavaScriptを作り始める。
JavaScriptを表示する

1. var kihutext1 = "17-4x16-16x4-3x3-16x3-6x15-4x15-3x16-4x16-3x17-5x14-4 ,が棋譜だ。
2. 一手は、例えば(17-4) で表し、１７列目の４行目に石を置いたということだ。
3. 手と手の間は、x で区切った。
4. ２００手以上になると、一行では収まらないので、var kihutext1、var kihutext2、var kihutext3に分けた。
5. var kihutext = kihutext1.concat(kihutext2, kihutext3);で棋譜をひとつに繋げた。
6. kihu = kihutext.split("x"); で棋譜のarrayを作った["17-4", "16-16", "4-3",....]。
7. 碁盤の中身は、plateAllのarray で表し、21 x 21 の枠の外枠を"d"の文字で埋めた。

下記JavaScriptが、メインのフローだ。
JavaScriptの、メインのフローを表示する

1. moveBase123 が棋譜の番号を示し、一手目は moveBase123 = 0で、moveBase=1000のときは石を全て消す。
2. manualKihu は一手目からmoveBase123までの棋譜だ。
3. greenx/greeny は、最後の手の周りを緑色で囲むxy位置情報だ。
4. eraseImages(); で碁盤以外のimagesを削除する。
5. putBwOnPlate(); で石を置き、取る石があるかをチェックし、あればその石を消す。
6. imagePlan(); で碁盤のarray plateAllの中身で碁盤に黒石と白石を置く。
7. greenMarkPut(greenx,greeny); で最後の手の石の周りを緑色にする。

上記のputBwOnPlate();を説明する。
putBwOnPlate()を表示する

1. 最初のfor loopで、碁盤のarray plateAllを初期化する。
2. 二番目のfor loopで一手目からmoveBase123までの棋譜を表示する。

上記のputBwOnPlate()の中で使われている、deletedBw(addStones) を説明する。
deletedBw(addStones)を表示する

1. 打った石の上下左右に相手の石があるかをチェックする。
2. もし上下左右に相手の石があれば、以下のfunctionで、取れる石があるかどうかをチェックする。

上記のdeletedBw(addStones)の中で使われている、oneStoneCheck(noarr0); を説明する。
oneStoneCheck(noarr0)を表示する

1. 打った石の上下左右に相手の石があれば、その石に繋がる相手の石を追加する。
2. そして次に、消す石かどうかをチェックする。

上記のoneStoneCheck(noarr0) の中で使われている、fourSideTouched(stoneX,stoneY,kihuNoColor); を説明する。
fourSideTouched(stoneX,stoneY,kihuNoColor)を表示する

1. 石の上下左右の石をチェックする。
2. 相手の石があれば、addStones03に石を追加する。

上記のoneStoneCheck(noarr0) の中で使われている、checkSpace(addStones03); を説明する。
checkSpace(addStones03)を表示する

1. 取れる可能性のある相手の石の一団全てが、囲まれているかどうかをチェックする。
2. spaceFlag = 1; がそのまま１であれば、addStones03の石を消す。

上記のoneStoneCheck(noarr0) の中で使われている、blankBw(addStones03); を説明する。
blankBw(addStones03)を表示する

1. 取れる相手の石の一団を、addStones03に保持する。
2. そしてplateAll[xxx][yyy] = "";で石を消す。

最後に石を表示するJavaScriptを説明する。
石を表示するJavaScript

1. imagePlan()で、碁盤のarray plateAll の中身の通りに石を置く。
2. eraseImages() で、碁盤以外のimagesを削除する。
3. clearPlate() で、碁盤のarray plateAllを初期化する。