将棋盤と駒をWEB上に表示する2

というわけで、将棋の駒の個々の画像データ表示位置をCSSに記述することによって将棋盤に将棋の駒を配置することができるようになったが、いちいち

<img href=”……png” alt=”” > という属性をつけたイメージタグを駒の数だけ書いてWebページを作るのも気が利かない、というか、手間がかかってしょうがない。 そこで JavaScript を使って作業を簡単にすることを考える。

まずは駒配置のデータ形式を グローバルバリアブル(board)に格納することとし、その構文を以下のようObject literal で記述する

var board;

board= { onBoard:{ G:
['11l','21n','31s','41g','51k','61g','71s','81n','91l', '22b','82r', '13p','23p','33p','43p','53p','63p','73p','83p','93p'],
S:
['19l','29n','39s','49g','59k','69g','79s','89n','99l', '28r','88b', '17p','27p','37p','47p','57p','67p','77p','87p','97p'] },

onHand:{ S:['g', 'g', 'l', 'p'], G:['b', 'l', 'l', 'p'] },

盤面の配置はonBoard とし、その中にS配列(先手) G配列(後手)をつくる。同じく持ち駒の配列をonHand.S, Onhand.G という二つの配列に記述する。

駒の種類については英語文字一文字であらわす。 (香車=Lanceー&gt;l、桂馬=Knight→n、銀=Silver→s、 金=Gold→g、角=Bishop→b,飛車=Rook→r, 王=King→k)  なお、成駒はすべてそれぞれの英文字の大文字とする(成銀→S、成桂→N etc.,)

ちなみに上の例では平手の初期画面となる。(よって、onHand 部分は本当は空行列になるべきだが、これはテスト用のデータなのでこうなってます)こうやって先手、後手の駒の配置をまとめて記述することによって前回よりはデータを作る手間が楽になる。

次にこのデータを読み込んでイメージタグを生成するfunction を定義する。

JQuery の拡張機能を多用するのでまずは以下の記述が必要

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
function cordToClass(cord){ return 'koma c'+cord.charAt(0)+' r'+cord.charAt(1);}

そして function initializeBoard() で将棋板と駒台を表示

function initializeBoard() { var i,cord,png;

for (i=0; i<board.onBoard.S.length; i++){

png=komatopng(board.onBoard.S[i].charAt(2)); cord=board.onBoard.S[i].substr(0,2);

$('<img alt=""/>') .addClass(cordToClass(cord)).attr('src',board.pathname+'S'+png).attr('data-koma',png).appendTo('#boardbase'); } for (i=0; i<board.onBoard.G.length; i++){

png=komatopng(board.onBoard.G[i].charAt(2)); cord=board.onBoard.G[i].substr(0,2);

$('<img alt=""/>') .addClass(cordToClass(cord)).attr('src',board.pathname+'G'+png).attr('data-koma',png).appendTo('#boardbase'); }

for (i = 0; i < board.onHand.S.length; i++) { png=komatopng(board.onHand.S[i]);
$('<img class="" alt=""/>') .attr('src', board.pathname+'S' + png ).attr('data-koma',png).appendTo('#senteMochigoma'); }

for (i = 0; i< board.onHand.G.length; i++) { png=komatopng(board.onHand.G[i]);
$('<img class="" alt=""/>') .attr('src', board.pathname + 'G' + png).attr('data-koma',png).appendTo('#goteMochigoma'); }

}

上記のfunction をブラウザーがデータを読み込んだ直後に実行させるために、

$(function () {initializeBoard();}

Jquery 大活躍の図である。

きもは

$('<mg alt=""/>') .addClass(cordToClass(cord)).attr('src',board.pathname+'S'+png).attr('data-koma',png).appendTo('#boardbase');

という一行なのだが、 これほとんどJquery のlibrary 機能ををつかっているわけで、

$(‘<img alt=”” />’) で新規にイメージエレメントをつくり、

.addClass(“…”) で クラス情報を追加し、(.addClass(“koma  c7  r9″)など
.att(…) で src属性を追加(src=”images/shogiboard/Sgin.png”など) (.attr(‘data-koma.png’) は data-koma属性を追加したもので、これは後述する。 ) そして最後にこのイメージエレメントを <div id=”boardbase”> というエレメントの最後尾に追加する

こうやってスタイルシートを使ってブラウザーにならべさせた将棋の駒を動かすのは実はわりと簡単にできる。

たとえば 例えば先手の銀を7九から6八に動かそうとした場合は

<img src=”….Sgin.png” alt=””> というエレメントをJQueryのクラス名指定($(‘.koma.c7.r9’)で探し出し

classを”koma c6 r8″ と書き換えてやれば、あとはブラウザの描画機能がイメージを動かし銀が動いたようにみせることができる。

ただそうは言っても、駒を取る場合はもともとそこにあった駒を先手後手の判断をして駒台に乗せる必要があるし、駒が成れば、画像ファイル指定も変えてやる必要がある。  場所を示すために動いた升目をハイライトする必要もある。

次回はこのあたりのインプリメンテーションを紹介する。

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload the CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.