练手WPF——扫雷小游戏的简易实现（上）
Posted moonblogcore
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了练手WPF——扫雷小游戏的简易实现（上）相关的知识，希望对你有一定的参考价值。
一、创建项目
1.创建WPF项目，设置初始化窗口大小（初级难度）：高x宽为430x350。
2.添加文件夹Images，并添加相关图片。
3.xaml中引入图片资源。
<Window.Resources> <BitmapImage x:Key="ImgSpace" UriSource="/Images/space.bmp"/> <BitmapImage x:Key="ImgMine" UriSource="/Images/mine.png"/> <BitmapImage x:Key="ImgNum1_8" UriSource="/Images/num1_8.png"/> <BitmapImage x:Key="ImgForeground" UriSource="/Images/foreImg.png"/> <BitmapImage x:Key="ImgMineOrTimer" UriSource="/Images/mineAndTimer.png"/> <BitmapImage x:Key="ImgBomb" UriSource="/Images/bomb.png"/> </Window.Resources>
4.添加窗口元素
(1)菜单
<DockPanel> <Menu DockPanel.Dock="Top"> <MenuItem Header="游戏(_G)"> <MenuItem x:Name="MenuGameStart" Header="开始游戏(_S)" Click="MenuGameStart_Click"/> <Separator/> <MenuItem x:Name="MenuGameExit" Header="退出游戏(_x)" Click="MenuGameExit_Click"/> </MenuItem> <MenuItem Header="级别(_L)"> <MenuItem Header="初级(_L)" x:Name="MenuLowLevel" IsChecked="True" Click="MenuLowLevel_Click"/> <MenuItem Header="中级(_M)" x:Name="MenuMiddleLevel" IsChecked="False" Click="MenuMiddleLevel_Click"/> <MenuItem Header="高级(_H)" x:Name="MenuHighLevel" IsChecked="False" Click="MenuHighLevel_Click"/> </MenuItem> <MenuItem Header="选项(_O)"> <MenuItem x:Name="MenuOptionsMusic" Header="音乐音效(_S)" IsCheckable="True" IsChecked="True" Click="MenuOptionsMusic_Click"/> <Separator/> <MenuItem x:Name="MenuShowAllMine" Header="显示地雷(_O)" Click="MenuShowAllMine_Click"/> <MenuItem x:Name="MenuRestoreMap" Header="继续游戏(_F)" Click="MenuRestoreMap_Click"/> <Separator /> <MenuItem x:Name="MenuResetData" Header="重置记录(_R)" Click="MenuResetData_Click" /> </MenuItem> <MenuItem Header="帮助(_H)"> <MenuItem x:Name="MenuHelpAbout" Header="关于(_A)..." Click="MenuHelpAbout_Click"/> </MenuItem> </Menu> </DockPanel>
(2)在菜单之后，</DockPanel>之前添加其他界面元素
<Grid Margin="3" DockPanel.Dock="Top"> <Grid.RowDefinitions> <RowDefinition Height="40"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <StackPanel Grid.Row="0" Background="SkyBlue" VerticalAlignment="Center"> <Grid Margin="2 2 2 2"> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <StackPanel Grid.Column="0" HorizontalAlignment="Right" Margin="0 0 60 0" Orientation="Horizontal"> <Image x:Name="ImgClock" Width="35" Height="35" /> <Border Height="30" Width="60" CornerRadius="6" BorderThickness="1" VerticalAlignment="Center" Background="#333333"> <TextBlock x:Name="textBlockTime" Text="" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14" Foreground="AliceBlue"/> </Border> </StackPanel> <StackPanel Grid.Column="1" HorizontalAlignment="Left" Orientation="Horizontal" Margin="40 0 0 0"> <Image x:Name="ImgMineNum" Width="35" Height="35" /> <Border Height="30" Width="60" CornerRadius="6" BorderThickness="1" VerticalAlignment="Center" Background="#333333"> <TextBlock x:Name="textBlockMineNum" Text="" VerticalAlignment="Center" HorizontalAlignment="Center" FontSize="14" Foreground="AliceBlue"/> </Border> </StackPanel> </Grid> </StackPanel> <StackPanel Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top"> <Canvas x:Name="BackCanvas" Width="315" Height="315" Background="LightCyan" Margin="10" /> </StackPanel> <StackPanel Grid.Row="1" HorizontalAlignment="Left" VerticalAlignment="Top"> <Canvas x:Name="ForeCanvas" Width="315" Height="315" Margin="10" MouseLeftButtonDown="ForeCanvas_MouseLeftButtonDown" MouseRightButtonDown="ForeCanvas_MouseRightButtonDown"/> </StackPanel> </Grid>
其中两个Image用于显示时钟和地雷数图例，其后两个TextBlock分别用于显示读秒数和剩余地雷数。
两个重叠的Canvas，分别显示底层图块和前景图块。底层图块游戏开始后是固定的，其中会显示随机分布的地雷及其周边地雷数值，而前景图块可以通过鼠标点击进行移除或标记为问号或小红旗。
二、载入图片资源
1、添加一个静态图片帮助类ImageHelper，方便以后的图片切片操作。
public static class ImageHelper { /// <summary> /// BitmapSource图片源剪切操作函数 /// </summary> /// <param name="bmpSource">等待剪切的源</param> /// <param name="cut">剪切矩形</param> /// <returns>已剪切的图片源</returns> public static BitmapSource CutImage(BitmapSource bmpSource, Int32Rect cut) { return new CroppedBitmap(bmpSource, cut); } /// <summary> /// 将BitmapImage转换为BitmapSource /// </summary> /// <param name="bitmapImage">待转换的BitmapImage</param> /// <returns>BitmapSource</returns> public static BitmapSource BitmapImageToBitmapSource(BitmapImage bitmapImage) { ImageSource imageSource = bitmapImage; Bitmap bitmap = ImageSourceToBitmap(imageSource); BitmapSource bitmapSource = BitmapToBitmapImage(bitmap);
bitmap.Dispose(); return bitmapSource; } /// <summary> /// 将ImageSource转为Bitmap /// </summary> /// <param name="imageSource"></param> /// <returns></returns> public static System.Drawing.Bitmap ImageSourceToBitmap(ImageSource imageSource) { BitmapSource m = (BitmapSource)imageSource; Bitmap bmp = new Bitmap(m.PixelWidth, m.PixelHeight, System.Drawing.Imaging.PixelFormat.Format32bppPArgb); System.Drawing.Imaging.BitmapData data = bmp.LockBits(new Rectangle(System.Drawing.Point.Empty, bmp.Size), System.Drawing.Imaging.ImageLockMode.WriteOnly, System.Drawing.Imaging.PixelFormat.Format32bppPArgb); m.CopyPixels(Int32Rect.Empty, data.Scan0, data.Height * data.Stride, data.Stride); bmp.UnlockBits(data); return bmp; } /// <summary> /// 将Bitmap转为BitmapImage /// </summary> /// <param name="bitmap"></param> /// <returns></returns> public static BitmapImage BitmapToBitmapImage(Bitmap bitmap) { using (MemoryStream stream = new MemoryStream()) { bitmap.Save(stream, System.Drawing.Imaging.ImageFormat.Png); stream.Position = 0; BitmapImage result = new BitmapImage(); result.BeginInit(); result.CacheOption = BitmapCacheOption.OnLoad; result.StreamSource = stream; result.EndInit(); result.Freeze(); return result; } } }
2、添加几个字段变量
主程序MainWindow.xaml.cs中添加：
private BitmapSource _bmpSpace, _bmpMine, _bmpNum1_8, _bmpForeground, _bmpMineOrTimer, _bmpBomb; private System.Drawing.Size _cellSize = new System.Drawing.Size(35, 35);
3、获取图片资源
private void GetImageResource() { BitmapImage bmpSpace = (BitmapImage)TryFindResource("ImgSpace"); BitmapImage bmpMine = (BitmapImage)TryFindResource("ImgMine"); BitmapImage bmpNum1_8 = (BitmapImage)TryFindResource("ImgNum1_8"); BitmapImage bmpForeground = (BitmapImage)TryFindResource("ImgForeground"); BitmapImage bmpMineOrTimer = (BitmapImage)TryFindResource("ImgMineOrTimer"); BitmapImage bmpBomb = (BitmapImage)TryFindResource("ImgBomb"); _bmpSpace = ImageHelper.BitmapImageToBitmapSource(bmpSpace); _bmpMine = ImageHelper.BitmapImageToBitmapSource(bmpMine); _bmpNum1_8 = ImageHelper.BitmapImageToBitmapSource(bmpNum1_8); _bmpForeground = ImageHelper.BitmapImageToBitmapSource(bmpForeground); _bmpMineOrTimer = ImageHelper.BitmapImageToBitmapSource(bmpMineOrTimer); _bmpBomb = ImageHelper.BitmapImageToBitmapSource(bmpBomb); }
4、将界面中用到的时钟和地图数这两张图片设置到位。
private void SetTimerAndMineImage() { ImgClock.Source = ImageHelper.CutImage(_bmpMineOrTimer, new Int32Rect(0, 0, _cellSize.Width, _cellSize.Height)); ImgMineNum.Source = ImageHelper.CutImage(_bmpMineOrTimer, new Int32Rect(1 * _cellSize.Width, 0, _cellSize.Width, _cellSize.Height)); }
5、将上述两个方法添加到构造方法中。
运行程序，如图1。
三、设置状态枚举
添加一个MyEnum.cs类文件，让主cs文件看起来简练一点。内容如下：
// 游戏级别 public enum Level { SIMPLE, NORMAL, HARD }; // 前景状态 public enum ForeState { NONE, // 无 NORMAL, // 正常覆盖 FLAG, // 红旗 QUESTION // 问号 }; // 底层状态 public enum BackState { MINE = -1, // 地雷 BLANK = 0, // 空 }; // 游戏状态 public enum GameState { NONE, // 未开始 STOP, // 已停止 START, // 已开始 PAUSE // 已暂停 };
四、添加GameLevel类，定义游戏级别相关参数
public class GameLevel { public int _mineNum { get; set; } // 地雷数 public int _rowGrid { get; set; } // 横格子数 public int _colGrid { get; set; } // 纵格子数 public GameLevel(int currLevel, int mineNum, int rowGrid, int colGrid) { _mineNum = mineNum; _rowGrid = rowGrid; _colGrid = colGrid; } }
五、定义主游戏数据变量
private int[,] _backData = null; // 底部背景数据（雷-1，0为空白，数值（1-8）周围雷数） private int[,] _foreData = null; // 前景数据（1：正常盖住；2：红旗；3：问号） private Image[,] _backImage = null; // 底图图片数组 private Image[,] _foreImage = null; // 上方图片数组 private GameState _gameState = GameState.NONE; private Random rnd = new Random(); // 随机数 private GameLevel _gameLevel; private Level _level = Level.Simple;
另外还用到几个计时器，看后面的注释
// 计时 private System.Diagnostics.Stopwatch _stopWatchGame = new System.Diagnostics.Stopwatch(); // 游戏过程读秒 private DispatcherTimer _timerSetTimeText = new DispatcherTimer(); // 更新读秒文本框 private DispatcherTimer _timerWinAnim = new DispatcherTimer(); // 用于胜利时动画 private DispatcherTimer _timerBomb = new DispatcherTimer(); // 用于踩雷动画
将计时器初始化放在构造方法中
// 计时器 _timerSetTimeText.Interval = new TimeSpan(0, 0, 1); _timerSetTimeText.Tick += _timerSetTimeText_Tick; // 动画计时器 _timerWinAnim.Interval = new TimeSpan(0, 0, 0, 0, 300); _timerWinAnim.Tick += _timerWinAnim_Tick; // 用户踩雷后的动画 _timerBomb.Interval = new TimeSpan(0, 0, 0, 0, 200); _timerBomb.Tick += _timerBomb_Tick;
六、初始化游戏状态
private void InitialGameState() { _timerSetTimeText.Stop(); _timerWinAnim.Stop(); _stopWatchGame.Reset(); _stopWatchGame.Stop(); _gameState = GameState.NONE; MenuGamePauseOrContinue.Header = "暂停(_P)"; } private void _timerSetTimeText_Tick(object sender, EventArgs e) { textBlockTime.Text = ((int)_stopWatchGame.Elapsed.TotalSeconds).ToString(); } private void _timerWinAnim_Tick(object sender, EventArgs e) { }
private void _timerBomb_Tick(object sender, EventArgs e)
{
}
后面动画计时事件方法以后再加入，这里先空着。
七、初始化游戏主数据
private void InitGameData(Level level) { switch (level) { case Level.SIMPLE: _gameLevel = new GameLevel(9, 9, 10); break; case Level.NORMAL: _gameLevel = new GameLevel(16, 16, 40); break; case Level.HARD: _gameLevel = new GameLevel(30, 16, 99); break; } // 设置窗口大小 this.Width = _cellSize.Width * _gameLevel._rowGrid + 40; this.Height = _cellSize.Height * _gameLevel._colGrid + 20 + 100; // 获取屏幕大小 double screenWidth = SystemParameters.WorkArea.Width; double screenHeight = SystemParameters.WorkArea.Height; // 使窗口居中 this.Left = (screenWidth - this.Width) / 2; this.Top = (screenHeight - this.Height) / 2; // 设置绘图控件大小 BackCanvas.Width = _gameLevel._colGrid * _cellSize.Width; BackCanvas.Height = _gameLevel._rowGrid * _cellSize.Height; ForeCanvas.Width = BackCanvas.Width; ForeCanvas.Height = BackCanvas.Height; // 初始化前景和背景数据 _backData = new int[_gameLevel._colGrid, _gameLevel._rowGrid]; _foreData = new int[_gameLevel._colGrid, _gameLevel._rowGrid]; for (int y = 0; y<_gameLevel._colGrid; y++) { for (int x=0; x<_gameLevel._rowGrid; x++) { _backData[y, x] = (int)BackState.BLANK; _foreData[y, x] = (int)ForeState.NORMAL; } } // 初始化前景和背景图片数组 _backImage = new Image[_gameLevel._colGrid, _gameLevel._rowGrid]; _foreImage = new Image[_gameLevel._colGrid, _gameLevel._rowGrid]; // 清理绘制区 BackCanvas.Children.Clear(); ForeCanvas.Children.Clear(); }
以上是关于练手WPF——扫雷小游戏的简易实现（上）的主要内容，如果未能解决你的问题，请参考以下文章