Simple JavaScript chess board

Question

Could anyone give me a hint on how to generate a chess board (8x8) using JavaScript, using a table tags or ?

I've got the following so far:

<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 it doesn't work this way.

Thank you in advance.

Out of interest why do you want to do this with javascript instead of just manually writing out the html? — Chris Moutray, May 22 '13 at 05:23
any chance your using opengl? if so check out http://www.java-tips.org/other-api-tips/jogl/another-method-of-texture-mapping-a-checkerboard-image-onto-two-recta.html very easy with opengl — Glen Morse, May 22 '13 at 05:23
@Chirs Moutray could still use webgl it would still work...and checkerboards are one of the basic in gl. — Glen Morse, May 22 '13 at 05:28
@GlenMorse Creating a few divs vs importing and learning to use WebGL and then drawing 3D primitives? Your suggestion of WebGL is total overkill. — doppelgreener, May 22 '13 at 05:29
Hi all, thanks for the suggestions so far. I am still learning and my assignment is to do this with JavaScript exclusively. *my original post should read "... table tags or div". — Tyrant, May 22 '13 at 05:30
http://code.google.com/p/o3d/source/browse/trunk/samples_webgl/shaders/checker-glsl.shader?r=219 quick and easy if your wanting checkerboard.. Thats why i asked if he was using gl.. — Glen Morse, May 22 '13 at 05:30

Alfonso Jiménez · Accepted Answer · 2015-03-10T00:34:48.353

18

I can not test it at this moment but this should work. This code creates a 8x8 table in which black cells are tagged with "black" class and white cells are tagged with "white" class. Use CSS to give them color. I hope it 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);

edited Mar 10 '15 at 00:34

answered May 22 '13 at 05:42

Alfonso Jiménez

1,235
1
13
24

Thank you! This answer seems so far to me the most suitable (given my novice level). – Tyrant May 22 '13 at 05:58
3

document.write is not the best way to do it – Vitim.us Sep 09 '13 at 00:50
document.write removed from the answer! – Alfonso Jiménez Mar 10 '15 at 00:35
1

...and when you add a 20px padding to the td tag, you will behold the beauty. Thanks Jiménez – Emmanuel Benson Jul 14 '19 at 08:53

score 18 · Answer 2 · answered May 22 '13 at 06:12

18

At some point for me, this became code golf:

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

answered May 22 '13 at 06:12

aquinas

23,318
5
58
81

2

really appreciate the answer, but the right bottom or left top square has to be white square in a chess board (so flipping the colors, would do) – David Gladson Jan 13 '21 at 18:56

user3449311 · Answer 3 · 2014-12-05T11:46:15.257

3

This is the basic foundation to build your chess board.
You can check out the chess board pattern in 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)

edited Dec 05 '14 at 11:46

answered Dec 05 '14 at 01:01

user3449311

205
2
5

1

Eloquent JavaScript by Marijn Haverbeke. – Fulvio May 18 '16 at 20:23

score 2 · Answer 4 · edited May 23 '17 at 11:46

You can generate boards of any size you want, and this way is pretty easy to change the size of the squares and the colors. you don't need to change anything else.

It is good practice to keep appearance on the stylesheet. Also don't 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;
}

Prince Sodhi · Answer 5 · 2017-10-01T12:29:01.377

May be you want to do it with divs, not with the table. So here is the solution for it.

$(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>

NVRM · Answer 6 · 2021-10-22T17:52:09.933

A little modernization, using css variables, css attr() and dataset attributes.

This allows to tweak themes, and keep stuffs simple.

const cols = {0:"A", 1:"B", 2:"C", 3:"D", 4:"E", 5:"F", 6:"G", 7:"H"}
const table = document.createElement("table");
table.className = "board";
for (let i = 1; i < 9; i++) {
    let tr = document.createElement('tr');
    tr.dataset.line = i
    for (let j = 1; j < 9; j++) {
        let td = document.createElement('td');
        td.dataset.col = cols[j-1];
        td.dataset.line = i;
        td.className = (i%2 === j%2) ? "white square" : "black square";
        tr.appendChild(td);
    }
    table.appendChild(tr);
}
document.querySelector("div").appendChild(table);

:root {
  --size:      640px;
  --backcolor: darkslategray;
  --dark:      grey;
  --light:     white;
  --legend:    azure;
  --hover:     lightgreen
}
.board {
  width: var(--size);
  height: var(--size);
  border: 32px solid;
  border-color: var(--backcolor);
  border-radius: 0.2rem;
}
.square {
  border: 1px black solid;
}
.white{
  background: var(--light);
}
.black{
  background: var(--dark)
}
.board tr::before {
  content: attr(data-line);
  position: absolute;
  margin: 1.8rem 0 0rem -1.5rem;
  font-size: larger;
  color: var(--legend);
}
.board tr::after {
  content: attr(data-line);
  position: absolute;
  margin: 1.8rem 0 0rem 0.8rem;
  font-size: larger;
  color: var(--legend);
}
.board tr:first-child > td::before {
  content: attr(data-col);
  position: absolute;
  margin: -4rem 0 0rem 1.6rem;
  font-size: larger;
  color: var(--legend);
}
.board tr:last-child > td::after {
  content: attr(data-col);
  position: absolute;
  margin: 2.6rem 0 0rem 1.6rem;
  font-size: larger;
  color: var(--legend);
}
td:hover {
  background: var(--hover);
  cursor: pointer
}

<div></div>

score 0 · Answer 7 · answered May 03 '16 at 11:10

The following code will print chess board 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>

score 0 · Answer 8 · answered Apr 28 '20 at 19:57

You should try this one this will really work

<DOCTYPE html>
<html>

<head>
    <style>
        .chessBoard {
            display: inline-block;
            border: 2px solid lightGray;
        }

        .chessBoard div {
            line-height: 1px;
        }

        .chessBoard span {
            display: inline-block;
            width: 32px;
            height: 32px;
            background-color: snow;
        }
    </style>
</head>

<body>
    <div class="chessBoard" id="chessBoardNormal"></div>
    <div class="chessBoard" id="chessBoardRandom"></div>
    <script>
        function colorNormal(x, y, color) {
            var chessBoard = document.getElementById("chessBoardNormal");
            for (var i = 0; i < x; i++) {
                var row = chessBoard.appendChild(document.createElement("div"));
                for (var j = 0; j < y; j++) {
                    var span = document.createElement('span');
                    if (i & 1) { // odd
                        if (j & 1) { // white

                        } else { // black
                            span.style.backgroundColor = color;
                        }
                    } else { // even
                        if (j & 1) { // black
                            span.style.backgroundColor = color;
                        }
                    }

                    row.appendChild(span);
                }
            }
        }

        function colorRandom(x, y) {
            colorNormal(8, 8, Math.random() > .5 ? 'black' : '#CFD65C');
        }

        function getRandomHexColor() {
            return '#' + Math.floor(Math.random() * 16777215).toString(16);
        }

        colorNormal(8, 8, 'black');
    </script>
</body>

</html>

score 0 · Answer 9 · answered May 29 '21 at 14:04

My idea is simple, if row is even then start with white piece otherwise start with black piece.

HTML:

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

Javascript:

const fragment = document.createDocumentFragment();
const board = document.getElementById("mainChessBoard");
const size = 8;

for (let i = 0; i < size; i++) {
  let start = i % 2 === 0 ? 0 : 1; // if row is even then start with white otherwise start with black;
  for (let j = 0; j < size; j++) {
    const div = document.createElement('div');
    div.classList.add(start === 1 ? "black" : "white");
    fragment.appendChild(div);
    start = start === 1 ? 0 : 1;
  }
}

board.appendChild(fragment);

score 0 · Answer 10 · answered Oct 11 '21 at 08:01

Here's a plain JS copy-paste solution. I know it's not that clean in terms of conditioning but it does the job comprehensibly and it's quite straight forward. Field size is easily adjustable as well.

const fieldSize = 50;
const whiteField = document.createElement("div");
whiteField.style = `height:${fieldSize}px;width:${fieldSize}px;background-color:white;display:inline-block`;
const blackField = document.createElement("div");
blackField.style = `height:${fieldSize}px;width:${fieldSize}px;background-color:black;display:inline-block`;

for (let i = 0; i < 8; i++) {
  for (let j = 0; j < 8; j++)
    i % 2 === 0 ?
    j % 2 === 0 ?
    document.body.appendChild(blackField.cloneNode(true)) :
    document.body.appendChild(whiteField.cloneNode(true)) :
    j % 2 === 0 ?
    document.body.appendChild(whiteField.cloneNode(true)) :
    document.body.appendChild(blackField.cloneNode(true));

  document.body.appendChild(document.createElement("br"));
}

score 0 · Answer 11 · answered Aug 11 '22 at 17:34

We can always think of a better performance, here's the DOM optimized solution using documentFragments -

// main container
let container = document.querySelector("#main");
// a fragment object to store a 2-D mesh of rows and columns
let fragment = new DocumentFragment();

for (let i = 0; i < 8; i++) {
    // a fragment object to store a single row with 8 columns
    let rowFragment = new DocumentFragment();
    for (let j = 0; j < 8; j++) {
        // div element for a column
        let col = document.createElement("div");
        col.style.border = "1px solid";
        if ((i + j) % 2 == 0) col.style.background = "black";
        else col.style.background = "white";
        // adding column in a document fragment
        rowFragment.appendChild(col);
    }
    // adding row in a main fragment
    fragment.appendChild(rowFragment);
}
// adding fragment to a DOM one time - this will update the DOM only once
container.appendChild(fragment);

.container {
  display: flex;
  width: 416px; /* width + horizontal border of each cell ((50 + 2) * 8) */
  height: 416px; /* height + vertical border of each cell ((50 + 2) * 8) */
}

div {
  flex-wrap: wrap; /* to fit 8 cells in a row as per the width */
  width: 50px;
  height: 50px;
}

<div class="container" id="main"></div>

Here, the DocumentFragment creates an object of elements we add, but it isn't a part of the active document tree unless we append it to any other DOM node.

Igor Jerosimić · Answer 12 · 2013-05-22T05:53:54.013

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

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

score -4 · Answer 13 · answered May 22 '13 at 05:34

-4

You mean like 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++;
}
}

The % sign is mod; it returns the remainder of a division. the "(...) ? ... : ...;" construction is like an if/else. If the condition is true, the first option -- else the second.

answered May 22 '13 at 05:34

Glen Morse

2,437
8
51
102

Thank you! It took me good five seconds before I figure out < and > :) – Tyrant May 22 '13 at 06:00
1

Considering this is in a code block you might want to replace the lt's and gt's with actual <'s and >'s - otherwise this HTML code won't do anything but visually display HTML code to anyone opening that page. – doppelgreener Sep 09 '13 at 00:52

Simple JavaScript chess board

13 Answers13

Linked

Related