囲碁アプリケーションをつくる(6)〜打った手を取り消す機能をつくる〜

▼囲碁アプリケーションをつくるシリーズ
囲碁アプリケーションをつくる(1)
囲碁アプリケーションをつくる(2)〜ざっくりとした仕様とバージョン管理〜
囲碁アプリケーションをつくる(3)〜canvasで碁盤を描画する〜
囲碁アプリケーションをつくる(4)〜クリックしたら碁石を描画する〜
囲碁アプリケーションをつくる(5)〜同じ箇所に碁石を置けないようにする〜

▼GitHub
https://github.com/shogo0525/go

▼ざっくりとした仕様

◆STEP1:とりあえず囲碁っぽくなるフェーズ
・碁盤をcanvasで描画する。まずは19路盤から。
・碁盤上をクリックしたら、黒石または白石が置けるようになる。基本的には交互に色が変わっていく。
・引数を渡すと、19路盤以外にも13路盤や9路盤など自由なサイズで碁盤を描画できるようになる。MAXは19路。

◆STEP2:囲碁のロジックを組み込む
・石を取る、コウなど囲碁のルールを組み込んで行く
・ここでは試合計算など、終局に関わることは判断しない◆STEP3:互先の棋譜データを記録できるようになる
・SGFといった、囲碁の棋譜データの形式に変換できるようにする
・戻る、進むボタンを用意して、自由に盤面上の碁石を操れるようにする

◆STEP1000:弱小コンピューターとの対戦ができるようになる

***

久しぶりの更新となってしまいました、囲碁アプリケーションシリーズです。

第6回目では、「打った手を取り消す」ボタンを実装していきたいと思います!

「あ、間違えて打ってしまった〜」というのをミスクリックというのですが、その時にこのボタンがあれば便利です。

今回の大きな変更点は2点。

1: SGFを、文字列のデータに加え、配列データも持たせるようにした(sgfArray)
2: 一手戻るボタンを押したら、sgfArray配列の最後の要素を削除するメソッドを定義した(deleteMoveOne)

deleteMoveOneメソッドでは、sgfArray配列の最後の要素を削除すると同時に、手番を変えたり、碁盤と碁石の再描画を行っています。

碁盤と碁石の再描画を行うために、それらのメソッド周りも少しリファクタリングをかけています。


    // 打った手を取り消す
    function deleteMoveOne() {
      sgfArray.pop();
      changeTurn();
      if (sgfArray.length == 0)  {
        turn = "B";
      }
      updateRawSGF();
      updateBoard();
    }

どんどんアプリケーションっぽくなってきたかなーって思っています。とはいえ、まだまだリファクタリングしなきゃいけないこともあるし、付け加えたい機能もあるので、もっと時間をつくらないといけない・・・(汗)

次は、棋譜のコントロールボタンを作りたいと思います。 1手戻る進む、10手戻る進む、最初まで戻る、最後まで進むといった、機能を追加していきます!(重たそう・・・・)

●今回実装したプログラムはこちら

シェアする

  • このエントリーをはてなブックマークに追加

フォローする