Beginner Silverlight exercises-wuziqi (1)

I 've been studying Silverlight for nearly half a month. I think it's fun .. Today, we will use Silverlight to implement the simplest Wuzi game. It is mainly used for Silverlight exercises. Therefore, we only pay attention to the SL part. Therefore, it is just simple to play games with ourselves, and the online version is not implemented, of course, the man-machine combat function has not been implemented (the current strength is limited, it is quite sad ). Okay, you don't have to talk about it anymore. Start working... Let's take a look at the final effect:

 

Test address: http://www.ophoneba.com/SL/chess.html

How can I do wuziqi? There are a lot of online searches and all versions are available. As for me, it's a bit embarrassing and easy. However, for practice,

First, we will perform the interface layout:

(This is simple-just a few simple steps)

Layout idea: Use a grid layout to divide the entire window into three parts, with the board in the middle .. Board? How can I put the chessboard? After thinking about it, I used a piece of cloth (a little simple, not a chess and board table). But where do you want to ask? Is the canvas. Take it as a chessboard for the moment. Okay, the layout is over -----

 

-------------------------------------------------------------- And so on. What about chess pieces? (This is not urgent. It is useless to put it on now. Wait for the pawn to be placed again, and the lattice on the board is also in. the CS code is drawn, because the code becomes much better after a piece of painting in XAML. in CS, just a few loops are OK .)

First look at the layout code:

 

</Usercontrol. Resources>
<Grid X: Name = "layoutroot" loaded = "layoutroot_loaded">
<Grid. Background>
<Imagebrush imagesource = "bg.jpg"/>
</Grid. Background>
<Grid>
<Grid. columndefinitions>
<Columndefinition width = "300" type = "codeph" text = "/codeph"/>
<Columndefinition width = "*"/>
<Columndefinition width = "308" type = "codeph" text = "/codeph"/>
</Grid. columndefinitions>
<Canvas background = "lightgray" grid. Column = "1" X: Name = "board" mouseleftbuttondown = "board_mouseleftbuttondown">
</Canvas>
<Button grid. column = "0" margin = "5,150, 0.5" content = "" Height = "30" width = "80" opacity = "" Click = "button_click_1">
<Button. Background>
<Imagebrush imagesource = "bn.jpg"/>
</Button. Background>
</Button>
</GRID>
</GRID>
</Usercontrol>

 

The button is used to start a new game and place it on the left of the Board --- grid. Column = "0 ";

After the layout is complete, you must first consider how to implement the logic code section.

First, let me define several classes. I have used three classes in total:

 

They are: chessboard chessman (chess piece) gameenigin (game control)

Next, we will improve them separately -----------

Open the board first, so far. The Board is just a piece of cloth. There is a blank area above .....

It's too white, so I decided to write it into a grid. There is no way to do it. The man who invented wuziqi stipulated that there should be a grid consisting of a horizontal line, a vertical line, and a crossover. Then, draw a grid.

Draw a line with a pen, so we select a line object to draw a line.

In order to draw a board more conveniently, we design a drawgrid (INT X1, int Y1, int X2, int Y2) function, where the parameters are

Start Point X coordinate, Y coordinate, end point X coordinate, and Y coordinate

Therefore, the entire function is as follows:

 

Public void drawgrid (INT X1, int Y1, int X2, int Y2)
{
Line line = new line ();

Line. X1 = x1 * gat + marginleft;
Line. X2 = x2 * gat + marginleft;
Line. Y1 = Y1 * gat + margintop;
Line. y2 = Y2 * gat + margintop;
Line. strokethickness = 2;
Line. Stroke = new solidcolorbrush (colors. Black );
Container. Children. Add (line );
}

 

The container is a container. We set a panel container at the beginning of the class; object;

Why?

Because we know that many objects or controls in Silverlight or WPF have content property, we will pass external objects in the constructor of the chessboard class, in order to put the line object into this content, here, we will pass in the external canvas, and then in the container. chinstrap. add (line), put the drawn line on this cloth. In this way, the bald checkerboard is painted first. It's not so happy. It's just a function to draw a checkerboard. Wait, maybe you will see a few new things (GAT marginleft margintop). What is this?

 

Gat is used to leave the same gap between the two lines to form spaces. marginleft and margintop are used to control the margin of the entire grid area;

With the function of drawing a grid, we will draw it next. This function can be understood in this way, just like creating a paint brush with line, and then painting with a paint brush;

Now, how much do you want to draw? What is this rule ?.... I can't keep following the rules. This time I broke the rules. I didn't check the number of rules required for wuziqi. Which of the following is an interesting big brother to help me check? I am very lazy in Chinese chess and I am not sure if I am too lazy, haha... Therefore, we have customized the following:

Draw a 12x12 image...

Look at the function:

 

Code

Public void drawboard ()
{
For (INT I = 0; I <12; I ++)
{

Drawgrid (0, I, 11, I); // draw a vertical line
Drawgrid (I, 0, I, 11); // draw a horizontal line

}



}

 

Wow, that's easy !!

Right, just a few lines. After the painting, our board is like this:

Is the chessboard too small? ----------- (Haha, I reduced the image while editing the article. Of course it would be much larger );

Let's take a look at the entire chessboard class. (for implementation of this class, refer to the chess article that passes by the autumn brother in the park)

 

Code

Public class chessboard
{
Panel container;
Int gat = 50;
Int marginleft = 50;
Int margintop = 30;
Public chessboard (panel control)
{
Container = control;

}
Public void drawgrid (INT X1, int Y1, int X2, int Y2)
{
Line line = new line ();

Line. X1 = x1 * gat + marginleft;
Line. X2 = x2 * gat + marginleft;
Line. Y1 = Y1 * gat + margintop;
Line. y2 = Y2 * gat + margintop;
Line. strokethickness = 2;
Line. Stroke = new solidcolorbrush (colors. Black );
Container. Children. Add (line );
}
Public void drawboard ()
{
For (INT I = 0; I <12; I ++)
{

Drawgrid (0, I, 11, I );
Drawgrid (I, 0, I, 11 );

}



}

}

 

 

So far today, it cannot be written .. The next article describes how to implement the Chessman class...