0

私のアプリケーションにはチェス盤が必要ですが、Raphael.jsでそれを実現するためのオプションを考えています。64個の正方形を作成してそれらを接続するか、1つの大きなブロックを接続して、白黒でシェーディングする必要があります。

4

2 に答える 2

1

私はあなたがこのようにそれを行うことができると思います：

ボードのセルまたはボックスは、次のように記述できます。

var cellSize = 25;//the size of our cell (whatever you want)
//Where x, y are the position in the board and cellSate 
//a value indicating if it is black or white.
Raphael.fn.cell = function(x, y, cellState) {
   var size = cellSize;
   var crect = paper.rect(x, y, size, size);
   if(cellState == 1)
          crect.attr({fill: "#000"});
   else
          crect.attr({fill: "#fff"});
}

そして、ボードを描画するには（目的に合わせて変更します）：

var chessBoard = function() {
   var cSize = 0;//auxiliary variable
   var last = 0;//allows to change the colour of the boxes
   for(var i = 0; i < rows; i += 1) {
      for(var j = 0; j < cols; j+= 1) {
          if(last == 1) {
             paper.cell(i * cSize, j * cSize, 0);
             last = 0;
          } else {
             paper.cell(i * cSize, j * cSize, 1);
             last = 1;
          }

          if(i == 0)
             cSize = cellSize;
      }
      if(last == 1) last = 0;
      else last = 1;//my trick hehe
  }

}

最後に、HTMLコードで：

    <!DOCTYPE HTML>
    <html>
    <head> 
    <script src="./js/raphael-min.js"></script>
    <script src="./js/gof.js"></script>
    <script>
       var paper;   
       function loadBoard() {
          paper = Raphael("panel", 512, 512);
          chessBoard(cells1);
       }
    </script>
    </head>

    <body onload="loadBoard();">
       <div id="panel" style="width:100%; height:100%; position:absolute; top:0; left:0;">
       </div>
    </body>
    </html>

出力は次のようになります（灰色の部分はブラウザからのものです）：

ここに画像の説明を入力してください

于 2012-09-03T18:13:27.297 に答える
1

それは別の形式です：

<div id="paper1"></div>
    <script type="text/javascript">
        var ltam=400,paper = Raphael("paper1", ltam,ltam);
        var fins=['\u265C','\u265E','\u265D','\u265B','\u265A','\u265D','\u265E','\u265C',
                  '\u265F','\u265F','\u265F','\u265F','\u265F','\u265F','\u265F','\u265F',
                  '\u2659','\u2659','\u2659','\u2659','\u2659','\u2659','\u2659','\u2659',
                  '\u2656','\u2658','\u2657','\u2655','\u2654','\u2657','\u2658','\u2656'];
        var lfigs=paper.set();
        var chessBoard = function(swz0) {
            var r0, l0, sz0=swz0/8;
            for(var i = 0; i < 8; i++) {
                for(var j = 0; j < 8; j++) {
                    r0 = paper.rect(i * sz0, j * sz0,sz0,sz0).attr({ opacity: 0.45, fill: ((i%8+(j%8))%2)==1?"white":"silver"});
                }
            }
            for(var i = 0; i < fins.length; i++) {
                lfigs.push(paper.text((i % 8) * sz0 + sz0/2, Math.floor((i+(i<16?0:32)) / 8) * sz0 + sz0/2-(sz0/25*2), fins[i])
                    .attr({"font-family": "Arial Unicode MS", "font-size": sz0, 'fill-opacity': 0.65})
                    .hover(function (){this.animate({'fill-opacity': .99,'font-size':sz0*1.1}, 250)},
                           function (){this.animate({'fill-opacity': .65,'font-size':sz0}, 250)})
                )
            }
        };
        chessBoard(ltam);

サンプルを見る：Crear tablero ajedrez Exitos !!!!

于 2015-10-16T18:53:01.580 に答える