Beginner Silverlight exercises-wuziqi (2)

The new day started again. Where did we continue with the previous topic :? (This is all forgotten. First take a brick )...

Hey, remember, the last time we talked about making the board ready. Let's continue and talk about the design of the pawns. In fact, the chess piece is simpler than the chessboard ------------

Design Concept:

1. Define the following attributes:

(1) color (black and white)

(2) Radius

(3) coordinate point

(4) pawn tag (0, 1, 2) ---- it is convenient to judge at that time (0 indicates no pawn, 1 indicates black, 2 indicates white) Tag

2. Create a function:

This function is used to draw a piece and place it on the board. The method for putting it on the board is the same as the method for drawing the Board lattice into the board in the previous article, so the function is probably like this:

 

Code

/// <Summary>
/// Draw a pawn
/// </Summary>
Public void drowchessman (canvas container)
{

Ellipse El = new ellipse ();
El. Fill = new solidcolorbrush (chcolor); // sets the color.
El. width = cradius * 2;
El. Height = cradius * 2;

Container. Children. Add (EL );
Canvas. setleft (El, cpoint. X-300-CRadius); // locate the pawn in the chessboard
Canvas. settop (El, cpoint. Y-cradius );
}

 

 

This function has a form parameter, which is mainly used to pass in the upper-level container, that is, the container (board) that holds the chess piece, and then sets the color, size, and other attributes according to the attributes of the chess piece. While

Canvas. setleft (El, cpoint. X-300-CRadius); // locate the pawn in the chessboard
Canvas. settop (El, cpoint. Y-cradius );
The two are used to locate the pawns in the checker, involving the conversion of the relationship between the screen coordinates and the coordinates in the canvas container. Below I will explain the principle in simple illustration:

 

Now we want to set the position of the chess piece in the checker. Let's take the black in the upper-left corner of the checker as an example:

In the previous layout, three columns were divided into three columns in a grid. The chessboard is the middle column, and one column on the left of the grid contains 300 units, we used marginleft to set the value to 50 when drawing a checkerboard grid, so the vertical line at the edge is 50 units away from the left edge of the checkerboard. 30 units from the top edge. Now we are positioning it in the canvas, so the marginleft should be 50-radius. What we can get is the screen coordinate when we press the mouse, the X coordinate obtained at this position is 350, through cpoint. x-300-radius = 50-radius to calculate the relationship between screen coordinates and canvas positioning coordinates. In fact, we can also think like this. Suppose that when the entire board is filled with the whole window, the X coordinates we get can be directly used for positioning in the canvas, because the position on the left edge of the canvas is equal to the position on the far left of the window. Now, our canvas is 300 units relative to the right side of the window, so we need to subtract 300 units after getting the screen coordinates. The Y coordinate works the same way.

The entire chessman class is as follows:

 

Code

Namespace chessgame
{
Public class chessman
{

/// <Summary>
/// Coordinate of the pawns
/// </Summary>
Public point cpoint {Get; set ;}
/// <Summary>
/// Pawn radius
/// </Summary>
Public int cradius {Get; set ;}
/// <Summary>
/// Chess set color
/// </Summary>
Public color chcolor {Get; set ;}

/// <Summary>
/// Color Mark for easy operation
/// </Summary>

Public int tag {Get; set ;}

/// <Summary>
/// Constructor
/// </Summary>
/// <Param name = "PT"> </param>
/// <Param name = "radius"> </param>
/// <Param name = "color"> </param>
Public chessman ()
{
Tag = 0;
}
Public chessman (point PT, int radius, color, int X)
{
Cradius = radius;
Cpoint = pt;
Chcolor = color;
Tag = X;
}

/// <Summary>
/// Draw a pawn
/// </Summary>
Public void drowchessman (canvas container)
{

Ellipse El = new ellipse ();
El. Fill = new solidcolorbrush (chcolor );
El. width = cradius * 2;
El. Height = cradius * 2;

Container. Children. Add (EL );
Canvas. setleft (El, cpoint. X-300-CRadius );
Canvas. settop (El, cpoint. Y-cradius );
}

}
}

 

Now that the Chessman class is ready, we will continue to do the remaining class. The gameenigin class --------

With a chessboard and a chess piece, it is time to take a few pieces, so you need something to control the game. This is the function of the gameenigin class. This class is much more complex than the previous two, but don't worry, we will gradually improve it. No matter what the others do first, they do not know whether they are used or not, so I decided to control the board in the gameenigin class first. The position is not considered for the moment. If the coordinates are anything, you can put the pawns on the board first.

So, it starts...

First define a constructor:

 

Code

Public gameenigin (panel control)
{

Chessboard cb = new chessboard (control );
CB. drawboard ();
Chessman Ce = new Chessman (new point (350,28), radius, colors. Black, 1 );
Ce. drowchessman (Board );
}

 

Finished ....

Wait, there is another radius (pawn radius) that is not defined here, So radius = 15 is defined in the gameenigin class;

In this way, the gameenigin class looks like this:

 

Code

Namespace chessgame
{
Public class gameenigin
{
Int radius = 15;

Public gameenigin (panel control)
{

Chessboard cb = new chessboard (control );
CB. drawboard ();
Chessman Ce = new Chessman (new point (350,28), radius, colors. Black, 1 );
Ce. drowchessman (Board );
}

}
}

 

 

Next, let's start testing. Open the mainpage. XAML. CS file,

Add the code to the mainpage () function as follows:

 

Public mainpage ()
{
Initializecomponent ();
Gameenigin Ge = new gameenigin (Board );
}

 

Good luck ..

Good luck. Now we have succeeded. Today, I will explain the creation of black and white pawns and the conversion of screen coordinates and logical coordinates in the next article.