Estoy tratando de hacer que un juego actualice el lienzo regularmente con un ciclo principal que comprende una función para reproducir una pantalla y una función para que la computadora calcule un movimiento (si es su turno). El jugador puede seleccionar un movimiento del 1 al 9 y luego, si la computadora no se ha ido desde la última vez que el jugador hizo un movimiento, calculará su movimiento usando un árbol muy profundo. El movimiento de la computadora tarda varios segundos en realizar su movimiento. A pesar de que el lienzo se actualiza antes de que la computadora haga un movimiento, nunca se actualiza hasta que la computadora se ha ido, lo que significa que tanto el jugador como la computadora se muestran simultáneamente en lugar de secuencialmente. ¿Qué puedo hacer para asegurarme de que el lienzo se actualice cada 100 milisegundos y no solo después de que la computadora haya calculado su movimiento?
function playGame() { function doKeyDown(evt) { console.log(evt.keyCode) if (evt.keyCode > 48 && evt.keyCode < 58) { game.makeMove(evt.keyCode-48); // 1-9 are user actions } } function mainLoop(ctx, game, board) { board.showBoard(ctx); // display board game.makeMove(0); // zero is computer move } Canvas.canvas = document.getElementById("myCanvas"); let game = new Game(); let board = new Board(game); window.addEventListener( "keydown", doKeyDown, true); Canvas.ctx = Canvas.canvas.getContext('2d'); setInterval(() => {mainLoop(Canvas.ctx, game, board)}, 100); }; document.addEventListener('DOMContentLoaded', playGame);Hay algunas cosas que definitivamente pueden ayudarlo a garantizar que su lienzo se actualice cuando lo espera.
mover tareas computacionalmente intensivas a Web Workers.
utilice window.requestAnimationFrame() en lugar de setInterval() para renderizar.
Trabajadores web
Los Web Workers son excelentes para trasladar tareas computacionalmente intensivas a; la documentación de MDN para trabajadores web establece que "el subproceso de trabajo puede realizar tareas sin interferir con la interfaz de usuario". Esto permitirá calcular el movimiento de la computadora sin bloquear el hilo de renderizado.
Para obtener más información sobre Web Workers, consulte: Web Workers (MDN Web Docs)
ventana.requestAnimationFrame()
El método window.requestAnimationFrame() es el mejor método actual para lograr animaciones. Esencialmente, hace que el navegador ejecute la devolución de llamada proporcionada justo antes del siguiente repintado. Esta es una mejora con respecto a los setTimeout() y setInterval() anteriores, ya que solo llama a la devolución de llamada justo antes de que el navegador vuelva a pintar, en otras palabras, reduce los cálculos innecesarios que pueden causarse al usar setTimeout() y setInterval() .
Para obtener más información sobre window.requestAnimationFrame() consulte: window.requestAnimationFrame() (MDN Web Docs)
Para leer un buen artículo breve sobre por qué elegir window.requestAnimationFrame() en lugar de setTimeout() y setInterval() consulte este artículo de Matt West: Animaciones eficientes con requestAnimationFrame
Ejemplo de trabajo:
He reunido un pequeño ejemplo de trabajo usando codesandbox.io; usa Web Workers y requestAnimationFrame() como lo he descrito. Tenga en cuenta que usa un temporizador en lugar de una tarea computacionalmente intensiva, usa un temporizador de 5 segundos para simular un movimiento de computadora y un temporizador de 1 segundo para simular un movimiento de jugador.
Code Sandbox: Web Worker y requestAnimationFrame() Ejemplo