Это способ, которым я могу сделать работающий ход шахматной пешки, используя параметры?

Question

Я пытался задать этот вопрос раньше, но не сказал это все так хорошо, поэтому я попробую еще раз.

Что я хочу:

Имейте функцию, которая принимает два параметра, сторона (темный или белый) и число (1-9). В самой функции будет две «if» «функции» (одна - «If», вторая - «if else»), которые оба используются для проверки стороны и числа и запуска любых функций «special» правил, которыми они могут быть ( Пример: проверка, где или нет это первый ход пешки, чтобы увидеть, может ли она сдвинуться на две позиции вверх). В функции If их было бы еще две функции, чтобы проверить, на какой стороне находится пешка, чтобы увидеть, должна ли она двигаться вверх или вниз.

Проблема:

Я столкнулся с проблемой, из-за которой журнал консоли Google не выдает никаких ошибок, и функция запускает функции If. Из-за этого я не смог понять, в чем проблема.

Код:

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>

Answer 1

Это мужественно прекрасно работает как формат и помогло мне лучше понять, к чему я должен стремиться.

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>

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>

Answer 2

Есть несколько проблем с вашей попыткой:

• Не создавайте отдельные переменные для каждой части, как darkPawn1.Вместо этого разместите эти объекты в массиве представления доски.
• firstPawnMove получает строковое значение "ture", что немного странно (вы намеревались "true"?).Во-первых, вы можете использовать логические значения в JavaScript (true без кавычек).Во-вторых, вы захотите зарегистрировать текущую позицию каждой фигуры, и когда она у вас есть, вам больше не понадобится firstPawnMove, так как она может быть получена непосредственно из текущей позиции пешки и ее цвета.
• Дайте объектам объекта атрибут color
• if (side + 'Pawn' + number + '.firstPawnMove' == 'false') { - это неправильное условие.Это всегда будет ложью.Вы, вероятно, намеревались получить динамический доступ к одной из переменных, например darkPawn1, но, поскольку я предлагаю отойти от этой концепции переменных, эта точка больше не актуальна
• if (side = 'dark') { назначает 'dark' для side.Вы намеревались сделать ==.
• top: '-=' + 50 + 'px' недопустимым JavaScript.Возможно, вы намеревались применить некоторые изменения к какому-либо свойству CSS, но для этого требуется совершенно другой синтаксис
• ... несколько других вещей, которые можно улучшить ...

Чтобы исправитьСитуацию, которую вам нужно начинать с нуля, так как большая часть вашего дизайна и кода должна быть изменена в любом случае.

Вот один из способов реализовать простую шахматную доску.Он использует класс для фигуры, квадрата и доски.Экземпляр Board имеет квадратные экземпляры, которые, в свою очередь, могут иметь экземпляр Piece или нет.Некоторые методы позволяют выполнять рендеринг, выполнение ходов и получение списка ходов.

Это, конечно, только начало.Вам придется распространить его на другие проверки, функции, взаимодействие с пользователем и т. Д.

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>