All geek questions in one place

Simple Chessboard Javascript

Can someone give me a hint on how to create a chessboard (8x8) using JavaScript using table tags or?

I have the following:

<DOCTYPE html> <html> <head> <style> div { border:1px solid black; width:20px; height:20px; } </style> </head> <body> <script type="text/javascript"> // create a chess table 8x8. var count = 0; while (count < 64) { if (count % 2 == 0) { if (count % 8 == 0 && count !=0) { document.write('<br/><div style="background-color:#000000;float:left;">&nbsp</div>'); } else { document.write('<div style="background-color:#000000;float:left;">&nbsp</div>'); } } else { document.write('<div style="background-color:#FFFFFF;float:left;">&nbsp</div>'); } /* */ count++; } </script> </body> </html>

I tried to assign black and white to each odd and even number respectively, but this does not work.

Thanks in advance.

+6
source share
9 answers

I cannot verify this at the moment, but it should work. This code creates an 8x8 table in which black cells are marked with a black class and white cells are marked with a white class. Use CSS to give them color. Hope this helps.

 var table = document.createElement("table"); for (var i = 1; i < 9; i++) { var tr = document.createElement('tr'); for (var j = 1; j < 9; j++) { var td = document.createElement('td'); if (i%2 == j%2) { td.className = "white"; } else { td.className = "black"; } tr.appendChild(td); } table.appendChild(tr); } document.body.appendChild(table);
+8
source

At some point, it became a golf code for me:

http://jsfiddle.net/4Ap4M/

JS:

 for (var i=0; i< 64; i++){ document.getElementById("mainChessBoard").appendChild(document.createElement("div")).style.backgroundColor = parseInt((i / 8) + i) % 2 == 0 ? '#ababab' : 'white'; }

HTML:

 <div id="mainChessBoard"> </div>

CSS

 #mainChessBoard { width:160px; height:160px; border:1px solid black; } div { width:20px; height:20px; float:left; }
+13
source

This is the basic foundation for creating your chessboard.
You can check the checkerboard pattern on the console.

  var chessBoard = function(size){ var hash = '#' var space = '_' for (var i = 0; i < size; i++) { hash += '\n' for (var j = 0; j < size; j++) { if((i +j) % 2 == 0) { hash += space } else { hash += "#" } }; }; console.log(hash) }(8)
+2
source

You can create boards of any size you want, and thus it is quite easy to resize squares and colors. you do not need to change anything.

It’s good practice to keep the appearance in the stylesheet. Also do not use document.write

http://jsfiddle.net/YEJ9A/1/

Javascript

 var x=8; var y=8; var chessBoard = document.getElementById("chessBoard"); for (var i=0; i<y; i++){ var row = chessBoard.appendChild(document.createElement("div")); for (var j=0; j<x; j++){ row.appendChild(document.createElement("span")); } }

CSS

 #chessBoard span{ display: inline-block; width: 32px; height: 32px; } #chessBoard div:nth-child(odd) span:nth-child(even), #chessBoard div:nth-child(even) span:nth-child(odd){ background-color: black; } #chessBoard div:nth-child(even) span:nth-child(even), #chessBoard div:nth-child(odd) span:nth-child(odd){ background-color: silver; }
+1
source

The following code will print a chessboard using only HTML and JavaScript.

 <script> document.write("<table border='1' width='200' height='200'>"); for(var i=1; i<=8; i++) { document.write("<tr>"); for(var j=1; j<=8; j++) { if((i+j)%2!=0) { document.write("<td bgcolor='white'></td>"); } else { document.write("<td bgcolor='black'></td>"); } } document.write("</tr>"); } document.write("</table>"); </script>
0
source

Maybe you want to do this with divs , not a table. So here is the solution for this.

 $(document).ready(function() { for (var i = 1; i <= 8; i++) { var divRow = $("<div>", { class: "row", }); for (var j = 1; j <= 8; j++) { var div = $("<div>", { class: "square" }); if (i % 2 == j % 2) { $(div).addClass("white"); } else { $(div).addClass("black"); } divRow.append(div); } $("#board").append(divRow); } }); 
 #board { margin: 0; width: 256px; height: 256px; border: solid 1px #333; } #board .row { margin: 0; } .square { height: 32px; width: 32px; background: #efefef; float: left; } .square.white { background: #fff; } .square.black { background: #333; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <div id="board"></div>
0
source

JavaScript:

 var i, j, clas; for (i = 0; i < 8; i++) { for (j = 0; j < 8; j++) { clas = ''; if (j === 0) clas = 'first '; else if (j === 7) clas = 'last '; clas += (i % 2 == j % 2) ? 'white' : 'black'; var field = document.createElement('div'); field.className = clas; document.body.appendChild(field); } }

CSS

 div { float: left; width: 20px; height: 20px; } .first { clear: left; } .black { background: black; } .white { background: red; }

Example: http://jsfiddle.net/YJnXG/2/

-1
source

Do you mean this?

 .... html..... &lt;table&gt; &lt;tr&gt; &lt;script language='javascript'&gt; &lt;!-- alternate(); //--&gt; &lt;/script&gt; &lt;/tr&gt; &lt;/table&gt; ....more html..... function alternate() { var numOfCells = 6; var num = 0; for (i = 0; i &lt; numOfCells ; i++) { txt = "&lt;td bgColor='"; txt += (num % 2 == 0) ? 'red' : 'black'; txt += "'&gt;" document.write(txt); num++; } }

Sign% - mod; it returns the rest of the division. "(...)? ...: ...;" the construction is similar to if / else. If the condition is true, the first option is another.

-3
source

Source: https://habr.com/ru/post/945538/

More articles:


All Articles