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

上一篇：使用Silverlight制作简单的小游戏—Jewellery (Part 2)

 

实现Jewel类。Jewel类是继承于虚类JewelBase的，让我们先来看一下当前JewelBase的定义。

    public abstract class JewelBase
    {
        #region Properties

        public double Width { get; set; }
        public double Height { get; set; }
        public int IndexX { get; set; }
        public int IndexY { get; set; }
        public int Kind { get; set; }

        #endregion

        public event EventHandler Click;

        #region Abstract Methods

        public abstract void Initialize(Canvas panel);

        public abstract void MoveTo(int x, int y);

        public abstract void Destroy();

        #endregion
    }

动画过程用Storyboard来实现，在每次动画结束后，通知JewelEvent类。改进一下JewelBase中的abstract方法，如下：

        public virtual void MoveTo(int x, int y)
        {
            Storyboard board = this.GetMoveAnimation(x, y);
            board.Completed += new EventHandler(moveBoard_Completed);
            board.Begin();
        }

        private void moveBoard_Completed(object sender, EventArgs e)
        {
            JewelEvent.Add(JewelEventNames.Moved, this);  // move finish
        }

        public virtual void Destroy()
        {
            Storyboard board = this.GetDestroyAnimation();
            board.Completed += new EventHandler(destroyBoard_Completed);
            board.Begin();
        }

        private void destroyBoard_Completed(object sender, EventArgs e)
        {
            JewelEvent.Add(JewelEventNames.Destroy, this);  // destroy finish
        }

        #region Abstract Methods

        public abstract void Initialize(Canvas panel);

        protected abstract Storyboard GetMoveAnimation(int x, int y);

        protected abstract Storyboard GetDestroyAnimation();

        #endregion

好了，接下来就是在Jewel中实现这3个abstract方法。

这里使用SL中的Image显示图片，在Initialize方法中，主要是初始化Image的位置、大小，以及根据Kind选择图片源，并绑定Image的MouseLeftButtonDown事件，转化为JewelBase的Click事件，这样Jewel就可以响应用户的点击事件了。对于Jewel的Size，这里使用ScaleTransform来控制，所以要在Initialize中恢复Jewel的Size。

        public override void Initialize(Canvas canvas)
        {
            if (this.image == null)
            {
                this.image = new Image();
                this.image.Width = this.Width;
                this.image.Height = this.Height;

	        // use ScaleTransform to control Jewel's size
                this.image.RenderTransform = new ScaleTransform()
                {
                    CenterX = this.Width / 2,
                    CenterY = this.Height / 2,
                    ScaleX = 1.0,
                    ScaleY = 1.0
                };
                this.image.MouseLeftButtonDown += new MouseButtonEventHandler(rect_MouseLeftButtonDown);

                canvas.Children.Add(this.image);
            }

            Canvas.SetLeft(this.image, this.IndexX * this.Width);
            Canvas.SetTop(this.image, this.IndexY * this.Height);
            
            // reset
            ScaleTransform st = (ScaleTransform)this.image.RenderTransform;
            st.ScaleX = 1.0;
            st.ScaleY = 1.0;

            switch (this.Kind)
            {
                // set Image.Source
            }
        }

GetMoveAnimation方法和GetDestroyAnimation方法类似，就是构建并返回一个Storyboard实例。看下代码就好了。:)

        #region GetMoveAnimation Method

        protected override Storyboard GetMoveAnimation(int x, int y)
        {
            Storyboard board = new Storyboard();

            DoubleAnimation animation = new DoubleAnimation()
            {
                From = Canvas.GetLeft(this.image),
                To = x * this.Width,
                Duration = new Duration(TimeSpan.FromMilliseconds(speed))
            };
            Storyboard.SetTarget(animation, this.image);
            Storyboard.SetTargetProperty(animation, new PropertyPath("(Canvas.Left)"));
            board.Children.Add(animation);

            animation = new DoubleAnimation()
            {
                From = Canvas.GetTop(this.image),
                To = y * this.Height,
                Duration = new Duration(TimeSpan.FromMilliseconds(speed))
            };
            Storyboard.SetTarget(animation, this.image);
            Storyboard.SetTargetProperty(animation, new PropertyPath("(Canvas.Top)"));
            board.Children.Add(animation);

            return board;
        }

        #endregion

        #region GetDestroyAnimation Method

        protected override Storyboard GetDestroyAnimation()
        {
            Storyboard board = new Storyboard();

            DoubleAnimation animation = new DoubleAnimation()
            {
                From = 1.0,
                To = 0.0,
                Duration = new Duration(TimeSpan.FromMilliseconds(moveSpeed))
            };
            Storyboard.SetTarget(animation, this.image.RenderTransform);
            Storyboard.SetTargetProperty(animation, new PropertyPath("(ScaleX)"));
            board.Children.Add(animation);

            animation = new DoubleAnimation()
            {
                From = 1.0,
                To = 0.0,
                Duration = new Duration(TimeSpan.FromMilliseconds(moveSpeed))
            };
            Storyboard.SetTarget(animation, this.image.RenderTransform);
            Storyboard.SetTargetProperty(animation, new PropertyPath("(ScaleY)"));
            board.Children.Add(animation);

            return board;
        }

        #endregion

这就是整个Jewel类，再运行一下程序，我们会看到一个布满Jewel的Canvas，并且已经可以运行了。不过，这里还差一个部分要说，就是实现IJewelSelector接口，使得用户在点击Jewel时，可以看到一个闪烁的外框。这里利用动态变化的虚线框，来实现一个被选择的效果。在Selected方法中显示，在Unselected中隐藏。这里只贴出来动画的实现，具体的实现请看本文最后附加的源代码。

this.selectedLine = new Rectangle();
this.selectedLine.StrokeThickness = 2;
this.selectedLine.Stroke = new SolidColorBrush(Colors.Orange);
DoubleCollection dc = new DoubleCollection() { 1， 2 };
this.selectedLine.StrokeDashArray = dc;
this.selectedLine.StrokeDashOffset = 0;
this.selectedLine.StrokeDashCap = PenLineCap.Round;

canvas.Children.Add(this.selectedLine);

                // set animation
Storyboard board = new Storyboard();

DoubleAnimation animation = new DoubleAnimation()
{
    From = 0,
    To = 3,
    Duration = new Duration(TimeSpan.FromMilliseconds(300)),
    RepeatBehavior = RepeatBehavior.Forever,
};
Storyboard.SetTarget(animation, this.selectedLine);
Storyboard.SetTargetProperty(animation, new PropertyPath("(StrokeDashOffset)"));
board.Children.Add(animation);

board.Begin();

完结。

 

源代码：Jewellery.zip