canvas という描画するための HTML 要素が Dashboard の登場を機会に Safari や Firefox などに実装されているので、この canvas を利用したユーザーインターフェイス（UI）を検討しています。今回からは、マルバツゲーム（○×ゲーム、英語では Tic-Tac-Toe です）の入力部です。
前回までに、こんなふうにマルバツゲームのマス（枠）を描くところまできました。
設計した座標イメージは次の通りです。
今回はまず、マウスの動きと座標との相関を確認してみます。
次のようにコードを追加します。
スクリプト部
body部
実行してみます。
マルバツゲームのマス（正確には canvas 内）をクリックしてみると、クリックした座標を確認できます。
次回は、クリックされたときのマウスの座標を取得し、それをどのマスがクリックされたかということに対応させてみます。
前回までに、こんなふうにマルバツゲームのマス（枠）を描くところまできました。
設計した座標イメージは次の通りです。
今回はまず、マウスの動きと座標との相関を確認してみます。
次のようにコードを追加します。
スクリプト部
<script type="text/javascript"><!--
//マウスの座標を追い、body 内の id を "xy" とした div タグ部に出力する
window.onmousemove = function () { //あとで取り除く
var input_x = event.x;
var input_y = event.y;
document.getElementById("xy").innerHTML = "(x,y) = ("+ input_x + ", " + input_y +")";
}
//クリックされたときのマウス座標を取得する
function inputKoma() {
var input_x = event.x;
var input_y = event.y;
alert(input_x + "," + input_y);
}
body部
<body bgcolor="cornsilk" onload="draw();">
<canvas id="main" width="480" height="360" style="background-color:white"
onClick="inputKoma()"></canvas>
<br />
<div id="xy"></div>
</body></html>
実行してみます。
マルバツゲームのマス（正確には canvas 内）をクリックしてみると、クリックした座標を確認できます。
次回は、クリックされたときのマウスの座標を取得し、それをどのマスがクリックされたかということに対応させてみます。
