<!DOCTYPE html>
<html lang="ca">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Play Chess</title>
</head>
Aquesta secció defineix el tipus de document com HTML5, l'idioma, el joc de caràcters, i ajusta el disseny per a diferents dispositius.
<link rel="stylesheet" href="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.css">
<script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://unpkg.com/@chrisoakman/chessboardjs@1.0.0/dist/chessboard-1.0.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chess.js/0.12.1/chess.min.js"></script>
Aquestes línies inclouen les llibreries necessàries per crear i gestionar un tauler d'escacs (CSS de chessboard.js, jQuery, chessboard.js i chess.js).
<style>
#board {
width: 400px;
margin: 20px auto;
}
.messages {
text-align: center;
margin-top: 20px;
}
#game-status {
color: green;
}
#error-message {
color: red;
}
#moves {
color: blue;
}
</style>
Aquests estils defineixen l'aparença del tauler d'escacs i dels missatges del joc.
<body>
<h1>Play Chess</h1>
<div id="board"></div>
<div class="messages">
<div id="game-status"></div>
<div id="error-message"></div>
<div id="moves"></div>
</div>
</body>
</html>
Aquesta part defineix l'estructura del cos del document, incloent el títol de la pàgina, el div pel tauler d'escacs i els divs per mostrar missatges.
<script>
document.addEventListener("DOMContentLoaded", function() {
let board, game;
function initChessboard() {
board = Chessboard('board', {
draggable: true,
position: 'start',
pieceTheme: 'img/chesspieces/wikipedia/{piece}.png',
onDrop: handleMove,
});
game = new Chess();
updateMoves();
}
initChessboard();
});
</script>
Aquesta secció inicialitza el tauler d'escacs i configura les peces perquè es puguin arrossegar. També s'inicialitza el joc d'escacs utilitzant la llibreria chess.js.
function handleMove(source, target) {
clearMessages();
const move = game.move({
from: source,
to: target,
promotion: 'q'
});
if (move === null) {
displayErrorMessage('Invalid move!');
return 'snapback';
}
board.position(game.fen());
if (game.game_over()) {
displayGameStatus('Game over');
return;
}
if (game.turn() === 'b') {
const blackMoves = game.moves({ verbose: true });
const randomIndex = Math.floor(Math.random() * blackMoves.length);
const randomBlackMove = blackMoves[randomIndex];
game.move(randomBlackMove);
board.position(game.fen());
if (game.game_over()) {
displayGameStatus('Game over');
return;
}
updateMoves();
} else {
updateMoves();
}
}
Aquesta funció gestiona els moviments de les peces, comprovant si són vàlids, actualitzant el tauler i fent que l'ordinador jugui amb les peces negres.
function updateMoves() {
const moves = game.moves({ verbose: true });
const legalMoves = moves
.filter(move => {
game.move(move);
const isLegal = !game.in_check();
game.undo();
return isLegal;
})
.map(move => move.san);
document.getElementById('moves').innerText = 'Legal moves: ' + legalMoves.join(', ');
}
function displayGameStatus(message) {
document.getElementById('game-status').innerText = message;
}
function displayErrorMessage(message) {
document.getElementById('error-message').innerText = message;
}
function clearMessages() {
document.getElementById('game-status').innerText = '';
document.getElementById('error-message').innerText = '';
document.getElementById('moves').innerText = '';
}
function handleError(error) {
displayErrorMessage('Error: ' + error.message);
console.error(error);
}
Aquestes funcions s'utilitzen per actualitzar la llista de moviments legals, mostrar missatges d'estat i d'error, i esborrar missatges anteriors.
window.onerror = function (message, source, lineno, colno, error) {
handleError(error || new Error(message + ' at ' + source + ':' + lineno + ':' + colno));
};
Aquesta funció captura errors globals que poden ocórrer en el codi i els gestiona utilitzant la funció handleError, mostrant un missatge d'error detallat.
</script>
</body>
</html>
Aquesta part finalitza el document HTML tancant les etiquetes <script>, <body> i <html>.
Aquesta pàgina web explica com crear un joc d'escacs senzill utilitzant les llibreries chessboard.js i chess.js. Hem dividit el codi en diversos passos per facilitar la comprensió, incloent la configuració del document, la inclusió de llibreries necessàries, els estils CSS, la inicialització del tauler d'escacs, la gestió de moviments i errors, i la visualització d'informació al jugador. Ara la teva feina és millorar el codi.