J'ai déjà essayé de poser cette question, mais je ne l'ai pas très bien formulée, alors je réessaye.

Ce que je veux:

Avoir une fonction qui prend deux paramètres, le côté (sombre ou blanc) et le nombre (1-9). Dans la fonction elle-même, il y aura deux "fonctions" "si" (une étant "si", la seconde étant "si sinon"), toutes deux utilisées pour vérifier le côté et le nombre et exécuter les fonctions de règles "spéciales" qu'elles peuvent être ( Exemple : vérifier où c'est ou non le premier mouvement d'un pion pour voir s'il peut ou non se déplacer de deux cases vers le haut). Dans la fonction If, il y aurait deux autres fonctions pour vérifier de quel côté se trouve le pion pour voir s'il doit monter ou descendre.

Problème:

J'ai rencontré un problème où le journal de la console google ne me donnerait aucune erreur et la fonction exécuterait les fonctions If. Pour cette raison, je ne peux pas savoir quel est le problème.

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>
-1
Llamalegs007 14 mars 2019 à 18:18

2 réponses

Meilleure réponse

Il y a plusieurs problèmes avec votre tentative :

  • Ne créez pas de variables séparées pour chaque pièce, comme darkPawn1. Au lieu de cela, placez ces objets dans une représentation matricielle du tableau.
  • firstPawnMove obtient la valeur de chaîne « ture », ce qui est un peu étrange (avez-vous voulu « vrai » ?). Tout d'abord, vous pouvez utiliser des booléens en JavaScript (true sans guillemets). Deuxièmement, vous voudrez enregistrer la position actuelle de chaque pièce, et lorsque vous l'aurez, vous n'aurez pas vraiment besoin firstPawnMove plus, car cela peut être dérivé directement de la position actuelle du pion et de sa couleur.
  • Donnez aux objets de pièce un attribut color
  • if (side + 'Pawn' + number + '.firstPawnMove' == 'false') { est une mauvaise condition. Ce sera toujours faux. Vous aviez probablement l'intention d'accéder dynamiquement à l'une des variables, comme darkPawn1, mais comme je propose de m'éloigner de ce concept de variables, ce point n'est plus pertinent
  • if (side = 'dark') { attribue 'dark' à side. Vous aviez l'intention de faire ==.
  • top: '-=' + 50 + 'px' n'est pas un code JavaScript valide. Vous aviez peut-être l'intention d'appliquer des modifications à une propriété CSS, mais cela nécessite une syntaxe complètement différente
  • ...plusieurs autres choses qui pourraient être améliorées...

Pour résoudre la situation, vous devez recommencer à zéro, car la plupart de votre conception et de votre code doivent être modifiés de toute façon.

Voici une façon de mettre en œuvre un échiquier simple. Il utilise une classe pour une pièce, un carré et le plateau. L'instance Board a des instances Square, qui à leur tour peuvent avoir une instance Piece ou non. Certaines méthodes permettent le rendu, l'exécution de mouvements et l'obtention de la liste des mouvements.

Ce n'est bien sûr qu'un début. Vous devrez l'étendre à d'autres vérifications, fonctionnalités, interaction avec l'utilisateur, 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>
0
trincot 14 mars 2019 à 21:06

Ce format viril fonctionne très bien et m'a aidé à me faire une bien meilleure idée de ce que je devrais viser.

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>
0
Llamalegs007 15 mars 2019 à 15:43