<!
DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ajedrez Simple JS</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
background-color: #2c3e50;
color: white;
min-height: 100vh;
margin: 0;
padding-top: 20px;
}
h1 { margin-bottom: 10px; }
#status {
margin-bottom: 20px;
font-size: 1.2rem;
background: #34495e;
padding: 10px 20px;
border-radius: 5px;
}
/* El Tablero */
#board {
display: grid;
grid-template-columns: repeat(8, 60px);
grid-template-rows: repeat(8, 60px);
border: 10px solid #5d4037;
user-select: none; /* Evita que se seleccione el texto al hacer clic */
}
/* Las Casillas */
.square {
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
font-size: 40px;
cursor: pointer;
}
/* Colores del tablero */
.white { background-color: #f0d9b5; color: black; }
.black { background-color: #b58863; color: black; }
/* Piezas blancas y negras (estilo visual) */
.piece-white { color: #ffffff; text-shadow: 0 0 2px #000; }
.piece-black { color: #000000; }
/* Selección */
.selected {
background-color: #7b61ff !important; /* Color de selección */
}
</style>
</head>
<body>
<h1>Ajedrez Web</h1>
<div id="status">Turno: Blancas ♔</div>
<div id="board"></div>
<script>
const boardElement = [Link]('board');
const statusElement = [Link]('status');
let turn = 'white'; // 'white' o 'black'
let selectedSquare = null;
// Representación del tablero usando caracteres Unicode
// P = Peón, R = Torre, N = Caballo, B = Alfil, Q = Reina, K = Rey
// Mayúsculas = Blancas, Minúsculas = Negras
const initialBoard = [
['r', 'n', 'b', 'q', 'k', 'b', 'n', 'r'], // 0 Negras
['p', 'p', 'p', 'p', 'p', 'p', 'p', 'p'], // 1
['', '', '', '', '', '', '', ''], // 2
['', '', '', '', '', '', '', ''], // 3
['', '', '', '', '', '', '', ''], // 4
['', '', '', '', '', '', '', ''], // 5
['P', 'P', 'P', 'P', 'P', 'P', 'P', 'P'], // 6
['R', 'N', 'B', 'Q', 'K', 'B', 'N', 'R'] // 7 Blancas
];
// Mapa de caracteres a símbolos de ajedrez
const pieces = {
'r': '♜', 'n': '♞', 'b': '♝', 'q': '♛', 'k': '♚', 'p': '♟',
'R': '♖', 'N': '♘', 'B': '♗', 'Q': '♕', 'K': '♔', 'P': '♙'
};
// Crear el tablero visual
function createBoard() {
[Link] = ''; // Limpiar tablero
for (let row = 0; row < 8; row++) {
for (let col = 0; col < 8; col++) {
const square = [Link]('div');
[Link]('square');
// Determinar color de la casilla (Patrón ajedrez)
if ((row + col) % 2 === 0) {
[Link]('white');
} else {
[Link]('black');
}
// Asignar coordenadas
[Link] = row;
[Link] = col;
// Colocar pieza si existe
const pieceCode = initialBoard[row][col];
if (pieceCode !== '') {
[Link] = pieces[pieceCode];
// Añadir clase para estilo específico si es necesario
[Link](pieceCode ===
[Link]() ? 'piece-white' : 'piece-black');
}
// Evento de clic
[Link]('click', handleClick);
[Link](square);
}
}
}
function handleClick(e) {
const square = [Link];
const row = parseInt([Link]);
const col = parseInt([Link]);
const pieceContent = initialBoard[row][col];
// 1. Si no hay nada seleccionado, intentamos seleccionar
if (!selectedSquare) {
if (pieceContent === '') return; // Clic en vacío
// Validar turno
const isWhitePiece = pieceContent === [Link]();
if ((turn === 'white' && !isWhitePiece) || (turn === 'black' &&
isWhitePiece)) {
return; // No es tu turno
}
// Seleccionar
selectedSquare = { row, col, element: square };
[Link]('selected');
}
// 2. Si ya hay algo seleccionado, intentamos mover
else {
const prevRow = [Link];
const prevCol = [Link];
// Si hace clic en la misma casilla, deseleccionar
if (prevRow === row && prevCol === col) {
resetSelection();
return;
}
// *** AQUÍ IRÍA LA LÓGICA DE VALIDACIÓN DE MOVIMIENTO ***
// Por simplicidad, permitimos mover a cualquier casilla que no
tenga una pieza propia
// (Esto es un ajedrez "físico", tú controlas las reglas)
const targetIsWhite = pieceContent !== '' && pieceContent ===
[Link]();
const movingIsWhite = turn === 'white';
// Evitar comer piezas del mismo color
if (pieceContent !== '' && (targetIsWhite === movingIsWhite)) {
// Si haces clic en otra pieza tuya, cambiamos la selección a
esa
resetSelection();
handleClick(e); // Recursivo para seleccionar la nueva
return;
}
// REALIZAR EL MOVIMIENTO
movePiece(prevRow, prevCol, row, col);
resetSelection();
toggleTurn();
}
}
function movePiece(fromRow, fromCol, toRow, toCol) {
// Actualizar modelo de datos
initialBoard[toRow][toCol] = initialBoard[fromRow][fromCol];
initialBoard[fromRow][fromCol] = '';
// Actualizar vista (re-renderizar todo es más fácil para este ejemplo)
createBoard();
}
function resetSelection() {
if (selectedSquare) {
[Link]('selected');
selectedSquare = null;
}
}
function toggleTurn() {
turn = turn === 'white' ? 'black' : 'white';
[Link] = turn === 'white' ? "Turno: Blancas ♔" :
"Turno: Negras ♚";
}
// Iniciar el juego
createBoard();
</script>
</body>
</html>fyñdtodotdrosotzrozozot