JavaScript (12) レイヤーで絵を重ねる

局面のオブジェクト Pos を使って、囲碁の局面をベクトルと行列で表し、着手禁止や取りの計算を行えるようにしました。goban04.js として公開します。

【図12 Goban 0.4】
取った石をスマートに消したい。と思い、レイヤーのように Canvas を重ねる手法を使いました。碁盤上は石が近いので、影が重ならないよう、影のレイヤーも設けました。最初は CSS で position: relative; top : -480px としていたのですが、微妙にずれが生じます。しかも、Chrome と Firefox でずれの度合いが違うのでこの方法はやめにしました。position: relative と position: absolute を組み合わせて、どちらのブラウザでもうまく表示できるようになりました。
今回、JavaScript の囲碁のプログラムにオブジェクト Pos を初めて組み込んだわけですが、Java では全く気にならなかった計算速度が結構遅いことに気づきました。Google Chrome の JavaScript コンソールに Profiles という性能測定ツールがあるので、それを使って遅いところを書き直しました。それでも6ベクトルの計算は時間がかかるので、今回は取り外しました。
ということで、ブラウザの JavaScript エンジンの限界が早くも見えてきました。これで AI を組むのはちょっとつらそうです。JavaScript は iPad でも表示できるグラフィックスの部分に特化させ、AI は別の方法で走らせたほうがよさそうです。
今のところ選択肢を2つ考えています。ひとつは Ajax。Google マップなどで使われているサーバーとの非同期通信です。もうひとつは囲碁のプログラムでよく使われている GTP (Go Text Protocol) というプロトコルです。
サーバー側をどのようにするか、いろいろ調べてみたいと思います。
（つづく）