将棋UI実装への道～駒移動を実装する～

この記事の所要時間は約 4 分です。

前回から大きな進捗はないが、駒移動を仮実装してみたので、ここまでのコーディング内容を記録する。

1 前回からの改善点について
- 1.1 前回のバグの解消
- 1.2 命名の変更
2 movePieceの仮実装

前回からの改善点について

前回、実装したロジックにて、一部、修正がある。１つはバグで、もう１つは変数のネーミングの変更だ。

前回のバグの解消

前回の記事において、空の升目をクリックした際の挙動について、以下のように実装していたが、このif文が正しくない。

if(kazu2koma[board[_x][_y]] != EMPTY){
　console.log(kazu2suji[_x] + kazu2dan[_y] + kazu2koma[board[_x][_y]]);
　movePiece();
};

この判定では、その升目が空の時には、”kazu2koma[board[_x][_y]]”には、”undifided”が格納されており、EMPTY(すなわち、ゼロ)と比較しても、合致しない。正しくは、”board[_x][_y]”と比べるべきであった。

命名の変更

今、メールでやり取りさせていただいている有識者の方から、チェスの用語に慣れていった方がよい、というアドバイスをいただいたので、”kazu2dan”や”kazu2suji”については、チェス用語である”rank”や”file”を使った名称に変更した。

前述の変更点とあわせて、プログラムは以下のようになっている。

for(var y = 1; y <= 9; y++){
for(var x = 1; x <= 9; x++){
  var c = piece[board[x][y]].cloneNode(true);
  c.style.left = (30+(x-1) * 60) + "px";
  c.style.top = (30+(y-1) * 64) + "px";		
    (function(){
      var _x = x,_y = y;
      c.onclick = function(){
        if(board[_x][_y] != EMPTY){
          console.log(kazu2file[_x] + kazu2rank[_y] + kazu2koma[board[_x][_y]]);
          movePiece(board[_x][_y],_x,_y);
        };
      };
    })();
  b.appendChild(c);
}
}

※なお、movePieceにパラメータを渡すように変更しているが、ここでのmovePieceの実装もあくまで仮組みである。

movePieceの仮実装

取り急ぎ、駒移動を試してみたかったので、雑ではあるが、ある駒をクリックした時に、その駒が１マス前進するようなロジックを組んでみた。

var movePiece = function(_koma,_x,_y) {
  board[_x][_y] = EMPTY;
  if(_koma <= ENEMY){
    board[_x][_y-1] = _koma;
  }else{
    board[_x][_y+1] = _koma;
  };
  showBoard();
};

定数である “ENEMY”には、16という数値が格納されており、ある駒がこれを超える値を持っていた場合には、それは敵駒である。

これを組み込んで、いくつかの駒をクリックしてみた状態が以下の盤面である。

駒ごとの正しい可動域の判定はできていないが、一旦、駒をクリックすると、１マス前に進むように実装できた。斜めや桂馬跳びなどの移動については、移動先への座標をパラメータで渡すようにしたら、実現できそうだ。ただ、このあたりは、盤や駒をどのようなデータとして保持するかによって、実装が変わるため、まずは、この見直しを進めたいと思っている。

次回は、この盤駒の表現方法についてのアイデアを共有する。