SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Newbie to JavaScript -2D array printing

    Hi
    I am very new to JavaScript programming (where have I been all my life to start so late with JavaScript?!-& I only have basic programming knowledge/abilites). I want to show in browser a 2D chessboard array
    Code:
    <script type='text/javascript'>
    var board = 
    [ ['R','N','B','Q','K','B','N','R'],
      ['P','P','P','P','P','P','P','P'],
      [' ',' ',' ',' ',' ',' ',' ',' '],
      [' ',' ',' ',' ',' ',' ',' ',' '],
      [' ',' ',' ',' ',' ',' ',' ',' '],
      [' ',' ',' ',' ',' ',' ',' ',' '],
      ['p','p','p','p','p','p','p','p'],
      ['r','n','b','q','k','b','n','r']];
    document.write(board);
    </script>
    This outputs:
    R,N,B,Q,K,B,N,R,P,P,P,P,P,P,P,P, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,p,p,p,p,p,p,p,p,r,n,b,q,k,b,n,r (all on one line) but I want it to show as:

    R,N,B,Q,K,B,N,R
    P,P,P,P,P,P,P,P
    , , , , , , ,
    , , , , , , ,
    , , , , , , ,
    , , , , , , ,
    p,p,p,p,p,p,p,p
    r,n,b,q,k,b,n,r

    I need to work out where & how to add the line breaks-can anyone help me please?

  2. #2
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have wrapped this in a table(-but not very well done-)
    with:
    <script type='text/javascript'>
    var board =
    [ ['R','N','B','Q','K','B','N','R'],
    ['P','P','P','P','P','P','P','P'],
    [' ',' ',' ',' ',' ',' ',' ',' '],
    [' ',' ',' ',' ',' ',' ',' ',' '],
    [' ',' ',' ',' ',' ',' ',' ',' '],
    [' ',' ',' ',' ',' ',' ',' ',' '],
    ['p','p','p','p','p','p','p','p'],
    ['r','n','b','q','k','b','n','r']];

    document . writeln ("<table border>");
    function print_2d_string_array (array)
    { document . writeln ("<table border>");
    var row;
    for (row = 0; row < array . length; ++ row) { document . writeln (" <tr>");
    var col; for (col = 0; col < array [row] . length; ++ col) document . writeln (" <td>" + array [row] [col] + "</td>");
    document . writeln (" </tr>"); }
    document . writeln ("</table>"); }

    print_2d_string_array (board);

    </script>

  3. #3
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't really like it, should be splitting each array and rebuilding a string for more control / flexibility but this is a very crude and simple but a quick way of outputting what you need:

    PHP Code:
    <script type='text/javascript'>
    var 
    board 
    [ [
    'R','N','B','Q','K','B','N','R'],
      [
    'P','P','P','P','P','P','P','P'],
      [
    ' ',' ',' ',' ',' ',' ',' ',' '],
      [
    ' ',' ',' ',' ',' ',' ',' ',' '],
      [
    ' ',' ',' ',' ',' ',' ',' ',' '],
      [
    ' ',' ',' ',' ',' ',' ',' ',' '],
      [
    'p','p','p','p','p','p','p','p'],
      [
    'r','n','b','q','k','b','n','r']];

        var 
    strArray ""
        
    for (var 0board.lengthi++){
                
    strArray += board[i] + '<br />';
            }
        
    document.write(strArray);    
            
    </script> 
    Si

  4. #4
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Adding &nbsp; to table has helped cells in mid board area display better.
    Now I want to add javascript to this to move pieces (text) around the board with drag and drop (after that add AI for a chess engine & I will have a javascript chess gui of my own!)..

    Simon
    Many thanks for your quick & helpful post.
    At the moment I find for loops & 2D arrays difficult to understand!
    I hope with more practice & study I will understand better. Thank you very much for your help

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by richardpd View Post
    Adding &nbsp; to table has helped cells in mid board area display better.
    Now I want to add javascript to this to move pieces (text) around the board with drag and drop (after that add AI for a chess engine & I will have a javascript chess gui of my own!)..
    That sounds like quite the challenge. Here's some resources that might be of some use for you.

    JavaScript Chess with CPU opponent
    First implementation of a chess engine in JavaScript
    Javascript Chess

    And while this mediocre chess blog is from someone creating Java chess instead of JavaScript chess, most of his blog contains valuable information about the process of creating a chess-playing program.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Sep 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul
    Thanks for your helpful post. Lot of helpful info with those links.

    I am though sidetracked by a problem with HTML5 drag & drop on another chessboard page I am building-see thread at
    http://www.sitepoint.com/forums/html...op-781935.html

    Many thanks


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •