Para un proyecto personal, estoy jugando con una biblioteca de ajedrez para vue , dado que no se ha actualizado durante un tiempo, no estoy seguro de si alguien puede ayudarme aquí, pero ya veremos, supongo :)
En la documentación hay un ejemplo del componente donde puedes jugar contra una "IA" que juega movimientos aleatorios. Ahora, cuando hayas hecho tu jugada como blanco, el tablero resaltará la jugada que hayas hecho. Pero luego hará un movimiento aleatorio con negro pero el movimiento no está resaltado, el movimiento que realizó como blanco permanecerá resaltado.
Hice una caja de arena si alguien quiere jugar con ella: https://codesandbox.io/s/fervent-pascal-18xru6?file=/src/components/board.vue
La biblioteca usa el campo de ajedrez que usa Lichess , y cuando juegas contra la computadora allí, también resaltará los movimientos que hace la computadora. ¿Alguien sabe cómo yo también podría obtener eso?
lo que probé
El tablero tiene algunas opciones de configuración, también una para resaltar lastMove , esto tiene un valor predeterminado de true . Pensé que tal vez esto no estaba funcionando correctamente, pero agregar esto a this.board.set() no cambia nada.
turnColor: this.toColor() siempre es "blanco", así que pensé que tal vez no sabe que el negro hizo un movimiento. Pero cambiar esto no hizo nada.
Aquí está el código del componente:
import { chessboard } from "vue-chessboard"; export default { name: "newboard", extends: chessboard, methods: { userPlay() { return (orig, dest) => { if (this.isPromotion(orig, dest)) { this.promoteTo = this.onPromotion(); } this.game.move({ from: orig, to: dest, promotion: this.promoteTo }); // promote to queen for simplicity this.board.set({ fen: this.game.fen(), }); this.calculatePromotions(); this.aiNextMove(); }; }, aiNextMove() { let moves = this.game.moves({ verbose: true }); let randomMove = moves[Math.floor(Math.random() * moves.length)]; this.game.move(randomMove); this.board.set({ fen: this.game.fen(), turnColor: this.toColor(), movable: { color: this.toColor(), dests: this.possibleMoves(), events: { after: this.userPlay() }, }, }); }, }, mounted() { this.board.set({ movable: { events: { after: this.userPlay() } }, }); }, };