At the moment I'm just trying to display the chessboard, while giving me the option of changing the board setup at a later date. The code I have here is aiming to display a chessboard (of some kind) to the webpage, however, when I call the function in html, I can't get the code to display the board. Any help with this would be greatly appreciated as I'm still learning the JavaScript language.
function displayBoard() {
//Initiating peice values for white
var wking = 10, wkingValue = "♕";
var wqueen = 9, wqueenValue = "♔";
var wrook = 5, wrookValue = "♖";
var wbishop = 3.5, wbishopValue = "♗";
var wknight = 3, wknightValue = "♘";
var wpawn = 1, wpawnValue = "♙";
//Initiating peice values for black
var bking = -wking, bkingValue = "♛";
var bqueen = -wqueen, bqueenValue = "♚";
var brook = -wrook, brookValue = "♜";
var bbishop = -wbishop, bbishopValue = "♝";
var bknight = -wknight, bknightValue = "♞";
var bpawn = -wpawn, bpawnValue = "♟";
//Initialising final string
var chessboardTable = "";
//Initialising board array
var defaultBoardArray = [[brook, bknight, bbishop, bqueen, bking, bbishop, bknight, brook],
[bpawn, bpawn, bpawn, bpawn, bpawn, bpawn, bpawn, bpawn],
[0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0],
[wpawn, wpawn, wpawn, wpawn, wpawn, wpawn, wpawn, wpawn],
[wrook, wknight, wbishop, wqueen, wking, wbishop, wknight, wrook]];
//Initialising search squares
var fLetter = "a";
var fNumber = "1";
var initialfillRank = false;
//Beginning main code functions
var peice = "";
var defValue = "";
var defClass = "";
var rank = "";
var file = "";
//Entering Looping Functions
chessboardTable += "<table id='chess_board' cellpadding='0' cellspacing='0'>";
chessboardTable += "<tr>";
// i = rank; k = file;
for (i = 8; i <= 0; i--) {
for (k = 1; k <= 8; k++) {
//Finding grid coordinates
switch (k) {
case (1):
file === "a";
break;
case (2):
file === "b";
break;
case (3):
file === "c";
break;
case (4):
file === "d";
break;
case (5):
file === "e";
break;
case (6):
file === "f";
break;
case (7):
file === "g";
break;
case (8):
file === "h";
break;
default:
break;
}
switch (i) {
case (8):
rank === "8";
initialfillRank = true;
break;
case (7):
rank === "7";
initialfillRank = true;
break;
case (6):
rank === "6";
break;
case (5):
rank === "5";
break;
case (4):
rank === "4";
break;
case (3):
rank === "3";
break;
case (2):
rank === "2";
initialfillRank = true;
break;
case (1):
rank === "1";
initialfillRank = true;
break;
default:
break;
}
//Finding the class names
if (rank === 8) {
if (file === "a" || file === "h") {
defClass === "brook";
defValue === brookValue;
}
else if (file === "b" || file === "g") {
defClass === "bknight";
defValue === bknightValue;
}
else if (file === "c" || file === "f") {
defClass === "bbishop";
defValue === bbishopValue;
}
else if (file === "d") {
defClass === "bqueen";
defValue === bqueenValue;
}
else if (file === "e") {
defClass === "bking";
defValue === bkingValue;
}
}
else if (rank === 7) {
defClass === "bpawn";
defValue === bpawnValue;
}
else if (rank === 1) {
if (file === "a" || file === "h") {
defClass === "wrook";
defValue === wrookValue;
}
else if (file === "b" || file === "g") {
defClass === "wknight";
defValue === wknightValue;
}
else if (file === "c" || file === "f") {
defClass === "wbishop";
defValue === wbishopValue;
}
else if (file === "d") {
defClass === "wqueen";
defValue === wqueenValue;
}
else if (file === "e") {
defClass === "wking";
defValue === wkingValue;
}
}
else if (rank === 2) {
defClass === "wpawn";
defValue === wpawnValue;
}
//Printing the code
if (initialfillRank === true) {
chessboardTable += "<td id='";
chessboardTable += file;
chessboardTable += rank;
chessboardTable += "'><a href='#' class='";
chessboardTable += defClass;
chessboardTable += "'>";
chessboardTable += defValue;
chessboardTable += "</a></td>";
}
else if (initialfillRank === false) {
chessboardTable += "<td id='";
chessboardTable += file;
chessboardTable += rank;
chessboardTable += "'></td>";
}
if (file === "h" && rank !== 1) {
chessboardTable += "</tr>";
chessboardTable += "<tr>";
}
}
}
chessboardTable += "</table>";
document.write(chessboardTable);
}
I made a working fiddle. There is still issue with the first loop. You have to count from 7 to 0, otherwise you get 9 squares on Y axis.
for (i = 7; i >= 0; i--) {
// EDIT
I managed to get the pieces working. No need to use variable rank.