Spaces:
Running
Running
Update index.html
Browse files- index.html +108 -82
index.html
CHANGED
|
@@ -12,6 +12,7 @@
|
|
| 12 |
--primary-light: #34495e;
|
| 13 |
--highlight: #f1c40f;
|
| 14 |
--move-highlight: rgba(46, 204, 113, 0.4);
|
|
|
|
| 15 |
}
|
| 16 |
|
| 17 |
* {
|
|
@@ -21,20 +22,39 @@
|
|
| 21 |
}
|
| 22 |
|
| 23 |
body {
|
|
|
|
| 24 |
background: var(--primary-dark);
|
| 25 |
color: #ecf0f1;
|
| 26 |
min-height: 100vh;
|
| 27 |
display: flex;
|
| 28 |
-
|
| 29 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 30 |
}
|
| 31 |
|
| 32 |
.board-container {
|
| 33 |
width: var(--board-size);
|
| 34 |
height: var(--board-size);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 35 |
display: grid;
|
| 36 |
grid-template-columns: repeat(8, 1fr);
|
| 37 |
grid-template-rows: repeat(8, 1fr);
|
|
|
|
|
|
|
|
|
|
| 38 |
}
|
| 39 |
|
| 40 |
.square {
|
|
@@ -42,145 +62,151 @@
|
|
| 42 |
align-items: center;
|
| 43 |
justify-content: center;
|
| 44 |
font-size: calc(var(--square-size) * 0.7);
|
| 45 |
-
|
|
|
|
| 46 |
position: relative;
|
|
|
|
| 47 |
}
|
| 48 |
|
| 49 |
.white { background: #f0d9b5; }
|
| 50 |
.black { background: #b58863; }
|
| 51 |
-
|
| 52 |
-
|
| 53 |
-
|
| 54 |
-
|
|
|
|
|
|
|
|
|
|
| 55 |
position: absolute;
|
|
|
|
|
|
|
| 56 |
}
|
| 57 |
|
| 58 |
-
.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 59 |
</style>
|
| 60 |
</head>
|
| 61 |
<body>
|
| 62 |
-
<div class="
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 63 |
<script>
|
| 64 |
class ChessGame {
|
| 65 |
constructor() {
|
| 66 |
this.board = this.createInitialBoard();
|
| 67 |
this.currentPlayer = 'white';
|
| 68 |
this.selectedPiece = null;
|
| 69 |
-
this.
|
| 70 |
-
this.renderBoard();
|
| 71 |
}
|
| 72 |
|
| 73 |
createInitialBoard() {
|
| 74 |
return [
|
| 75 |
-
['
|
| 76 |
-
['
|
| 77 |
[null, null, null, null, null, null, null, null],
|
| 78 |
[null, null, null, null, null, null, null, null],
|
| 79 |
[null, null, null, null, null, null, null, null],
|
| 80 |
[null, null, null, null, null, null, null, null],
|
| 81 |
-
['
|
| 82 |
-
['
|
| 83 |
];
|
| 84 |
}
|
| 85 |
|
| 86 |
-
|
| 87 |
-
const
|
| 88 |
-
|
| 89 |
|
| 90 |
for (let row = 0; row < 8; row++) {
|
| 91 |
for (let col = 0; col < 8; col++) {
|
| 92 |
const square = document.createElement('div');
|
| 93 |
-
square.
|
| 94 |
square.dataset.row = row;
|
| 95 |
square.dataset.col = col;
|
| 96 |
-
square.
|
| 97 |
|
| 98 |
const piece = this.board[row][col];
|
| 99 |
if (piece) {
|
| 100 |
-
const
|
| 101 |
-
|
| 102 |
-
|
|
|
|
| 103 |
}
|
| 104 |
|
| 105 |
-
|
| 106 |
-
square.classList.add('valid-move');
|
| 107 |
-
}
|
| 108 |
-
|
| 109 |
-
if (this.selectedPiece && this.selectedPiece.row === row && this.selectedPiece.col === col) {
|
| 110 |
-
square.classList.add('selected');
|
| 111 |
-
}
|
| 112 |
-
|
| 113 |
-
boardContainer.appendChild(square);
|
| 114 |
}
|
| 115 |
}
|
| 116 |
}
|
| 117 |
|
| 118 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 119 |
const piece = this.board[row][col];
|
| 120 |
|
| 121 |
if (this.selectedPiece) {
|
| 122 |
-
|
| 123 |
-
this.makeMove(this.selectedPiece.row, this.selectedPiece.col, row, col);
|
| 124 |
-
this.selectedPiece = null;
|
| 125 |
-
this.validMoves = [];
|
| 126 |
-
} else {
|
| 127 |
-
this.selectedPiece = null;
|
| 128 |
-
this.validMoves = [];
|
| 129 |
-
}
|
| 130 |
} else if (piece && this.isCurrentPlayerPiece(piece)) {
|
| 131 |
-
this.
|
| 132 |
-
this.validMoves = this.getValidMoves(row, col);
|
| 133 |
}
|
| 134 |
-
this.renderBoard();
|
| 135 |
}
|
| 136 |
|
| 137 |
isCurrentPlayerPiece(piece) {
|
| 138 |
-
return this.currentPlayer === 'white'
|
|
|
|
| 139 |
}
|
| 140 |
|
| 141 |
-
|
| 142 |
-
|
| 143 |
-
|
| 144 |
-
|
| 145 |
-
'♖': [[-1, 0], [1, 0], [0, -1], [0, 1]],
|
| 146 |
-
'♜': [[-1, 0], [1, 0], [0, -1], [0, 1]],
|
| 147 |
-
'♗': [[-1, -1], [-1, 1], [1, -1], [1, 1]],
|
| 148 |
-
'♝': [[-1, -1], [-1, 1], [1, -1], [1, 1]],
|
| 149 |
-
'♕': [[-1, 0], [1, 0], [0, -1], [0, 1], [-1, -1], [-1, 1], [1, -1], [1, 1]],
|
| 150 |
-
'♛': [[-1, 0], [1, 0], [0, -1], [0, 1], [-1, -1], [-1, 1], [1, -1], [1, 1]],
|
| 151 |
-
'♘': [
|
| 152 |
-
[-2, -1], [-2, 1], [2, -1], [2, 1],
|
| 153 |
-
[-1, -2], [-1, 2], [1, -2], [1, 2]
|
| 154 |
-
],
|
| 155 |
-
'♞': [
|
| 156 |
-
[-2, -1], [-2, 1], [2, -1], [2, 1],
|
| 157 |
-
[-1, -2], [-1, 2], [1, -2], [1, 2]
|
| 158 |
-
]
|
| 159 |
-
}[piece] || [];
|
| 160 |
-
|
| 161 |
-
for (const [dx, dy] of directions) {
|
| 162 |
-
let r = row + dx, c = col + dy;
|
| 163 |
-
while (r >= 0 && r < 8 && c >= 0 && c < 8 && !this.board[r][c]) {
|
| 164 |
-
moves.push([r, c]);
|
| 165 |
-
r += dx; c += dy;
|
| 166 |
-
if ('♖♜♗♝♕♛'.includes(piece)) break;
|
| 167 |
-
}
|
| 168 |
-
}
|
| 169 |
-
return moves;
|
| 170 |
-
}
|
| 171 |
-
|
| 172 |
-
isValidMove(row, col) {
|
| 173 |
-
return this.validMoves.some(move => move[0] === row && move[1] === col);
|
| 174 |
}
|
| 175 |
|
| 176 |
-
|
| 177 |
-
|
| 178 |
-
this.board[
|
|
|
|
| 179 |
this.currentPlayer = this.currentPlayer === 'white' ? 'black' : 'white';
|
|
|
|
|
|
|
| 180 |
}
|
| 181 |
}
|
| 182 |
|
| 183 |
-
|
| 184 |
</script>
|
| 185 |
</body>
|
| 186 |
</html>
|
|
|
|
| 12 |
--primary-light: #34495e;
|
| 13 |
--highlight: #f1c40f;
|
| 14 |
--move-highlight: rgba(46, 204, 113, 0.4);
|
| 15 |
+
--check-highlight: rgba(231, 76, 60, 0.4);
|
| 16 |
}
|
| 17 |
|
| 18 |
* {
|
|
|
|
| 22 |
}
|
| 23 |
|
| 24 |
body {
|
| 25 |
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
|
| 26 |
background: var(--primary-dark);
|
| 27 |
color: #ecf0f1;
|
| 28 |
min-height: 100vh;
|
| 29 |
display: flex;
|
| 30 |
+
}
|
| 31 |
+
|
| 32 |
+
.container {
|
| 33 |
+
display: grid;
|
| 34 |
+
grid-template-columns: var(--board-size) 300px;
|
| 35 |
+
gap: 2rem;
|
| 36 |
+
margin: auto;
|
| 37 |
+
padding: 2rem;
|
| 38 |
+
background: var(--primary-light);
|
| 39 |
+
border-radius: 1rem;
|
| 40 |
+
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
|
| 41 |
}
|
| 42 |
|
| 43 |
.board-container {
|
| 44 |
width: var(--board-size);
|
| 45 |
height: var(--board-size);
|
| 46 |
+
position: relative;
|
| 47 |
+
}
|
| 48 |
+
|
| 49 |
+
.chessboard {
|
| 50 |
+
width: 100%;
|
| 51 |
+
height: 100%;
|
| 52 |
display: grid;
|
| 53 |
grid-template-columns: repeat(8, 1fr);
|
| 54 |
grid-template-rows: repeat(8, 1fr);
|
| 55 |
+
border: 4px solid #2c3e50;
|
| 56 |
+
border-radius: 4px;
|
| 57 |
+
overflow: hidden;
|
| 58 |
}
|
| 59 |
|
| 60 |
.square {
|
|
|
|
| 62 |
align-items: center;
|
| 63 |
justify-content: center;
|
| 64 |
font-size: calc(var(--square-size) * 0.7);
|
| 65 |
+
cursor: pointer;
|
| 66 |
+
transition: all 0.2s;
|
| 67 |
position: relative;
|
| 68 |
+
user-select: none;
|
| 69 |
}
|
| 70 |
|
| 71 |
.white { background: #f0d9b5; }
|
| 72 |
.black { background: #b58863; }
|
| 73 |
+
|
| 74 |
+
.square.selected {
|
| 75 |
+
background: var(--highlight) !important;
|
| 76 |
+
}
|
| 77 |
+
|
| 78 |
+
.square.valid-move::after {
|
| 79 |
+
content: '•';
|
| 80 |
position: absolute;
|
| 81 |
+
color: rgba(0,0,0,0.3);
|
| 82 |
+
font-size: 2em;
|
| 83 |
}
|
| 84 |
|
| 85 |
+
.square.attack-move::after {
|
| 86 |
+
content: '';
|
| 87 |
+
position: absolute;
|
| 88 |
+
width: 100%;
|
| 89 |
+
height: 100%;
|
| 90 |
+
border: 2px solid rgba(231, 76, 60, 0.6);
|
| 91 |
+
border-radius: 50%;
|
| 92 |
+
}
|
| 93 |
+
|
| 94 |
+
.piece {
|
| 95 |
+
width: 100%;
|
| 96 |
+
height: 100%;
|
| 97 |
+
display: flex;
|
| 98 |
+
align-items: center;
|
| 99 |
+
justify-content: center;
|
| 100 |
+
font-size: calc(var(--square-size) * 0.7);
|
| 101 |
+
cursor: grab;
|
| 102 |
+
}
|
| 103 |
+
|
| 104 |
+
.piece.white { color: #fff; }
|
| 105 |
+
.piece.black { color: #000; }
|
| 106 |
</style>
|
| 107 |
</head>
|
| 108 |
<body>
|
| 109 |
+
<div class="container">
|
| 110 |
+
<div class="board-container">
|
| 111 |
+
<div class="chessboard" id="board"></div>
|
| 112 |
+
</div>
|
| 113 |
+
</div>
|
| 114 |
+
|
| 115 |
<script>
|
| 116 |
class ChessGame {
|
| 117 |
constructor() {
|
| 118 |
this.board = this.createInitialBoard();
|
| 119 |
this.currentPlayer = 'white';
|
| 120 |
this.selectedPiece = null;
|
| 121 |
+
this.initializeBoard();
|
|
|
|
| 122 |
}
|
| 123 |
|
| 124 |
createInitialBoard() {
|
| 125 |
return [
|
| 126 |
+
['r', 'n', 'b', 'q', 'k', 'b', 'n', 'r'],
|
| 127 |
+
['p', 'p', 'p', 'p', 'p', 'p', 'p', 'p'],
|
| 128 |
[null, null, null, null, null, null, null, null],
|
| 129 |
[null, null, null, null, null, null, null, null],
|
| 130 |
[null, null, null, null, null, null, null, null],
|
| 131 |
[null, null, null, null, null, null, null, null],
|
| 132 |
+
['P', 'P', 'P', 'P', 'P', 'P', 'P', 'P'],
|
| 133 |
+
['R', 'N', 'B', 'Q', 'K', 'B', 'N', 'R']
|
| 134 |
];
|
| 135 |
}
|
| 136 |
|
| 137 |
+
initializeBoard() {
|
| 138 |
+
const boardElement = document.getElementById('board');
|
| 139 |
+
boardElement.innerHTML = '';
|
| 140 |
|
| 141 |
for (let row = 0; row < 8; row++) {
|
| 142 |
for (let col = 0; col < 8; col++) {
|
| 143 |
const square = document.createElement('div');
|
| 144 |
+
square.className = `square ${(row + col) % 2 === 0 ? 'white' : 'black'}`;
|
| 145 |
square.dataset.row = row;
|
| 146 |
square.dataset.col = col;
|
| 147 |
+
square.onclick = (e) => this.handleSquareClick(e);
|
| 148 |
|
| 149 |
const piece = this.board[row][col];
|
| 150 |
if (piece) {
|
| 151 |
+
const pieceElement = document.createElement('div');
|
| 152 |
+
pieceElement.className = `piece ${piece === piece.toUpperCase() ? 'white' : 'black'}`;
|
| 153 |
+
pieceElement.textContent = this.getPieceSymbol(piece);
|
| 154 |
+
square.appendChild(pieceElement);
|
| 155 |
}
|
| 156 |
|
| 157 |
+
boardElement.appendChild(square);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 158 |
}
|
| 159 |
}
|
| 160 |
}
|
| 161 |
|
| 162 |
+
getPieceSymbol(piece) {
|
| 163 |
+
const symbols = {
|
| 164 |
+
'P': '♙', 'p': '♟',
|
| 165 |
+
'R': '♖', 'r': '♜',
|
| 166 |
+
'N': '♘', 'n': '♞',
|
| 167 |
+
'B': '♗', 'b': '♝',
|
| 168 |
+
'Q': '♕', 'q': '♛',
|
| 169 |
+
'K': '♔', 'k': '♚'
|
| 170 |
+
};
|
| 171 |
+
return symbols[piece] || '';
|
| 172 |
+
}
|
| 173 |
+
|
| 174 |
+
handleSquareClick(event) {
|
| 175 |
+
const square = event.target.closest('.square');
|
| 176 |
+
const row = parseInt(square.dataset.row);
|
| 177 |
+
const col = parseInt(square.dataset.col);
|
| 178 |
+
|
| 179 |
const piece = this.board[row][col];
|
| 180 |
|
| 181 |
if (this.selectedPiece) {
|
| 182 |
+
this.tryMove(row, col);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 183 |
} else if (piece && this.isCurrentPlayerPiece(piece)) {
|
| 184 |
+
this.selectPiece(row, col);
|
|
|
|
| 185 |
}
|
|
|
|
| 186 |
}
|
| 187 |
|
| 188 |
isCurrentPlayerPiece(piece) {
|
| 189 |
+
return (this.currentPlayer === 'white' && piece === piece.toUpperCase()) ||
|
| 190 |
+
(this.currentPlayer === 'black' && piece === piece.toLowerCase());
|
| 191 |
}
|
| 192 |
|
| 193 |
+
selectPiece(row, col) {
|
| 194 |
+
this.selectedPiece = { row, col };
|
| 195 |
+
document.querySelectorAll('.square').forEach(sq => sq.classList.remove('selected'));
|
| 196 |
+
document.querySelector(`[data-row='${row}'][data-col='${col}']`).classList.add('selected');
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 197 |
}
|
| 198 |
|
| 199 |
+
tryMove(toRow, toCol) {
|
| 200 |
+
const { row, col } = this.selectedPiece;
|
| 201 |
+
this.board[toRow][toCol] = this.board[row][col];
|
| 202 |
+
this.board[row][col] = null;
|
| 203 |
this.currentPlayer = this.currentPlayer === 'white' ? 'black' : 'white';
|
| 204 |
+
this.selectedPiece = null;
|
| 205 |
+
this.initializeBoard();
|
| 206 |
}
|
| 207 |
}
|
| 208 |
|
| 209 |
+
new ChessGame();
|
| 210 |
</script>
|
| 211 |
</body>
|
| 212 |
</html>
|