I tried asking this question before but didn't word it all that well so i'am try again.
What I want:
Have a function that takes two parameters, side (dark or white) and number (1-9). In the function itself there's going to be two "if" "functions" (one being 'If', the second being 'if else') both used to checking side and number and runing the any 'special'rules functions their may be (Example: checking where or not it's a pawn's first move so to see whether or not it can move two spaces up). In the If function their would be two more functions to check what side the pawn is on to see if it should move up or down.
Problem:
I ran into a problem where the google console log won't give me any error's and the function would run the If functions. Because of this I unable to know what the problem is.
Code:
var darkPawn1 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn2 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn3 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn4 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn5 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn6 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn7 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn8 = {
stats: 'in',
firstPawnMove: 'ture'
};
var darkPawn9 = {
stats: 'in',
firstPawnMove: 'ture'
};
var moveCheck = function(side, number) {
var pawnInfo = side + 'Pawn' + number;
var pawnTest = pawnInfo + '.firstPawnMove'
console.log('log check:' + side + ' ' + number);
console.log('Pawn Move Check' + ' ' + (pawnInfo + '.firstPawnMove'));
if (side + 'Pawn' + number + '.firstPawnMove' == 'false') {
if (side = 'dark') {
top: '-=' + 50 + 'px'
}
else if (side = 'white') {
top: '+=' + 50 + 'px'
}
} else if (side + 'Pawn' + number + '.firstPawnMove' == 'ture') {
if (side = 'dark') {
top: '-=' + 100 + 'px',
side + 'Pawn' + number + '.firstPawnMove' == 'false'
}
else if (side = 'white') {
top: '+=' + 100 + 'px',
side + 'Pawn' + number + '.firstPawnMove' == 'false'
}
}
};
document.getElementById('darkPawnButton1').onclick = moveCheck('dark', '1');#darkChessPlayerId {}
#darkBishop1 {
height: 50px;
width: 50px;
position: absolute;
}
#darkBishop2 {
height: 50px;
width: 50px;
position: absolute;
}
#darkKnight1 {
height: 50px;
width: 50px;
position: absolute;
}
#darkKnight2 {
height: 50px;
width: 50px;
position: absolute;
}
#darkTower1 {
height: 50px;
width: 50px;
position: absolute;
}
#darkTower2 {
height: 50px;
width: 50px;
position: absolute;
}
#darkQueen {
height: 50px;
width: 50px;
position: absolute;
}
#darkKing {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn1 {
top: 270px;
left: 7px;
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn2 {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn3 {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn4 {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn5 {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn6 {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn7 {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn8 {
height: 50px;
width: 50px;
position: absolute;
}
#darkPawn9 {
height: 50px;
width: 50px;
position: absolute;
}
<!-- White Side Peaces -->#whiteBishop1 {
height: 50px;
width: 50px;
position: absolute;
}
#whiteBishop2 {
height: 50px;
width: 50px;
position: absolute;
}
#whiteKnight1 {
height: 50px;
width: 50px;
position: absolute;
}
#whiteKnight2 {
height: 50px;
width: 50px;
position: absolute;
}
#whiteTower1 {
height: 50px;
width: 50px;
position: absolute;
}
#whiteTower2 {
height: 50px;
width: 50px;
position: absolute;
}
#whiteQueen {
height: 50px;
width: 50px;
position: absolute;
}
#whiteKing {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn1 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn2 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn3 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn4 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn5 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn6 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn7 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn8 {
height: 50px;
width: 50px;
position: absolute;
}
#whitePawn9 {
height: 50px;
width: 50px;
position: absolute;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id='playFieldId' src="http://4.bp.blogspot.com/_zJfGdkTGq6U/R6coIhq4e7I/AAAAAAAAAD4/joyxFXtLZRw/s400/chessboard.jpg" />
<button id='boxesAnimationId'>
Click to run password animation puzzle
</button>
<button id='darkPawnButton1'>
test move PAWN
</button>
<div id='darkChessPlayerId'>
<img id='darkBishop1' src="https://upload.wikimedia.org/wikipedia/commons/8/81/Chess_bdt60.png" />
<img id='darkBishop2' src="https://upload.wikimedia.org/wikipedia/commons/8/81/Chess_bdt60.png" />
<img id='darkKnight1' src="https://upload.wikimedia.org/wikipedia/commons/f/f1/Chess_ndt60.png" />
<img id='darkKnight2' src="https://upload.wikimedia.org/wikipedia/commons/f/f1/Chess_ndt60.png" />
<img id='darkTower1' src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Chess_rdt60.png" />
<img id='darkTower2' src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Chess_rdt60.png" />
<img id='darkQueen' src="https://upload.wikimedia.org/wikipedia/commons/a/af/Chess_qdt60.png" />
<img id='darkKing' src="https://upload.wikimedia.org/wikipedia/commons/e/e3/Chess_kdt60.png" />
<img id='darkPawn1' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn2' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn3' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn4' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn5' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn6' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn7' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn8' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
<img id='darkPawn9' src="https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png" />
</div>
<div id='whiteChessPlayerId'>
<img id='whiteBishop1' src="https://upload.wikimedia.org/wikipedia/commons/9/9b/Chess_blt60.png" />
<img id='whiteBishop2' src="https://upload.wikimedia.org/wikipedia/commons/9/9b/Chess_blt60.png" />
<img id='whiteKnight1' src="https://upload.wikimedia.org/wikipedia/commons/2/28/Chess_nlt60.png" />
<img id='whiteKnight2' src="https://upload.wikimedia.org/wikipedia/commons/2/28/Chess_nlt60.png" />
<img id='whiteTower1' src="https://upload.wikimedia.org/wikipedia/commons/5/5c/Chess_rlt60.png" />
<img id='whiteTower2' src="https://upload.wikimedia.org/wikipedia/commons/5/5c/Chess_rlt60.png" />
<img id='whiteQueen' src="https://upload.wikimedia.org/wikipedia/commons/4/49/Chess_qlt60.png" />
<img id='whiteKing' src="https://upload.wikimedia.org/wikipedia/commons/3/3b/Chess_klt60.png" />
<img id='whitePawn1' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn2' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn3' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn4' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn5' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn6' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn7' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn8' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
<img id='whitePawn9' src="https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png" />
</div>There are several issues with your attempt:
darkPawn1. Instead place those objects in an array representation of the board.firstPawnMove gets string value "ture", which is a bit odd (did you intend "true"?). First, you can use booleans in JavaScript (true without quotes). Secondly, you'll want to register the current position of each piece, and when you have that, you don't really need
firstPawnMove anymore, as that can be derived directly from the current position of the pawn and its color.color attributeif (side + 'Pawn' + number + '.firstPawnMove' == 'false') { is a wrong condition. It will always be false. You probably intended to dynamically access one of the variables, like darkPawn1, but as I propose to step away from that variables-concept, this point is no longer relevantif (side = 'dark') { assigns 'dark' to side. You intended to do ==.top: '-=' + 50 + 'px' is not valid JavaScript. You maybe intended to apply some change to some CSS property, but that requires a completely different syntaxTo fix the situation you'd need to start from scratch, as most of your design and code should be modified anyway.
Here is one way to implement a simple chess board. It uses a class for a Piece, a Square and the Board. The Board instance has Square instances, which in turn may have a Piece instance or not. Some methods allow for rendering, performing moves and getting the move list.
This is of course just a start. You'd have to extend it to other checks, features, user-interaction, ...etc.
class Piece {
constructor(letter) {
this.letter = letter;
this.type = letter.toLowerCase(); // k, q, b, n, r or p
this.isWhite = letter !== this.type; // Capital <==> white
this.square = null;
this.name = { k: "king", q: "queen", b: "bishop", n: "knight", r: "rook", p: "pawn" }[this.type];
}
remove() {
if (this.square) this.square.piece = null;
this.square = null;
return this;
}
moveTo(square) {
this.remove();
if (square.piece) square.piece.remove();
this.square = square;
square.piece = this;
return this;
}
moveList() {
let squares;
const {square} = this;
if (!square) return [];
if (this.type == "p") {
squares = (square.row === (this.isWhite ? 6 : 1) ? [1,2] : [1]).map(i =>
square.board.rows[square.row+(this.isWhite ? -i : i)][square.column]
);
// TODO: Pawn capturing moves should be generated here
} else {
// TODO: Other pieces' moves should be generated here
}
return squares;
}
}
class Square {
constructor(board, row, column) {
this.board = board;
this.row = row;
this.column = column;
this.name = "abcdefgh"[column]+(8-row);
this.piece = null;
}
toString() {
return this.name;
}
}
class Board {
constructor(arr) {
this.rows = arr.map((chars, row) => {
return Array.from(chars, (chr, column) => {
const square = new Square(this, row, column);
if (chr !== ".") (new Piece(chr)).moveTo(square);
this[square.name] = square;
return square;
})
});
}
html() {
return '<table class="chessboard">' + this.rows.map(row =>
"<tr>" + row.map(({piece}) =>
'<td><div class="' + (piece ? piece.letter : "") + '"></div></td>'
).join`` + "</tr>"
).join`` + "</table>";
}
}
// Create a chess board instance with pieces in their initial positions
const board = new Board([
"rnbqkbnr",
"pppppppp",
"........",
"........",
"........",
"........",
"PPPPPPPP",
"RNBQKBNR"
]);
// Show the board
document.querySelector("#container").innerHTML = board.html();
// Get the piece object at b2
const piece = board.b2.piece;
// Output info about that piece
console.log(piece.name + " at " + piece.square + " can move to " + piece.moveList());
// Perform a move
piece.moveTo(board.b4);
// Wait a bit and then show board again
setTimeout(() => document.querySelector("#container").innerHTML = board.html(), 500);.chessboard { border: 1px solid; border-collapse: collapse; border-spacing: 0; }
.chessboard td { width: 18px; height: 18px; }
.chessboard tr:nth-child(2n) td:nth-child(2n+1),
.chessboard tr:nth-child(2n+1) td:nth-child(2n) { background: silver; }
.chessboard div { background-size: contain; width: 100%; height: 100% }
.k { background: url(https://upload.wikimedia.org/wikipedia/commons/e/e3/Chess_kdt60.png); }
.q { background: url(https://upload.wikimedia.org/wikipedia/commons/a/af/Chess_qdt60.png); }
.b { background: url(https://upload.wikimedia.org/wikipedia/commons/8/81/Chess_bdt60.png); }
.n { background: url(https://upload.wikimedia.org/wikipedia/commons/f/f1/Chess_ndt60.png); }
.r { background: url(https://upload.wikimedia.org/wikipedia/commons/a/a0/Chess_rdt60.png); }
.p { background: url(https://upload.wikimedia.org/wikipedia/commons/c/cd/Chess_pdt60.png); }
.K { background: url(https://upload.wikimedia.org/wikipedia/commons/3/3b/Chess_klt60.png); }
.Q { background: url(https://upload.wikimedia.org/wikipedia/commons/4/49/Chess_qlt60.png); }
.B { background: url(https://upload.wikimedia.org/wikipedia/commons/9/9b/Chess_blt60.png); }
.N { background: url(https://upload.wikimedia.org/wikipedia/commons/2/28/Chess_nlt60.png); }
.R { background: url(https://upload.wikimedia.org/wikipedia/commons/5/5c/Chess_rlt60.png); }
.P { background: url(https://upload.wikimedia.org/wikipedia/commons/0/04/Chess_plt60.png); }<div id="container"></div>