詰碁印刷3 碁盤と碁石と手順の描画、javascriptで配列の簡単なシャローコピーの作り方

詰碁印刷2 – 六帖のかたすみ
の続きです。

ソースはこちら
kickzone/SGFPrint · GitHub

f:id:happyholiday:20150628111339p:plain

碁盤と手順を表示できるようになりました。使っている技術は大したことはなく、easeljsでゴリゴリ碁盤や碁石を描いているだけです。
一番苦労したのはノードの全分岐をゲットする処理です。これは先週大まかにできていましたが動作はさせておらず、今週デバッグに時間がかかりました。
詰碁用のSGFファイルは正解図を表示させるだけではありません。この手ならここがだめ、じゃあ少し戻ってここはこう打つ…と分岐がいくつも存在するファイルがありますので、すべてのパターンについて出力が必要となります。スタックと配列のコピーで実装できました。

SGFElement.prototype = {
//全てのノード組み合わせ(=すべての分岐)をゲット
getAllBranch: function(){
var retArr = [];
var nodeStack = [];
var terminals = [];
nodeStack.push(this.root);
while(nodeStack.length){
var currentNode = nodeStack[nodeStack.length-1];
//子ノードがなければ終端とみなし、nodeStackの内容をretArrにコピー
if(currentNode.childNodes.length == 0){
terminals.push(currentNode);
retArr.push([].concat(nodeStack)); //配列をシャローコピーするちょっと変わった書き方
nodeStack.pop();
}
else{
//terminalsに入っていない子ノードをスタックに入れる
//一つもなければ、探索が終了したものとして終端一覧に入れ、自分自身をpop
var findChild = false;
for(i in currentNode.childNodes){
var node = currentNode.childNodes[i];
if(terminals.indexOf(node) == -1){
findChild = true;
nodeStack.push(node);
break;
}
}
if(!findChild){
terminals.push(currentNode);
nodeStack.pop();
}
}
}
return retArr;
}
}

配列のシャローコピーはとても簡単な方法があります。

var newArr = [].concat(oldArr);

と書くだけでよいです。空の配列に古い配列をコピーした結果がnewArrに返ってきます。

残りの作業は、SGFファイルに書かれているコメントの出力と、大詰めのCSSによるページ設定です。これができれば一通り完了です。


コメントを残す

メールアドレスが公開されることはありません。