Tạo khu vực trò chơi

Để tạo trò chơi SnakeWPF của chúng tôi, chúng tôi sẽ bắt đầu bằng cách tạo bản đồ. Đó sẽ là một khu vực hạn chế, nơi con rắn phải di chuyển trong - một hố rắn, nếu bạn muốn. Tôi đã quyết định rằng hố rắn của tôi trông giống như một bàn cờ, được tạo thành các hình vuông có kích thước bằng nhau, sẽ có cùng kích thước với cơ thể của con rắn. Chúng tôi sẽ tạo bản đồ theo hai lần lặp: Một số trong số đó sẽ được trình bày trong XAML, bởi vì nó dễ dàng, trong khi chúng tôi sẽ vẽ các hình vuông nền trong Code-behind, bởi vì nó lặp đi lặp lại và năng động.

Khu trò chơi XAML

Vì vậy, hãy bắt đầu với XAML - một Window đơn giản với bảng điều khiển Canvas bên trong Điều khiển viền, để tạo vùng giới hạn:

<Window x:Class="WpfTutorialSamples.Games.SnakeWPFSample"  
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"  
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"  
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"  
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"  
    xmlns:local="clr-namespace:WpfTutorialSamples.Games"  
    mc:Ignorable="d"  
    Title="SnakeWPF - Score: 0" SizeToContent="WidthAndHeight">  
    <Border BorderBrush="Black" BorderThickness="5">  
    <Canvas Name="GameArea" ClipToBounds="True" Width="400" Height="400">  

    </Canvas>  
    </Border>  
</Window>

Trò chơi của chúng ta bây giờ trông như thế này:

Chúng tôi sử dụng Canvas làm khu vực trò chơi thực tế, bởi vì nó sẽ cho phép chúng tôi thêm các điều khiển vào đó, nơi chúng tôi có toàn quyền kiểm soát các vị trí. Chúng ta sẽ sử dụng nó sau, nhưng bây giờ, hãy chú ý đến những điều sau đây:

• Không có width/height nào được xác định cho Window - thay vào đó, chúng tôi đã xác định nó cho Canvas, vì đó là phần chúng tôi cần kiểm soát hoàn toàn. Sau đó, chúng tôi đảm bảo rằng Window sẽ điều chỉnh kích thước của nó cho phù hợp bằng cách đặt thuộc tính SizeToContent thành WidthAndHeight. Thay vào đó, chúng tôi đã xác định width/height cho Window, không gian có sẵn trong nó sẽ phụ thuộc vào mức độ viền của System được sử dụng cho Windows, có thể phụ thuộc vào chủ đề, v.v.
• Chúng tôi đặt thuộc tính ClipToBounds thành True cho Canvas - điều này rất quan trọng, vì nếu không, các điều khiển mà chúng tôi thêm sẽ có thể mở rộng vượt ra ngoài ranh giới của bảng Canvas

Thiết kế background từ Code-behind

Như đã đề cập, tôi muốn có một hình nền bàn cờ cho khu vực trò chơi. Nó bao gồm rất nhiều hình vuông, vì vậy việc thêm nó từ Code-behind sẽ dễ dàng hơn (hoặc sử dụng hình ảnh, nhưng điều đó không năng động!). Chúng tôi cần thực hiện việc này ngay khi tất cả các điều khiển bên trong Window đã được khởi tạo/kết xuất và may mắn thay cho chúng tôi, Window có một sự kiện cho điều đó: Sự kiện ContentRendered. Chúng tôi sẽ đăng ký vào đó trong khai báo Window:

Title="SnakeWPF - Score: 0" SizeToContent="WidthAndHeight" ContentRendered="Window_ContentRendered"

Bây giờ di chuyển đến Code-behind và hãy bắt đầu. Trước hết, chúng ta cần xác định kích thước để sử dụng khi vẽ con rắn, hình vuông nền, v.v. Nó có thể được thực hiện ở đầu lớp Window của bạn:

public partial class SnakeWPFSample : Window
{
    const int SnakeSquareSize = 20;
    .....

Bây giờ, trong sự kiện ContentRendered, chúng tôi sẽ gọi phương thức DrawGameArea(), nó sẽ thực hiện tất cả công việc khó khăn. Nó trông như thế này:

private void Window_ContentRendered(object sender, EventArgs e)  
{  
    DrawGameArea();  
}  

private void DrawGameArea()  
{  
    bool doneDrawingBackground = false;  
    int nextX = 0, nextY = 0;  
    int rowCounter = 0;  
    bool nextIsOdd = false;  

    while(doneDrawingBackground == false)  
    {  
    Rectangle rect = new Rectangle  
    {  
        Width = SnakeSquareSize,  
        Height = SnakeSquareSize,  
        Fill = nextIsOdd ? Brushes.White : Brushes.Black  
    };          
    GameArea.Children.Add(rect);  
    Canvas.SetTop(rect, nextY);  
    Canvas.SetLeft(rect, nextX);  

    nextIsOdd = !nextIsOdd;  
    nextX += SnakeSquareSize;  
    if(nextX >= GameArea.ActualWidth)  
    {  
        nextX = 0;  
        nextY += SnakeSquareSize;  
        rowCounter++;  
        nextIsOdd = (rowCounter % 2 != 0);  
    }  

    if(nextY >= GameArea.ActualHeight)  
        doneDrawingBackground = true;  
    }  
}

Như đã đề cập trước đây, các bài viết này đòi hỏi kiến ​​thức về C# nhiều hơn một chút so với các bài viết còn lại trong hướng dẫn này, vì vậy tôi sẽ không đi qua từng dòng, nhưng đây là một mô tả chung về những gì chúng tôi làm: Bên trong vòng lặp while, chúng tôi liên tục tạo ra phiên bản của điều khiển Hình chữ nhật và thêm nó vào Canvas (GameArea). Chúng tôi điền nó bằng ô Trắng hoặc Đen và nó sử dụng hằng số SnakeSquareSize của chúng tôi là cả Width và Height, vì chúng tôi muốn nó là một hình vuông. Trên mỗi lần lặp, chúng tôi sử dụng nextX và nextY để kiểm soát khi nào di chuyển đến dòng tiếp theo (khi chúng tôi đến biên giới bên phải) và khi nào dừng lại (khi chúng tôi chạm đến đáy VÀ biên giới bên phải cùng một lúc).

Đây là kết quả:

Tổng kết

Trong bài viết này, chúng tôi đã xác định XAML được sử dụng để lưu trữ tất cả nội dung trò chơi và chúng tôi đã "vẽ" một mẫu bàn cờ trên khu vực trò chơi, bằng cách thêm các điều khiển hình chữ nhật WPF màu đen và trắng vào nó. Bước tiếp theo sẽ là bắt đầu thêm con rắn thực sự, cũng như thức ăn nó sẽ ăn.