From 6dba83d926ed32b24e4cc170f55721d7f8a81a55 Mon Sep 17 00:00:00 2001 From: Thomas de Brettes <thomas.de-brettes@etu.ec-lyon.fr> Date: Wed, 19 Mar 2025 09:12:13 +0100 Subject: [PATCH] =?UTF-8?q?mise=20en=20place=20=C3=A9chiquier?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- htdocs/chess.js | 66 +++++++++++++++++++++++++++++++++++---- htdocs/page_jeu.html | 7 +---- htdocs/style_page_jeu.css | 32 +++++++++++++++++++ 3 files changed, 93 insertions(+), 12 deletions(-) create mode 100644 htdocs/style_page_jeu.css diff --git a/htdocs/chess.js b/htdocs/chess.js index 7d4ddaf..e9c201a 100644 --- a/htdocs/chess.js +++ b/htdocs/chess.js @@ -1,12 +1,66 @@ -window.onload = function() { - const canvas = document.getElementById("chessboard"); - const ctx = canvas.getContext("2d"); - const size = 60; +const canvas = document.getElementById("chessboard"); +const ctx = canvas.getContext("2d"); +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(); diff --git a/htdocs/page_jeu.html b/htdocs/page_jeu.html index 777cd7b..41ef9e2 100644 --- a/htdocs/page_jeu.html +++ b/htdocs/page_jeu.html @@ -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> diff --git a/htdocs/style_page_jeu.css b/htdocs/style_page_jeu.css new file mode 100644 index 0000000..278b115 --- /dev/null +++ b/htdocs/style_page_jeu.css @@ -0,0 +1,32 @@ +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 */ +} -- GitLab