游戏人生Silverlight(2) - 趣味钢琴[Silverlight 2.0(c#)]

[源码下载]

[align=center]游戏人生Silverlight(2) - 趣味钢琴[Silverlight 2.0(c#)][/align]

作者：webabcd

介绍
使用 Silverlight 2.0(c#) 开发一个趣味钢琴

玩法
打开音箱，从左侧列表选择要挑战的乐谱，右侧会出现对应的乐谱提示动画，等按键提示移动到目标区后敲击键盘上对应的按键

在线DEMO

思路
1、添加多个MediaElement控件，循环使用，以达到同时播放多个音阶的效果
2、提示按键模块分3组动画，分别为提示部分、目标部分和离开部分，进入目标区和离开目标区都要触发对应的事件，以使外部判断用户是否按照提示正确地敲击了按键

关键代码
1、钢琴音阶播放器
ScalePlayer.xaml.cs


using System;


using System.Collections.Generic;


using System.Linq;


using System.Net;


using System.Windows;


using System.Windows.Controls;


using System.Windows.Documents;


using System.Windows.Input;


using System.Windows.Media;


using System.Windows.Media.Animation;


using System.Windows.Shapes;




namespace YYPiano.Controls.Parts


{


public partial class ScalePlayer : UserControl


{


// MediaElement 控件总数


private int _count = 32;




// MediaElement 控件集合的索引


private int _index = 0;




public ScalePlayer()


{


InitializeComponent();




this.Loaded += new RoutedEventHandler(Player_Loaded);


}




void Player_Loaded(object sender, RoutedEventArgs e)


{


// 在 Canvas 上添加指定数量的 MediaElement 控件


for (int i = 0; i < _count; i++)


{


var element = new MediaElement();


element.Volume = 1d;




root.Children.Add(element);


}


}




/// <summary>


/// 播放音阶


/// A 键对应 Scale 文件夹内的 A.mp3，以此类推


/// A 键对应 C 大调的低音 dou，以此类推


/// </summary>


/// <param name="key">键值</param>


public void Play(Key key)


{


if (key >= Key.A && key <= Key.Z)


{


// 循环使用 MediaElement 控件集合中的控件


if (_index > _count - 1)


_index = 0;




// 设置 MediaElement 的 Source 并播放


var element = root.Children[_index] as MediaElement;


element.Source = new Uri("/YYPiano;component/Scale/" + key.ToString() + ".mp3", UriKind.Relative);


element.Stop();


element.Play();




_index++;


}


}


}


}

2、按键提示动画
AnimationKey.xaml

<UserControl x:Class="YYPiano.Controls.Parts.AnimationKey"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<Canvas>
<!--3个椭圆，目标区，按键动画进入该区域后敲击则为有效敲击-->
<Ellipse x:Name="target" Width="80" Height="80" Stroke="#F80" Fill="Transparent" StrokeThickness="1" Canvas.Left="0" Canvas.Top="250" />
<Ellipse x:Name="target2" Width="80" Height="80" Stroke="#F80" Fill="Transparent" StrokeThickness="1" Canvas.Left="120" Canvas.Top="250" />
<Ellipse x:Name="target3" Width="80" Height="80" Stroke="#F80" Fill="Transparent" StrokeThickness="1" Canvas.Left="240" Canvas.Top="250" />

<!--提示按键-->
<Border x:Name="container" BorderBrush="Gray" BorderThickness="1" Width="50" Height="50" CornerRadius="50" Canvas.Left="135" RenderTransformOrigin="0.5, 0.5">
<TextBlock x:Name="key" TextAlignment="Center" VerticalAlignment="Center" FontSize="40" FontWeight="Bold">
</TextBlock>
<Border.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="rt" />
<TranslateTransform x:Name="tt" />
<ScaleTransform x:Name="st" ScaleX="0.3" ScaleY="0.3" />
</TransformGroup>
</Border.RenderTransform>
</Border>

<Canvas.Resources>
<!--主动画（缓冲提示）-->
<Storyboard x:Name="mainAni" Completed="mainAni_Completed">
<!--坐标-->
<DoubleAnimation x:Name="targetX" From="0" To="0" Duration="0:0:4" Storyboard.TargetName="tt" Storyboard.TargetProperty="X" />
<DoubleAnimation From="0" To="250" Duration="0:0:4" Storyboard.TargetName="tt" Storyboard.TargetProperty="Y" />

<!--旋转-->
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="rt" Storyboard.TargetProperty="Angle" RepeatBehavior="1x" >
<SplineDoubleKeyFrame Value="366" KeySpline="0.1,0 0.2,0.95" KeyTime="0:0:4" />
</DoubleAnimationUsingKeyFrames>

<!--缩放-->
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="st" Storyboard.TargetProperty="ScaleX">
<SplineDoubleKeyFrame Value="1" KeySpline="0.1,0 0.3,0.8" KeyTime="0:0:4" />
</DoubleAnimationUsingKeyFrames>
<DoubleAnimationUsingKeyFrames Storyboard.TargetName="st" Storyboard.TargetProperty="ScaleY">
<SplineDoubleKeyFrame Value="1" KeySpline="0.1,0 0.3,0.8" KeyTime="0:0:4" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>

<!--进入目标区后的动画-->
<Storyboard x:Name="insideAni" Completed="insideAni_Completed" Duration="0:0:0.4">
<DoubleAnimation To="310" Storyboard.TargetName="tt" Storyboard.TargetProperty="Y" />
</Storyboard>

<!--离开目标区后的动画-->
<Storyboard x:Name="outsideAni">
<DoubleAnimation To="400" Storyboard.TargetName="tt" Storyboard.TargetProperty="Y" />
<DoubleAnimation To="0" Storyboard.TargetName="container" Storyboard.TargetProperty="Opacity" />
</Storyboard>
</Canvas.Resources>
</Canvas>
</UserControl>

AnimationKey.xaml.cs


using System;


using System.Collections.Generic;


using System.Linq;


using System.Net;


using System.Windows;


using System.Windows.Controls;


using System.Windows.Documents;


using System.Windows.Input;


using System.Windows.Media;


using System.Windows.Media.Animation;


using System.Windows.Shapes;




namespace YYPiano.Controls.Parts


{


public partial class AnimationKey : UserControl


{


public AnimationKey()


{


InitializeComponent();


}




/// <summary>


/// 键值 A - Z，动画显示，用于提示用户应该敲什么键


/// </summary>


public Key Key


{


get { return Convert.ToChar(key.Text).ToKey(); }


set { key.Text = value.ToChar().ToString(); }


}




/// <summary>


/// 开始动画


/// </summary>


public void Start()


{


mainAni.Begin();


}




/// <summary>


/// 停止动画


/// </summary>


public void Stop()


{


mainAni.Stop();


insideAni.Stop();


outsideAni.Stop();


}




/// <summary>


/// 动画开始时间


/// </summary>


public TimeSpan BeginTime


{


set { mainAni.BeginTime = value; }


}




private int _targetIndex;


/// <summary>


/// UI 上设置了 3 个目标区，设置键的动画最终要落到哪个区上


/// </summary>


public int TargetIndex


{


set


{


if (value == 0)


targetX.To = -120;


else if (value == 1)


targetX.To = 0;


else if (value == 2)


targetX.To = 120;


else


targetX.To = 0;




_targetIndex = value;


}


}




/// <summary>


/// 主动画完成后


/// </summary>


/// <param name="sender"></param>


/// <param name="e"></param>


private void mainAni_Completed(object sender, EventArgs e)


{


if (_targetIndex == 0)


target.Fill = new SolidColorBrush(Colors.Orange);


else if (_targetIndex == 1)


target2.Fill = new SolidColorBrush(Colors.Orange);


else if (_targetIndex == 2)


target3.Fill = new SolidColorBrush(Colors.Orange);




insideAni.Begin();




OnInside();


}




/// <summary>


/// 目标区动画完成后


/// </summary>


/// <param name="sender"></param>


/// <param name="e"></param>


private void insideAni_Completed(object sender, EventArgs e)


{


if (_targetIndex == 0)


target.Fill = new SolidColorBrush(Colors.Transparent);


else if (_targetIndex == 1)


target2.Fill = new SolidColorBrush(Colors.Transparent);


else if (_targetIndex == 2)


target3.Fill = new SolidColorBrush(Colors.Transparent);




outsideAni.Begin();




OnOutside();


}




/// <summary>


/// 动画进入目标区后的事件


/// </summary>


public event EventHandler<PianoKeyEventArgs> Inside;


public void OnInside()


{


if (Inside != null)


{


Inside(this, new PianoKeyEventArgs() { Key = this.Key });


}


}




/// <summary>


/// 动画离开目标区后的事件


/// </summary>


public event EventHandler<PianoKeyEventArgs> Outside;


public void OnOutside()


{


if (Outside != null)


{


Outside(this, new PianoKeyEventArgs() { Key = this.Key });


}


}


}


}

未完待续>>