Como es ahora, tengo un objeto Board que contiene una matriz bidimensional de 8x8 (la cuadrícula, como lo llamo) y las piezas se representan con ints 1/2, y utilizo una operación bit a bit para marcar una pieza como rey.

También tengo un objeto Checkers que maneja la representación del tablero y los clics del usuario en el lienzo, etc. El objeto Checkers tiene un método Draw que simplemente itera sobre la cuadrícula en el objeto Tablero para crear una representación gráfica del tablero. Como tal, con cada llamada a Draw (), el tablero se vuelve a dibujar y las posiciones de las piezas se vuelven a calcular.

Ahora quiero agregar animaciones. Una forma en que pude lograr esto es hacer un seguimiento del movimiento más reciente (coordenadas XY de origen y destino), y luego ejecutar la rutina Draw() en un intervalo establecido, y tener la rutina Draw() verifique si las coordenadas de la pieza que está a punto de dibujar son las mismas que las coordenadas registradas en la variable de destino del movimiento anterior, y ajusta la posición de la pieza en consecuencia.

Si bien esto funciona, me parece un poco desordenado.

Un modelo alternativo con el que experimenté fue usar objetos para las piezas en lugar de enteros, y luego pude grabar las coordenadas del píxel X Y en la pieza y actualizarlas después de cada movimiento (o en un bucle de animación). Esto también lo encontré desordenado, y no me gustó la forma en que mi objeto de placa ahora estaba vinculado a la lógica de representación.

¿Puede alguien con experiencia en esta área sugerir una mejor manera de hacer las cosas?

Vale la pena señalar que uso la misma clase Board en el lado del servidor (NodeJS), por lo que idealmente me gustaría mantener la clase Board idéntica tanto en el cliente como en el servidor para garantizar que los movimientos realizados y validados por el cliente nunca sean rechazados. por el servidor

3
NoPyGod 21 sep. 2011 a las 01:25

3 respuestas

La mejor respuesta

Sugeriría que para cada uno de ustedes primero dibuje todas las piezas que no se mueven, luego dibuje la pieza en movimiento a lo largo de una línea interpolada desde su posición inicial hasta la final (dada por el tiempo).

Para ser honesto, para algo con este nivel de complejidad gráfica, me quedaría con HTML / CSS / jQuery, usando imágenes position: absolute para representar las piezas. Luego, podría usar la función animada de jQuery para mostrar la última pieza moviéndose desde su posición inicial hasta su final muy fácilmente (y con parámetros como swing o linear para obtener el comportamiento que desea). p.ej.:

// Assumes pieces are objects with id and position properties
// and for each piece there is an image with id: piece.id

$('#'+piece.id).animate({
    left:  piece.position.x * board_scale,
    top:   piece.position.y * board_scale
});
1
andrewmu 23 sep. 2011 a las 12:55

Si quieres usar el lienzo:
Use dos, colocados exactamente uno encima del otro.

Luego, toma el inferior para dibujar todos los elementos estáticos.
Y el superior para dibujar solo la animación, es decir, el elemento en movimiento.

Esto le dará un rendimiento óptimo ya que solo los elementos cambiantes tienen que ser rediseñados.

0
Chris 1 may. 2013 a las 18:47

No mencionó la compatibilidad con el navegador, pero suponiendo que esté usando IE9 + solamente, me quedaría con Transiciones CSS3 que permiten animaciones extremadamente suaves con muy poco trabajo de su parte. Las animaciones pueden ser aceleradas por hardware, incluso en dispositivos móviles, lo que significa que a menudo son hermosas.

Apple ya ha hecho una demostración de damas usando esta tecnología :)

https://developer.apple.com/safaridemos/checkers.php

// css
.piece {
   -webkit-transition: all ease-in .75s;
   -moz-transition: all ease-in .75s;
   transition:  all ease-in .75s;
}

// js
var aPiece = document.getElementById('aPiece');
var newLocation = "translate(20px, 30px)";
aPiece.style.webkitTransform = newLocation;
aPiece.style.mozTransform = newLocation;
aPiece.style.transform = newLocation;

Esto te animará automáticamente :)

0
Jamund Ferguson 30 abr. 2012 a las 13:34