Goban 0.4

マウスをクリックすると碁石を自由に置けます。待ったはできません。[パス Pass] ボタンでパスすることができます。石を囲うと取ることができます。コウの処理まだはできません。

実行結果

ソース

後半のソースはリンクを張ってあります。ソースは UTF-8 でエンコードしてあります。

goban04.html

スタイルシートの部分です。Canvas をレイヤーのように重ねるための工夫をしています。

<style>

</style>

実行結果を表示する部分です。

<h2>実行結果</h2>
<div style="height: 510px; width: 640; position: relative">
<canvas width="640" height="480" id="table">Goban 0.4 には HTML5 Canvas が必要です。</canvas>
<canvas width="640" height="480" id="shadow">Goban 0.4 には HTML5 Canvas が必要です。</canvas>
<canvas width="640" height="480" id="stones">Goban 0.4 には HTML5 Canvas が必要です。</canvas>
<div id="control">
<img style="vertical-align: bottom; padding-left: 10px" src="img/white22.png">
<input id="white" type="button" value="パス Pass" onclick="pass()">
<span id="pw">0</span>
<img style="vertical-align: bottom; padding-left: 10px" src="img/black22.png">
<input id="black" type="button" value="パス Pass" onclick="pass()">
<span id="pb">0</span>
<input style="margin-left: 40px" type="button" value="はじめから Restart" onclick="restart()">
</div><!-- end of control -->
</div><!-- end of 実行結果 -->

goban04.js

碁盤のイメージを残したまま、碁石を消すために、レイヤーのように Canvas を重ねる処理を加えました。また、碁盤上の石を整列し、オブジェクト Pos を使って着手禁止、取りの処理を追加しました。
リンク先をご覧下さい。

board02.js

碁盤を描くレイヤー、碁石を描くレイヤー、碁石の影を描くレイヤーの3つのコンテキストを使い分けています。
リンク先をご覧下さい。

pos02.js

オブジェクト SixVectors の計算が重いので、取り外しできるようにしました。
リンク先をご覧下さい。

move02.js

パスの扱いを変更しました。
リンク先をご覧下さい。

bvector04.js

性能向上のための変更をしました。
リンク先をご覧下さい。

bmatrix03.js

性能向上のための変更をしました。
リンク先をご覧下さい。