Creating the game area

SnakeWPF oyunumuza başlamak için, haritayı oluşturacağız. Bu, yılanın hareket etmesi gereken sınırlı bir alan olacak - bir yılan çukuru, diyelim. Benim yılan çukurumun bir satranç tahtası gibi görünmesini istedim, eşit boyutlu karelerden oluşacak ve bunlar yılanın vücudu ile aynı boyutlarda olacak. Haritayı iki aşamada oluşturacağız: Bazı kısımlarını XAML'de yerleştireceğiz, çünkü bu kolay, ancak arka plan karelerini Code-behind kısmında çizeceğiz, çünkü bu tekrarlanan ve dinamik bir işlem.

Game area XAML

Hadi, XAML ile başlayalım - sınırlı alanı oluşturmak için, içinde Canvas paneli ve bir Border kontrolü bulunan basit bir Window :

<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>

Oyunumuz şimdilik şu şekilde gözükecek:

Gerçek oyun alanı olarak bir Canvas kullanıyoruz, çünkü bu bize kontrolleri eklerken konumlar üzerinde tam kontrol sağlıyor. Bunu daha sonra kullanacağız, ancak şimdilik aşağıdaki noktalara dikkat edin:

• Pencere için genişlik/yükseklik tanımlanmadı - bunun yerine, tamamen kontrol etmemiz gereken kısım olan Canvas için tanımladık. Ardından, SizeToContent özelliğini WidthAndHeight olarak ayarlayarak, pencerenin boyutunun buna göre ayarlandığından emin olduk. Eğer genişlik/yükseklik için pencereyi tanımlasaydık, pencere içindeki kullanılabilir alan, işletim sisteminin Windows için kullandığı kenarlığa bağlı olurdu ki bu, tema gibi faktörlere göre değişebilir.
• We set the ClipToBounds property to True for the Canvas - this is important, because otherwise the controls we add would be able to expand beyond the boundaries of the Canvas panel

Drawing the background from Code-behind

Daha önce bahsettiğimiz gibi, oyun alanı için bir dama tahtası arka planı istiyorum. Birçok kareden oluştuğu için bunu Code-behind'den eklemek daha kolaydır (ya da bir resim kullanabiliriz, ancak o kadar dinamik değildir!). Bunu, penceredeki tüm kontrol elemanları başlatıldığında yapmamız gerekiyor ve bunun için şanslıyız ki, Window'da bunun için bir olay bulunuyor: ContentRendered. Bu olaya, Window deklarasyonunda takip edeceğiz:

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

Şimdi Code-behind'e geçelim ve başlayalım. İlk olarak, yılanı, arka plan karelerini vb. çizerken kullanılacak bir boyut tanımlamamız gerekiyor. Bu, Window sınıfınızın en üst kısmında yapılabilir:

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

Şimdi, ContentRendered olayımızda, tüm zor işleri yapacak olan DrawGameArea() metodunu çağıracağız. İşte bu şekilde görünüyor:

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;  
    }  
}

Daha önce belirtildiği gibi, bu makaleler diğerlerinden biraz daha fazla C# bilgisi gerektiriyor, bu yüzden her satırı incelemeyeceğim, ancak genel olarak yaptığımız şeyi açıklayabilirim: While döngüsü içinde, sürekli olarak Rectangle kontrol örnekleri oluşturuyor ve bunları Canvas'a (GameArea) ekliyoruz. Her birini Beyaz veya Siyah bir Fırçayla dolduruyoruz ve bir kare olmasını istediğimiz için SnakeSquareSize sabitimizi hem Genişlik hem de Yükseklik olarak kullanıyoruz. Her yinelemede, nextX ve nextY'yi, bir sonraki satıra ne zaman geçileceğini (sağ sınıra ulaştığımızda) ve ne zaman durulacağını (hem alt hem de sağ sınıra aynı anda ulaştığımızda) kontrol etmek için kullanıyoruz.

İşte sonuç:

Summary

Bu makalede, tüm oyun içeriğini barındırmak için kullanılan XAML'yi tanımladık ve oyun alanına siyah ve beyaz WPF Rectangle kontrol elemanları ekleyerek bir dama tahtası deseni çizdik. Bir sonraki adım, gerçek yılanı ve yiyeceğini eklemeye başlamak olacak.