Graficando un tablero de ajedrez

on miércoles, 12 de octubre de 2011
Que tal, en esta ocasión vamos a trabajar en la graficacion de un simple tablero de ajedrez en c sharp.

1.- Primero que nada necesitamos crear un nuevo proyecto de tipo windows form


2.- Ahora en nuestra forma, agregamos un MenuStrip


3.- Implementación del código necesario para graficar un tablero de ajedrez.


        public void DibujarTableroDeAjedrez(Form forma)
        {
            bool blanco = true;
            int anchoCuadricula = 30;
            int x = 40, y = 40;
            for (int i = 0; i < 8; i++)
            {
                for (int j = 0; j < 8; j++)
                {
                    if (blanco)
                    {
                        FxTools.GraficarCuadro(forma, Color.FromArgb(0, 255, 0), x, y, anchoCuadricula);
                        blanco = false;
                    }
                    else
                    {
                        FxTools.GraficarCuadro(forma, Color.FromArgb(0, 0, 0), x, y, anchoCuadricula);
                        blanco = true;
                    }
                    x +=31;
                }
                if (blanco)
                    blanco = false;
                else
                    blanco = true;
                x = 40;
                y += 31;
            }
        }

//-----------------------------------------------------------------------------------------------------------
este es el código necesario para graficar un tablero de ajedrez, como ven, tenemos de una bandera que nos servirá cuando pintar un cuadro de color blanco y cuando no, tenemos un ancho de cuadricula, que por defecto es 30 (por fines didácticos se estableció hardcode los valores de "anchoCuadricula", "x" y de "y".

Contamos con dos bucles que nos servirán para recorrer la cuadricula, la dimensión de un tablero de ajedrez es de 8 x 8, que nos da un total de 64 casillas.

en cada casilla se establecerá un color, ya sea blanco o negro, todo esto va a depender de la bandera "blanco", para obtener el color blanco, lo podemos obtener de varias formas, en esta ocasión se obtiene por medio del método estático  FromArgb de la clase Color


En el caso de graficar el color, para el color blanco se opta poner el color verde (0,255,0) y en el caso de las casillas oscuras, el color negro (0,0,0)


4.- creando la clase FxTools e implementando el metodo GraficarCuadro



using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Drawing;
using System.Windows.Forms;


namespace EjemploBlog
{
    class FxTools
    {
        public static void GraficarCuadro(Form forma, Color color, int x, int y, int ancho)
        {


            SolidBrush solidBrush = new SolidBrush(color);
            Graphics g = forma.CreateGraphics();
            g.FillRectangle(solidBrush, x, y, ancho, ancho);
        }
    }
}


5.- accesando al metodo DibujarTableroDeAjedrez(Form forma)


Ya para terminar con este ejemplo, vamos a mandarlo llamar de nuestro MenuStrip:



        private void tableroDeAjedrezToolStripMenuItem_Click(object sender, EventArgs e)
        {
            DibujarTableroDeAjedrez(this);
        }



6.- el programa en tiempo de ejecución 



tableroDeAjedrez

8 comentarios:

Unknown dijo...

SOLO BUENO !

Anónimo dijo...

Hola Juan muchas gracias por los codigos, solo queria hacerte una pregunta, estoi empezando a hacer el juego de ajedrez (soy un poquito mas que principiante) y queria preguntarte si me resultaria mas facil dibujar el tablero desde un "panel" o si me resultaria mas facil hacerlo desde el Form asi como tu lo haces, o por ultimo si me sale ygual hacerlo en los dos casos, te agradeceria que me respondieses, te dejo mi email: erwin_pereira.c@hotmail.com

fernandelmore dijo...

Que tal, te recomendaria que lo graficaras en WPF, tiene muchos componentes muy poderosos como es el StackPanel

te dejo la liga: http://www.apuntesbinarios.com/2012/12/graficando-un-tablero-de-ajedrez-en-wpf.html

Anónimo dijo...

Te agradezco mucho por tu ayuda Juan.

Anónimo dijo...

Como puedo cambiar los colores que tiene el tablero, pero no desde el código, si no desde dos botones (Color 1 y Color 2) que seleccionaré para cambiar el color de los espacios del tablero. De ante mano. Gracias.

fernandelmore dijo...

Que tal, de antemano muchas gracias por el interés en el articulo, para hacer esto, sera necesario que sobrecarges el método: DibujarTableroDeAjedrez(Form forma, Color color1, Color color2)

y estos parametros se lo mandas a cada uno de estos metodos.

FxTools.GraficarCuadro(forma, color1, x, y, anchoCuadricula);

FxTools.GraficarCuadro(forma, color2, x, y, anchoCuadricula);

hecho esto, sera necesario que agregues dos botones y muestres una paleta de colores cuando des click al botón, para después pasarle de parámetro los colores.

si batallas para mostrar una paleta de colores, propón una sugerencia y con gusto en un tiempo publico una entrada.

Saludos!!

Anónimo dijo...

no se explica bien

Anónimo dijo...

Hola disculpa soy nuevo en el Visual y tengo problemas con el FxTools, me dice "no existe en el contexto actual", ¿como puedo arreglar eso?, gracias

Publicar un comentario