Javascriptとcanvasとインターフェイス（７）・・・列・行を指定しコマを置く

canvas という描画するための HTML 要素が Dashboard の登場を機会に Safari や Firefox などに実装されているので、この canvas を利用したユーザーインターフェイス（UI）を検討しています。マルバツゲーム（○×ゲーム、英語では Tic-Tac-Toe です）の出力を意識して描画している段階です。

Javascriptとcanvasとインターフェイス（４） でマルバツゲームのマスを描き、Javascriptとcanvasとインターフェイス（５）・・・○を描く で○のコマ、Javascriptとcanvasとインターフェイス（６）・・・×を描く で×のコマを座標を指定して描きました。

でもいちいち座標を指定してコマを描くのは面倒です。そこで今回は列と行でマスを指定してそのマスにコマを描くようにしてみます。

列の指定は左から１～３列とし、行の指定は上から１～３行とします。
例えば、「１列・１行」は左列の一番上のコマで、「３列・３行」は右列の一番下のコマです。

コマを描くのに Javascriptとcanvasとインターフェイス（５）・・・○を描く で記述した○のコマを描くルーチン、および Javascriptとcanvasとインターフェイス（６）・・・×を描く で記述した×のコマを描くルーチンを呼び出します。

function draw(){
var canvas = document.getElementById('main');
if (canvas.getContext){
var ctx = canvas.getContext('2d');

var sx = 10; //左余白幅
var sy = 10; //上余白幅
var w = 80; //個々のマスの幅
var h = 80; //個々のマスの高さ

drawTable(ctx,sx,sy,w,h); //マスを描く
drawKoma(ctx,sx,sy,w,h,2,3,"x"); //コマを置く

}
}


function drawKoma(tmp,sx,sy,w,h,retu,gyou,koma){
var tx = sx +(retu *w)-w/2;
var ty = sy +(gyou *h)-h/2;

if (koma == "o") {
drawMaru(tmp,tx,ty,w,h);
} else if (koma=="x") {
drawBatu(tmp,tx,ty,w,h);
} else {
alert("error in drawKoma");
}
}

２列・３行めのマスに×を描いています。





座標を復習しておきましょう。





次回は入力部です。