CODEWITHSUNDEEP
javascriptdom
Phantom
Phantom

Reputation: 87

chess board using javascript and dom

I'm trying to create a chessboard just like this.

enter image description here

I did create a table And don'r know how to colour it. A also need to print the board name (like A1, A2, ... H8) and be able to pust any figuere in any of the cell.

For start this is the code to create a table:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>ChessBoard</title>

    <script type="text/javascript">
        function CreateTable(){
            var poz = document.getElementById('space');

            // createing table adn inserting into document
            tab = document.createElement('table');
            poz.appendChild(tab);

            tab.border = '5';

            for (var i = 0; i < 8; i++){
                // creating row and inserting into document
                var row = tab.insertRow(i);

                for(var j = 0; j < 8; j++){
                    // creating cells and fill with data (numbers)
                    var cell = row.insertCell(j);
                    cell.innerHTML = i*j;
                    cell.style.backgroundColor = 'blue';
                    cell.style.color = 'white';
                    cell.style.height = '50px';
                    cell.style.width = '50px';

                };
            };

        }
    </script>
</head>

<body onload="CreateTable()" id ="space">

</body>
</html>

How do i fill specific cell with figure (like A3, E5, H8, ...)? Figure are imgages.

Part 2: I did create a board with your help. Now I'm trying to do some more from this code.

  1. How do I put several different images into several cells? I'm trying to get right working code, but with no success. This images should appear when the tabel will be loaded (when i press button CreateTable). I try to create with this code:

  2. In this point I would like to put figures on board. When i create table it should be blank. Then there will be buttons to add figures. At the beginning for each different figure own button

something like this:

function addKing(idStr){
  cell =  document.getElementById(idStr);    
  if(cell != null){
  // works for color, doesn't work for images!!
  //  cell.style.backgroundColor = 'red';
      cell.src = 'http://akramar.byethost8.com/images/SplProg/DN3/images/50px/king_m.png'
  }
}

Button addKing in html:

<button id="king" onclick="addKing(prompt('Insert field'))">Add King</button>

  1. upgrading previousu code to even better if i can put all together and select which one I like to insert (promtpt window 1: what figure:'king, queen, ...', prompt window 2: on what position would you like to insert: 'A1, B3, ...')).

    function addImage (type, position){ var img = ?? }

When I pres button add image the prompt window should appear and ask for type (king, queen, root, ...) and location (A1, B4, ...) (for further update perhaps even color (black or white) but let build step by step).

All tis chessboard I would like to build just in javascript and with dom.

link to not working exaple: jsfiddle

Upvotes: 1

Views: 8183

Answers (5)

Salvador Dali
Salvador Dali

Reputation: 222561

I case if someone is looking for a way to visualize a chessboard using JS (as I was doing and accidentally came to this question), here is an excellent JS library to do this.

It can create something like this

enter image description here

and much more in no time just by doing the following:

JavaScript

var ruyLopez = 'r1bqkbnr/pppp1ppp/2n5/1B2p3/4P3/5N2/PPPP1PPP/RNBQK2R';
var board = new ChessBoard('board', ruyLopez);

HTML

<div id="board" style="width: 400px"></div>

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

Assuming you need to support only modern browsers, the chess-board is entirely do-able with CSS using counters, and generated-content:

table {
    empty-cells: show;
}

td {
    width: 2em;
    height: 2em;
    line-height: 2em;
    text-align: center;
    border: 1px solid #000;
}

tbody tr:nth-child(odd) td:nth-child(even),
tbody tr:nth-child(even) td:nth-child(odd) {
    color: #fff;
    background-color: #00f;
}

tbody tr:nth-child(even) td:nth-child(even),
tbody tr:nth-child(odd) td:nth-child(odd) {
    background-color: #999;
}

tbody {
    counter-reset: rowNumber;
}

tr {
    counter-increment: rowNumber;
    counter-reset: cellNumber;
}

td {
    counter-increment: cellNumber;
}

td::before {
    content: counter(rowNumber, upper-alpha) counter(cellNumber, decimal);
}

JS Fiddle demo.

The above tested in Chromium 24 and Firefox 19, both on Ubuntu 12.10.

And for a JavaScript approach:

var chess = {
    createBoard: function (dimension) {
        if (!dimension || isNaN(dimension) || !parseInt(dimension, 10)) {
            return false;
        } else {
            dimension = typeof dimension === 'string' ? parseInt(dimension, 10) : dimension;
            var table = document.createElement('table'),
                tbody = document.createElement('tbody'),
                row = document.createElement('tr'),
                cell = document.createElement('td'),
                rowClone,
                cellClone;
            table.appendChild(tbody);
            for (var r = 0; r < dimension; r++) {
                rowClone = row.cloneNode(true);
                tbody.appendChild(rowClone);
                for (var c = 0; c < dimension; c++) {
                    cellClone = cell.cloneNode(true);
                    rowClone.appendChild(cellClone);
                }
            }
            document.body.appendChild(table);
            chess.enumerateBoard(table);
        }
    },
    enumerateBoard : function (board) {
        var rows = board.getElementsByTagName('tr'),
            text = document.createTextNode(),
            rowCounter,
            len,
            cells;
        for (var r = 0, size = rows.length; r<size; r++){
            rowCounter = String.fromCharCode(65 + r);
            cells  = rows[r].getElementsByTagName('td');
            len = cells.length;
            rows[r].className = r%2 == 0 ? 'even' : 'odd';
            for (var i = 0; i<len; i++){
                cells[i].className = i%2 == 0 ? 'even' : 'odd';
                cells[i].appendChild(text.cloneNode());
                cells[i].firstChild.nodeValue = rowCounter + i;
            }
        }
    }
};

chess.createBoard(10);

JS Fiddle demo.

Upvotes: 3

ceruleus
ceruleus

Reputation: 704

Actually, you need to do some math for correctly coloring and adding labels. Here is the part of code for doing magic:

             1       cell.innerHTML = String.fromCharCode(65 + i) + (j + 1);
             2       if((i+j)%2){ cell.style.backgroundColor = 'white'; }
             3       else{ cell.style.backgroundColor = 'blue'; }
             4       cell.style.color = 'black';
             5       cell.style.height = '50px';
             6       cell.style.width = '50px';

Let me explain. In first line, you take constant 65, which is ASCII code for letter 'A'. While you change the letter by rows, you add i counter to it, so you get 65+0, 65+1, ..., 65+7. Their ASCII equivalents (which you get with String.fromCharCode()) are A, B, ..., H. Now when you have that letter, easily add number of cell to it (j + 1). You can remove '1' and leave just j and make inner loop go from 1 to 8.

Lines 2, 3: Colors are alternating - every second row have the same color. So, just test if is i+j dividable by 2.

For adding figure, you have to make some function that will do cell.innerHTML = <SOME IMAGE>. But, I guess, it's for second question.

Hope I helped you understand the logic.

Upvotes: 1

Nate
Nate

Reputation: 661

You can tie an ID to the cell, and then use that ID to reference and updated the background as needed. Here is one example using your code: http://jsfiddle.net/7Z6hJ

function CreateTable(){
            var poz = document.getElementById('space');

            // createing table adn inserting into document
            tab = document.createElement('table');
            poz.appendChild(tab);

            tab.border = '5';

            for (var i = 0; i < 8; i++){
                // creating row and inserting into document
                var row = tab.insertRow(i);

                for(var j = 0; j < 8; j++){
                    // creating cells and fill with data (numbers)
                    var cell = row.insertCell(j);
                    var idStr = String.fromCharCode(97 + i).toUpperCase() + (j+1);
                    cell.innerHTML = idStr;
                    cell.id = idStr;
                    cell.style.backgroundColor = 'blue';
                    cell.style.color = 'white';
                    cell.style.height = '50px';
                    cell.style.width = '50px';

                };
            };

        }
function updateRow(idStr)
{
    cell =  document.getElementById(idStr);    
    if(cell != null)
    {
        cell.style.backgroundColor = 'red';
    }
}

As some have mentioned, there is probably a better way to go about this (using css and jQuery, etc) but this answer sticks with what you have so far.

Upvotes: 2

Wireblue
Wireblue

Reputation: 1509

Create a new variable inside the top loop to save the "letter" name of the row (eg. A, B, C).

// creating row and inserting into document
var row = tab.insertRow(i);
var row_letter = String.fromCharCode(65 + i);

Then in the second loop combine the row name and column number.

cell.innerHTML = row_letter + j;

Upvotes: 1

Related Questions