Home/ Questions/Q 8499751
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T00:45:11+00:00

I need a chess board for my application and I wondering the options to

  • 0

I need a chess board for my application and I wondering the options to achieve it in Raphael.js.
Should I create 64 squares and connect them together or a single big block and shade it black and white.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I think you can do it this way:

    You can describe a cell or box of the board like this:

    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"});
}

    And to draw the board (modify it to your purpose):

    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
  }

    }

    Finally, in your HTML code:

        <!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>

    The ouput should be this (the gray part is from the browser):

    enter image description here

    • 0