Skip to content
Snippets Groups Projects
Commit 6dba83d9 authored by De Brettes Thomas's avatar De Brettes Thomas
Browse files

mise en place échiquier

parent 20951e56
No related branches found
No related tags found
No related merge requests found
window.onload = function() {
const canvas = document.getElementById("chessboard");
const ctx = canvas.getContext("2d");
const size = 60;
const size = 60; // Taille des cases
// Disposition initiale de l'échiquier
const board = [
["T", "C", "F", "Q", "K", "F", "C", "T"],
["P", "P", "P", "P", "P", "P", "P", "P"],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["", "", "", "", "", "", "", ""],
["p", "p", "p", "p", "p", "p", "p", "p"],
["t", "c", "f", "q", "k", "f", "c", "t"]
];
// Charger les images des pièces
const pieceImages = {
"P": "pion_blanc.png",
"p": "pion_noir.png",
"T": "tour_blanc.png",
"t": "tour_noir.png",
"C": "cavalier_blanc.png",
"c": "cavalier_noir.png",
"F": "fou_blanc.png",
"f": "fou_noir.png",
"Q": "reine_blanc.png",
"q": "reine_noir.png",
"K": "roi_blanc.png",
"k": "roi_noir.png"
};
// Dessiner l'échiquier avec les couleurs des cases
function drawBoard() {
for (let row = 0; row < 8; row++) {
for (let col = 0; col < 8; col++) {
ctx.fillStyle = (row + col) % 2 === 0 ? "white" : "black";
ctx.fillStyle = (row + col) % 2 === 0 ? "#F5DEB3" : "#8B4513";
ctx.fillRect(col * size, row * size, size, size);
}
}
}
// Dessiner les pièces sur l'échiquier
function drawPieces() {
for (let row = 0; row < 8; row++) {
for (let col = 0; col < 8; col++) {
const piece = board[row][col];
if (piece !== "") {
let img = new Image();
img.src = "images/" + pieceImages[piece];
img.onload = function () {
ctx.drawImage(img, col * size, row * size, size, size);
};
}
}
}
}
// Fonction principale pour dessiner l'échiquier
function draw() {
drawBoard();
drawPieces();
}
// Appeler la fonction pour afficher l'échiquier
draw();
......@@ -4,12 +4,7 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jeu d'échecs</title>
<style>
canvas {
border: 2px solid black;
display: block;
margin: 20px auto;
}
<style src="style_page_jeu.css">
</style>
</head>
<body>
......
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0e5d8;
}
#chessboard {
display: grid;
grid-template-columns: repeat(8, 60px);
grid-template-rows: repeat(8, 60px);
border: 5px solid #3e2f1e;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}
.square {
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
.dark {
background-color: #8B4513; /* Marron */
}
.light {
background-color: #F5DEB3; /* Beige */
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment