【项目二】WPF掷骰子
一、素材地址:
https://icons8.com/icons/set/dice
二、需求分析:
WPF框架实现一个掷骰子动画:有6个点数的骰子图片,初始时图片默认为1点,当点击开始按钮后,随机变换图片,2s后定格到当前骰子点数。
三、代码实现:
1.需要将骰子的6张图片放在项目的"Images"文件夹下,并设置它们的Build Action为"Resource"。
2.完整代码:
MainWindow.xaml
1 Title="掷骰子" Height="550" Width="750" WindowStartupLocation="CenterScreen"> 2 <Grid> 3 <Grid.RowDefinitions> 4 <RowDefinition Height="1*"/> 5 <RowDefinition/> 6 </Grid.RowDefinitions> 7 <Grid.ColumnDefinitions> 8 <ColumnDefinition Width="1*"/> 9 <ColumnDefinition/> 10 </Grid.ColumnDefinitions> 11 <Image x:Name="diceImage" Source="Images/1.png" Width="150" Height="150" Grid.Row="0" Grid.Column="0"/> 12 <Button Content="开始掷骰" Click="StartButton_Click" Width="100" Height="50" Grid.Row="1" Grid.Column="0" FontSize="18" Background="#FFE6E6E6"/> 13 </Grid>
MainWindow.xaml.cs
1 private void StartButton_Click(object sender, RoutedEventArgs e) 2 { 3 // 点击开始按钮时执行骰子动画 4 AnimateDiceRoll(); 5 } 6 7 private async void AnimateDiceRoll() 8 { 9 // 获取骰子图片资源的URI路径 10 Uri diceUri = new Uri("pack://application:,,,/Images/{0}.png"); 11 12 // 创建一个随机数生成器 13 Random random = new Random(); 14 15 // 骰子动画持续时间(毫秒) 16 int animationDuration = 2000; 17 18 // 计算动画的帧数和每帧间隔时间 19 int numFrames = animationDuration / 70; 20 int frameDuration = animationDuration / numFrames; 21 22 // 执行骰子动画 23 for (int i = 0; i < numFrames; i++) 24 { 25 // 随机选择一个骰子点数 当前点数 26 int diceNumber = random.Next(1, 7); 27 28 // 设置当前帧的骰子图片 29 Uri currentDiceUri = new Uri(string.Format(diceUri.ToString(), diceNumber)); 30 BitmapImage currentDiceImage = new BitmapImage(currentDiceUri); 31 diceImage.Source = currentDiceImage; 32 33 // 等待一段时间,模拟动画效果 34 await Task.Delay(frameDuration); 35 } 36 } 37 38 public void BoyMove() 39 { 40 41 } 42 public void GirlMove() 43 { 44 45 } 46 public void EndPoint()//终点 47 { 48 49 }