Silverlight动画基础二：动画与向量-弹珠小游戏
在上一篇中主要是简单介绍了向量在动画中的简单应用。下面使用向量来完成一个简单的游戏 Paddle Gam。最终运行效果图如下：
Paddle Game有以下几个对象：
1.ball 用于运动的小球
2.paddle 用于控制小球不要弹出界外
3.wall 墙壁，当小球碰到墙壁后会反弹回来
4.PaddleGame 主容器
一、ball对象
首先来看看ball.xaml的代码,25*25的白色小球：
<Canvas Width="25" Height="25" x:Name="LayoutRoot">
<Ellipse Width="25" Height="25" Fill="#FFFFFFFF" Stroke="#FF000000"/>
</Canvas>
ball.xaml.cs代码：
public partial class ball : UserControl
{
//容器高度
public double rootHeight;
//X轴速度
public double VelocityX;
//Y轴速度
public double VelocityY;
//用于随机生成初始位置
private Random rng = new Random();
public ball()
{
InitializeComponent();
}
/// <summary>
/// 初始化小球的起始位置和速度
/// </summary>
public void Init()
{
VelocityX = 5;
VelocityY = rng.Next(1, 8);
Canvas.SetLeft(this, 65);
Canvas.SetTop(this,rng.Next( Convert.ToInt16(this.Height),Convert.ToInt16(rootHeight-this.Height)));
}
}
二、paddle对象
下面为paddle.xaml代码，声明了一个20*100的矩形：
<Canvas x:Name="LayoutRoot">
<Rectangle x:Name="paddleRectangle" Width="20" Height="100" RadiusX="3" RadiusY="3"
Stroke="#FF888888" Fill="#FF494747"/>
</Canvas>
paddle.xaml.cs代码，用于捕捉焦点、实现鼠标拖动效果：
public partial class paddle : UserControl
{
//paddle移动速度
public double paddleYVelocity;
//容器高度
public double rootHeight;
//是否捕获鼠标
private bool isMouseCaptured;
//当前鼠标位置
private Point mousePosition;
private double oldY;
private double posY;
public paddle()
{
InitializeComponent();
this.MouseLeftButtonDown += new MouseButtonEventHandler(paddle_MouseLeftButtonDown);
this.MouseLeftButtonUp += new MouseButtonEventHandler(paddle_MouseLeftButtonUp);
this.MouseMove += new MouseEventHandler(paddle_MouseMove);
}
void paddle_MouseMove(object sender, MouseEventArgs e)
{
FrameworkElement item = sender as FrameworkElement;
if (isMouseCaptured)
{
//计算paddle的移动速度
oldY = posY;
posY = e.GetPosition(null).Y;
paddleYVelocity = (posY - oldY) / 2;
//根据鼠标移动距离，计算paddle的当前位置
double deltaV = e.GetPosition(null).Y - mousePosition.Y;
double newTop = deltaV + Canvas.GetTop(item);
//检测边界，当在碰到上下边时设置其位置为0和最大
if (newTop < 0)
newTop = 0;
if (newTop + this.Height > rootHeight)
newTop = rootHeight - this.Height;
item.SetValue(Canvas.TopProperty, newTop);
mousePosition = e.GetPosition(null);
}
}
void paddle_MouseLeftButtonUp(object sender, MouseButtonEventArgs e)
{
FrameworkElement item = sender as FrameworkElement;
//移除捕获鼠标
isMouseCaptured = false;
item.ReleaseMouseCapture();
mousePosition.Y = 0;
item.Cursor = null;
}
void paddle_MouseLeftButtonDown(object sender, MouseButtonEventArgs e)
{
FrameworkElement item = sender as FrameworkElement;
//保存鼠标当前位置
mousePosition = e.GetPosition(null);
//设置捕获焦点
isMouseCaptured = true;
item.CaptureMouse();
item.Cursor = Cursors.Hand;
}
}
三、wall对象
wall对象创建了一面红色的墙，无其他逻辑，代码如下：
<Canvas x:Name="brickWall" Width="64" Height="597" Background="#FFFFFFFF">
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Left="44" Canvas.Top="-1"/>
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Left="44" Canvas.Top="61"/>
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Left="44" Canvas.Top="123"/>
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Left="44" Canvas.Top="185"/>
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Left="44" Canvas.Top="247"/>
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Left="44" Canvas.Top="309"/>
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Left="44" Canvas.Top="371"/>
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Left="44" Canvas.Top="433"/>
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Left="44" Canvas.Top="495"/>
<Rectangle Width="20" Height="40" Fill="#FFCC1212" Canvas.Left="44" Canvas.Top="557"/>
<Rectangle Width="20" Height="30" Fill="#FFCC1212" Canvas.Left="22" Canvas.Top="0"/>
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Left="22" Canvas.Top="32"/>
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Left="22" Canvas.Top="94"/>
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Left="22" Canvas.Top="156"/>
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Left="22" Canvas.Top="218"/>
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Left="22" Canvas.Top="280"/>
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Left="22" Canvas.Top="342"/>
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Left="22" Canvas.Top="404"/>
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Left="22" Canvas.Top="466"/>
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Left="22" Canvas.Top="528"/>
<Rectangle Width="20" Height="7" Fill="#FFCC1212" Canvas.Left="22" Canvas.Top="590"/>
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Top="0" Canvas.Left="0" />
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Top="62" Canvas.Left="0" />
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Top="124" Canvas.Left="0" />
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Top="186" Canvas.Left="0" />
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Top="248" Canvas.Left="0" />
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Top="310" Canvas.Left="0" />
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Top="372" Canvas.Left="0" />
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Top="434" Canvas.Left="0" />
<Rectangle Width="20" Height="60" Fill="#FFCC1212" Canvas.Top="496" Canvas.Left="0" />
<Rectangle Width="20" Height="39" Fill="#FFCC1212" Canvas.Top="558" Canvas.Left="0" />
</Canvas>
主要的几个对象已经创建完成，下面来实现关键代码。
四、PaddleGame对象
PaddleGame对象包含了游戏的主逻辑。主要功能：判断小球状态（位置），控制小球在画布中移动不用超出范围，
记录分数，控制主要逻辑。
PaddleGame.xaml代码：
<Canvas Height="600" Width="800" x:Name="LayoutRoot">
<Canvas.Resources>
<Storyboard x:Name="Move" Duration="00:00:00.00"/>
<!--隐藏消息窗动画-->
<Storyboard x:Name="hideMessages">
<DoubleAnimation Duration="00:00:00.50" To="0" Storyboard.TargetName="gameMessages"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"/>
<DoubleAnimation Duration="00:00:00.50" To="0" Storyboard.TargetName="gameMessages"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"/>
</Storyboard>
<!--现实消息窗动画-->
<Storyboard x:Name="showMessages">
<DoubleAnimation Duration="00:00:00.50" To="1" Storyboard.TargetName="gameMessages"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)"/>
<DoubleAnimation Duration="00:00:00.50" To="1" Storyboard.TargetName="gameMessages"
Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)"/>
</Storyboard>
</Canvas.Resources>
<Canvas.Background>
<LinearGradientBrush EndPoint="0.875,0.5" StartPoint="0.125,0.5">
<GradientStop Color="#FF030057"/>
<GradientStop Color="#FF020105" Offset="1"/>
</LinearGradientBrush>
</Canvas.Background>
<!--容器-->
<Canvas Height="600" Width="800" x:Name="gameElements"/>
<!--显示剩余小球数量-->
<TextBlock x:Name="msgRemaining" Width="146" Height="24" Canvas.Left="8" Canvas.Top="8" FontFamily="Arial,SimSun"
Foreground="#FFFFFFFF" Text="剩余小球 : 3" TextWrapping="Wrap"/>
<!--显示当前得分-->
<TextBlock x:Name="msgScore" Width="146" Height="24" Canvas.Left="155" Canvas.Top="8" FontFamily="Arial,SimSun"
Foreground="#FFFFFFFF" Text="得 分 : 0" TextWrapping="Wrap" />
<!--消息窗口-->
<Canvas Width="800" Height="600" x:Name="gameMessages" RenderTransformOrigin="0.5,0.5">
<Canvas.RenderTransform>
<TransformGroup>
<ScaleTransform/>
<SkewTransform/>
<RotateTransform/>
<TranslateTransform/>
</TransformGroup>
</Canvas.RenderTransform>
<Rectangle x:Name="msgBackground" Width="357" Height="258" Stroke="#FF000000" Canvas.Left="221.5" Canvas.Top="171"
RadiusX="12" RadiusY="12" IsHitTestVisible="False">
<Rectangle.Fill>
<LinearGradientBrush EndPoint="1.04299998283386,1.04999995231628"
StartPoint="-0.0659999996423721,-0.061999998986721">
<GradientStop Color="#FFD4D3D3" Offset="0"/>
<GradientStop Color="#FF4D4D4D" Offset="0.96"/>
</LinearGradientBrush>
</Rectangle.Fill>
</Rectangle>
<TextBlock x:Name="msgGameText" Width="315" Height="217.5" Canvas.Left="242.5" Canvas.Top="191.25" TextWrapping="Wrap"
FontFamily="Arial,SimSun" FontSize="14" Foreground="#FF000000" />
<!--开始按钮-->
<Button Height="28" x:Name="btnPlay" Width="100" Content=" 开a 始? " Canvas.Top="380" Canvas.Left="350" Cursor="Hand"/>
</Canvas>
</Canvas>
下面是PaddleGamev.xaml.cs代码：
public partial class PaddleGame : Page
{
private int lives = 3;
private paddle gamePaddle = null;
private wall bricks = null;
private ball gameBall = null;
private double score = 0.0;
public PaddleGame()
{
InitializeComponent();
//初始场景，将各个元素添加到容器中，并设置其位置
gamePaddle = new paddle();
gamePaddle.SetValue(Canvas.LeftProperty, 44.00);
gamePaddle.SetValue(Canvas.TopProperty, 92.00);
gamePaddle.Visibility = Visibility.Collapsed;
gamePaddle.rootHeight = LayoutRoot.Height;
gameElements.Children.Add(gamePaddle);
bricks = new wall();
bricks.SetValue(Canvas.LeftProperty, 735.00);
bricks.SetValue(Canvas.TopProperty,-4.00);
gameElements.Children.Add(bricks);
gameBall = new ball();
gameBall.Visibility = Visibility.Collapsed;
gameBall.rootHeight = LayoutRoot.Height;
gameElements.Children.Add(gameBall);
msgGameText.Text = "小游戏·\n\n使用鼠标拖拽面板控制小球,保持小球在容器内运动.\n\n有三次机会.\n\n小球碰到墙壁将获得5分\n出界,你都将失去一个小球.";
btnPlay.Click += new RoutedEventHandler(btnPlay_Click);
hideMessages.Completed += new EventHandler(hideMessages_Completed);
Move.Completed += new EventHandler(Move_Completed);
}
void Move_Completed(object sender, EventArgs e)
{
//根小球的X/Y轴速度，设置小球位置
Canvas.SetLeft(gameBall, Canvas.GetLeft(gameBall) + gameBall.VelocityX);
Canvas.SetTop(gameBall, Canvas.GetTop(gameBall) + gameBall.VelocityY);
//检测上下边界 ，若到达边界则改变小球方向，并设置小球的位置在容器内
if (Canvas.GetTop(gameBall) <= 0)
{
Canvas.SetTop(gameBall, 0);
//改变方向
gameBall.VelocityY *= -1;
}
else if (Canvas.GetTop(gameBall) + gameBall.Height >= LayoutRoot.Height)
{
Canvas.SetTop(gameBall, LayoutRoot.Height - gameBall.Height);
gameBall.VelocityY *= -1;
}
//检测小球是否触碰到墙壁，若触碰到墙壁更改方向并设置其位置不超过墙壁位置
if (Canvas.GetLeft(gameBall) + gameBall.Width >= Canvas.GetLeft(bricks))
{
SetScore(5);
Canvas.SetLeft(gameBall, Canvas.GetLeft(bricks) - gameBall.Width);
gameBall.VelocityX *= -1;
}
//检测小球与paddle对象的位置
//检测小球的上下和左右位置是否在paddle的触碰范围内。
if (Canvas.GetTop(gameBall) >= Canvas.GetTop(gamePaddle) &&
Canvas.GetTop(gameBall) <= Canvas.GetTop(gamePaddle) +
gamePaddle.Height)
{
if (Canvas.GetLeft(gameBall) <= Canvas.GetLeft(gamePaddle) + gamePaddle.Width &&
Canvas.GetLeft(gameBall) >= Canvas.GetLeft(gamePaddle))
{
gameBall.VelocityY += gamePaddle.paddleYVelocity;
gameBall.VelocityX *= -1;
}
}
//若小球超出范围，调用nextball方法减少小球数量
if (Canvas.GetLeft(gameBall) <= -gameBall.Width)
{
Move.Stop();
nextBall();
}
else
{
Move.Begin();
}
}
void hideMessages_Completed(object sender, EventArgs e)
{
gameBall.Visibility = Visibility.Visible;
gamePaddle.Visibility = Visibility.Visible;
gameBall.Init();
Move.Begin();
}
void btnPlay_Click(object sender, RoutedEventArgs e)
{
hideMessages.Begin();
}
private void nextBall()
{
gameBall.Visibility = Visibility.Collapsed;
gamePaddle.Visibility = Visibility.Collapsed;
lives -= 1;
msgRemaining.Text = "剩余小球 : " + lives;
switch (lives)
{
case 2:
SetScore(-10);
msgGameText.Text = "加油,还有两次机会..";
break;
case 1:
SetScore(-10);
msgGameText.Text = "小心咯,就剩下一次机会 .";
break;
case 0:
SetScore(-10);
msgGameText.Text = "很遗憾,游戏结束了!! 你的最后得分是 ："+score.ToString("0.0");;
btnPlay.Visibility = Visibility.Collapsed;
break;
}
showMessages.Begin();
}
private void SetScore(double sc)
{
score += sc;
msgScore.Text = "得 分 : " + score.ToString("0.0");
}
}
自此全部代码完毕。这个示例主要是对使用向量和动画进行结合的实践。
运行效果演示地址：点击查看
总结：使用向量的特性来控制小球运动，并且根据元素之间的位置来进行简单的检测。
【注：本文技术论点源于《Foundation Silverlight 3 Animation》,个人理解可能存在差异,请参考原著】
