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

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

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>

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:


<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 i = 0; i < board.length; i++){
			strArray += board[i] + '<br />';
		}
	document.write(strArray);	
		
</script>

Si :slight_smile:

Adding   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

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.

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

Many thanks