使用Silverlight制作简单的小游戏—Jewellery (Part 1)

演示页：http://seaworm.110mb.com/Jewellery.htm

逢三消除，很简单的小游戏，没有花哨的效果。新学Silverlight，这是第一个作品，边学边写，都是用的最基础的东西，大师们就不用看了。 :)

第一次写Blog，不知道怎么描述会比较好。凭感觉写，以后慢慢改进，写的不好，望见谅。

开发环境：VS2008，Silverlight 3.0

首先，在VS中新建一个Silverlight的工程，取名Jewellery（这个很废话，但是不写又觉得不合适。O(∩_∩)O~）。接下来改写MainPage.xaml，改写后的XAML大致如下：

<Grid HorizontalAlignment="Center">
        <Grid.RowDefinitions>
            <RowDefinition Height="50" />
            <RowDefinition Height="750" />
            <RowDefinition Height="75" />
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="300" />
            <ColumnDefinition Width="300" />
        </Grid.ColumnDefinitions>
        <TextBox x:Name="Timer" Grid.Column="0" Grid.Row="0" TextAlignment="Left" Foreground="White" Text="0.00:00:00"  />
        <TextBox x:Name="Counter" Grid.Column="1" Grid.Row="0" TextAlignment="Right" Foreground="Yellow" Text="000" />
        <Canvas x:Name="Carrier" Grid.ColumnSpan="2" Grid.Row="1" Width="600" Height="750" Background="Gray">
        </Canvas>
        <Button Grid.Row="2" Grid.Column="0" Content="Start" Click="StartButton_Click"></Button>
        <Button Grid.Row="2" Grid.Column="1" Content="Stop" Click="StopButton_Click"></Button>
    </Grid>

使用Grid布局，用两个TextBox分别表示用掉的时间和获得的分数，一块Canvas在中间，作为游戏显示区，最下面是两个Button，用于Start和Stop。

布局有了，现在开始设计游戏架构。我喜欢从使用的角度出发，设计代码。首先我希望有这样一个类，可以在用户点Start的时候，传一个Canvas给它，由它接管这个Canvas，直到用户点Stop。所有，我有这样一个类：

public class Jewels
{
        public Start(Canvas canvas) { }

        public Stop() { }
}

光有Canvas是不行的，这个类还需要知道每个Jewel的大小，以及每行、列有多少个Jewel。其实，知道每个Jewel的大小，就能知道Canvas能放下多少个Jewel，不过这里我懒了一下，因为Canvas的大小是写死的，所以没有专门去算这个，而是作为参数传给这个类。于是，增加构造函数如下：

public Jewels(double jewelWidth, double jewelHeight, int rowCount, int columnCount) { }

这里应该还需要一个参数，就是Jewel的种类，不过，这个我也写死了，因为我就只有那么几张图片。 :)

该定义一个数组来存储Jewel了，首先需要一个Jewel的对象。不过，一开始不应该太关注Jewel本身的实现，比如，如何显示，如何移动等。我们只需要找出，一个Jewel需要具备哪些属性和方法。所以，一开始，我们先定义一个基类JewelBase如下：

public abstract class JewelBase
{
        public double Width；
        public double Height；
        public int IndexX；// index of row
        public int IndexY；// index of column
        public int Kind；// kind of jewel

}

基本的属性就这些，让我们在Jewels类中加入Jewel数组，由Jewels来管理所有的Jewel。这里使用了泛型来改写Jewels类：

public class Jewels<T> where T : JewelBase, new()
{
        private T[,] JewelMap
        {
            get;
            set;
        }
}

使用new()是为了可以在Jewels内部方便构建Jewel实例。好了，为了可以构建Jewels，先定义一个Jewel类，继承于JewelBase，先不管实现。

public class Jewel : JewelBase
{
}

现在可以回来写一下MainPage.xaml.cs文件了。

public partial class MainPage : UserControl
{
        private double jewelWidth = 50;
        private double jewelHeight = 50;
        private Jewels<Jewel> Jewels;

        public MainPage()
        {
            InitializeComponent();
            this.Initialize();
        }

        private void Initialize()
        {
            this.Jewels = new Jewels<Jewel>(this.jewelWidth, this.jewelHeight, 12, 15);
        }

        private void StartButton_Click(object sender, RoutedEventArgs e)
        {
            this.Jewels.Start(this.Carrier);
        }

        private void StopButton_Click(object sender, RoutedEventArgs e)
        {
            this.Jewels.Stop();
        }
}

看起来很简单的样子。:)现在可以试着Build出来看一下了，虽然什么都没有。O(∩_∩)O~

接下来就是正式的工作了，一点点来实现具体的逻辑。

未完待续…