Creación de GUI de ajedrez en WPF

Question

En primer lugar, me disculpo si esta es una publicación duplicada. Las cosas se pusieron un poco confusas ya que estoy tratando de publicar/registrar al mismo tiempo.

Comencé a investigar el funcionamiento de los motores de ajedrez UCI desde una simple ventana de WPF, me puse a jugar con un motor de ajedrez diferente a la interfaz y creé un front end basado en texto razonablemente servible.

Me estoy volviendo un poco más ambicioso ahora, y me gustaría empezar a construir una GUI con piezas de ajedrez que alimentarán los movimientos del jugador hacia el motor de ajedrez, y representarán los movimientos del motor en el tablero también. Estoy apuntando a piezas que se pueden arrastrar en lugar de hacer clic en cuadrados.

Mis intentos actuales incluyen el uso de controles de usuario que se pueden arrastrar para las piezas en un elemento <canvas>. Me interesaría mucho escuchar cómo otros programadores de WPF/.NET más experimentados se acercarían a esto, ya que no estoy del todo convencido de que estoy en el camino correcto.

Por ejemplo: ¿sería mejor utilizar una cuadrícula uniforme y datos de piezas de arrastre entre los elementos secundarios? ¿Debo crear una clase abstracta de 'piezas' de la cual puedan derivarse piezas como peones? Ese tipo de cosas.

¿Alguna idea? Esta no es una tarea de tarea ni nada, es algo con lo que estoy hablando en mi tiempo libre como ejercicio.

Answer 1

He implementado un tablero de ajedrez para mi sistema Silverlight Online Chess.

Así es como lo hice.

1. I hizo un control de usuario separada para el tablero de ajedrez
2. añadí un 8x8 rejilla sobre el control
3. Luego añade 64 Borders sombreado cada uno un color diferente (cuadrados oscuros y los cuadrados claros) Asegúrese para nombrar cada uno Cada uno de los bordes se colocó en la cuadrícula utilizando las propiedades Grid.Row y Grid.Col.
4. Dentro de cada borde agregué una imagen que mantendrá la imagen de la pieza de ajedrez.
5. Deberá codificar algunos métodos para configurar la imagen en la pieza de ajedrez correcta en función de su estado de juego actual.

6. Cada una de las imágenes recibidas el mismo evento (esto es importante), los 64 llamada el mismo trozo de código:

   MouseLeftButtonDown = "Image_MouseLeftButtonDown" MouseMove = "Image_MouseMove" MouseLeftButtonUp = "Image_MouseLeftButtonUp"

La idea detrás de estos 3 eventos es que grabamos cuando hago clic en la imagen (MouseLeftButtonDown) que me da el origen del clic, luego llamo al evento mientras el mouse se mueve, eso me permite actualizar el pantalla cuando la pieza se está moviendo, y el último evento que grabo cuando l y vaya con el botón del mouse (MouseLeftButtonUp), esto me permite obtener el destino y enviar el movimiento a mi motor de ajedrez. Una vez que el movimiento se registra por el motor de ajedrez, simplemente vuelvo a dibujar el tablero de ajedrez.

private void Image_MouseLeftButtonDown(object sender, MouseButtonEventArgs e) 
{ 
    Image image = (Image)sender; 
    Border border = (Border)image.Parent; 

    image.CaptureMouse(); 
    isMouseCapture = true; 
    mouseXOffset = e.GetPosition(border).X; 
    mouseYOffset = e.GetPosition(border).Y; 

    var chessPiece = (Image) sender; 
    var chessSquare = (Border) chessPiece.Parent; 

    var row = (byte) (Grid.GetRow(chessSquare)); 
    var column = (byte) (Grid.GetColumn(chessSquare) - 1); 

    if (engine.HumanPlayer == ChessPieceColor.White) 
    { 
     SelectionChanged(row, column, false); 
    } 
    else 
    { 
     SelectionChanged((byte)(7 - row), (byte)(7 - column), false); 
    } 
} 

SelectionChanged es mi propio método para registrar qué fuente cuadrada ha seleccionado el usuario. isMouseCapture es también mi propia variable para grabar cuando el usuario comenzó a arrastrar la pieza.

private void Image_MouseMove(object sender, MouseEventArgs e) 
{ 

    Image image = (Image)sender; 
    Border border = (Border)image.Parent; 


    if (!currentSource.Selected) 
    { 
     image.ReleaseMouseCapture(); 
     isMouseCapture = false; 

     translateTransform = new TranslateTransform(); 

     translateTransform.X = 0; 
     translateTransform.Y = 0; 

     mouseXOffset = 0; 
     mouseYOffset = 0; 
    } 



    if (isMouseCapture) 
    { 
     translateTransform = new TranslateTransform(); 

     translateTransform.X = e.GetPosition(border).X - mouseXOffset; 
     translateTransform.Y = e.GetPosition(border).Y - mouseYOffset; 

     image.RenderTransform = translateTransform; 

     CalculateSquareSelected((int)translateTransform.X, (int)translateTransform.Y, false); 


    } 
} 

En lo anterior CalculareSquareSelected convierte los píxeles se trasladaron a donde creo que la pieza se mueve en el tablero de ajedrez de 8x8. Por ejemplo, digamos que moví 100 píxeles y el cuadrado de tablero de ajedrez es de solo 50 píxeles que moví 2 cuadrados de tablero de ajedrez.

private void Image_MouseLeftButtonUp(object sender, MouseButtonEventArgs e) 
{ 
    if (translateTransform == null) 
    { 
     return; 
    } 

    Image image = (Image)sender; 

    image.ReleaseMouseCapture(); 
    isMouseCapture = false; 

    if (translateTransform.X > 10 || translateTransform.Y > 10 || translateTransform.X < -10 || translateTransform.Y < -10) 
    { 
     CalculateSquareSelected((int)translateTransform.X, (int)translateTransform.Y, true); 
    } 
    translateTransform = new TranslateTransform(); 

    translateTransform.X = 0; 
    translateTransform.Y = 0; 

    mouseXOffset = 0; 
    mouseYOffset = 0; 

    image.RenderTransform = translateTransform; 

} 

Si tiene alguna pregunta no dude en ponerse en contacto conmigo.