diff --git a/projects/chess/index.html b/projects/chess/index.html new file mode 100644 index 0000000..5ec8bbe --- /dev/null +++ b/projects/chess/index.html @@ -0,0 +1,15 @@ +HTML: +html + + + + + + + Chess Game + + +
+ + + \ No newline at end of file diff --git a/projects/chess/script.css b/projects/chess/script.css new file mode 100644 index 0000000..4971089 --- /dev/null +++ b/projects/chess/script.css @@ -0,0 +1,27 @@ +body { + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + margin: 0; + } + + .board { + display: grid; + grid-template-columns: repeat(8, 50px); + grid-template-rows: repeat(8, 50px); + } + + .cell { + width: 50px; + height: 50px; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid #ccc; + } + + .cell:nth-child(even) { + background-color: #eee; + } + \ No newline at end of file diff --git a/projects/chess/script.js b/projects/chess/script.js new file mode 100644 index 0000000..52d855b --- /dev/null +++ b/projects/chess/script.js @@ -0,0 +1,50 @@ +document.addEventListener("DOMContentLoaded", function () { + const board = document.getElementById("board"); + + // Create chessboard + for (let row = 0; row < 8; row++) { + for (let col = 0; col < 8; col++) { + const cell = document.createElement("div"); + cell.className = "cell"; + cell.dataset.row = row; + cell.dataset.col = col; + board.appendChild(cell); + } + } + + // Initial chess pieces setup + const pieces = [ + ["♜", "♞", "♝", "♛", "♚", "♝", "♞", "♜"], + ["♟", "♟", "♟", "♟", "♟", "♟", "♟", "♟"], + ["", "", "", "", "", "", "", ""], + ["", "", "", "", "", "", "", ""], + ["", "", "", "", "", "", "", ""], + ["", "", "", "", "", "", "", ""], + ["♙", "♙", "♙", "♙", "♙", "♙", "♙", "♙"], + ["♖", "♘", "♗", "♕", "♔", "♗", "♘", "♖"], + ]; + + // Place pieces on the board + const cells = document.querySelectorAll(".cell"); + cells.forEach((cell) => { + const row = cell.dataset.row; + const col = cell.dataset.col; + cell.textContent = pieces[row][col]; + }); + + // Piece movement + let selectedPiece = null; + + cells.forEach((cell) => { + cell.addEventListener("click", () => { + if (!selectedPiece) { + selectedPiece = cell; + } else { + // Move the piece + cell.textContent = selectedPiece.textContent; + selectedPiece.textContent = ""; + selectedPiece = null; + } + }); + }); + }); \ No newline at end of file