9宫拼图小游戏（WPF MVVM实现）
昨天逛论坛，看到一个哥们用WPF做了一个9宫的拼图游戏，发现初学WPF的人都很容易犯一个错误（我也犯过）：把WPF当WINFORM用！所以想写一个比较符合WPF风格的版本，于是就抽工作的空余时间做了一个，其实就是很久没写博客了，写个出来凑数o(╯□╰)o。效果如下：
（图片为：阿普利亚GPR125）
代码简要解释：主窗口，只是生成核心类，和绑定主要事件（比较简单，就没有使用什么Command之类的了），主要逻辑都在VM类里面
public partial class MainWindow : Window
{
PicManager manager;
public MainWindow()
{
InitializeComponent();
manager = new PicManager("", , );
}
private void Window_Loaded(object sender, RoutedEventArgs e)
{
DataContext = manager;
}
private void Kong_KeyDown(object sender, KeyEventArgs e)
{
switch(e.Key)
{
case Key.Up:
manager.MovePic(Direction.D_Up);
break;
case Key.Down:
manager.MovePic(Direction.D_Down);
break;
case Key.Left:
manager.MovePic(Direction.D_Left);
break;
case Key.Right:
manager.MovePic(Direction.D_Right);
break;
case Key.R:
manager.Random();
break;
}
if (manager.Step!=&&manager.CheckOVER())
{
MessageBox.Show("YOU WIN!");
manager.Step = ;
}
}
}
PicModel：小拼图模型类，只有一个ID，用于保存数据。
class PicMod
{
public int ID { set; get; }
public PicMod(int i)
{
ID = i;
}
}
PicViewMod：是每一个小拼图model的视图viewmodel封装类，当小拼图ID变化，会通过WPF的绑定功能，自动更新界面的图片，而不是用事件去刷新重绘！这是WPF和WINFROM之间的一个最大区别！
class PicViewMod : INotifyPropertyChanged
{
PicMod pic;
public event PropertyChangedEventHandler PropertyChanged;
public PicViewMod(int i)
{
pic = new PicMod(i);
}
public int ID
{
set
{
if (pic.ID != value)
{
pic.ID = value;
PropertyChanged(this, new PropertyChangedEventArgs("ID"));
}
}
get
{
return pic.ID;
}
}
}
PicManager ：主要封装了9个小拼图块，和一些操作函数，包括移动块，生成随机拼图（只是循环模拟调用了移动块的函数）
//拼图面板VM
class PicManager : INotifyPropertyChanged
{
public ObservableCollection
public event PropertyChangedEventHandler PropertyChanged;
int _step;
int _pos;//空白块当前位置
int _colum, _row;//行列数
public int Step
{
set
{
if (_step != value)
{
_step = value;
PropertyChanged(this, new PropertyChangedEventArgs("Step"));
}
}
get
{
return _step;
}
}
public PicViewMod Ori { set; get; }//原图
public PicManager(string path, int col, int row)
{
Pics = new ObservableCollection
_colum = col;
_row = row;
_pos = ;
_step = ;
Ori = new PicViewMod(col * row);
for (int x = ; x < _colum; x++)
{
for (int y = ; y < _row; y++)
{
Pics.Add(new PicViewMod(x * _row + y));
}
}
}
void ClipPic(string path)
{
}
public void MovePic(Direction dir)
{
switch (dir)
{
case Direction.D_Up://键盘的向上，实际就是空白块的向下
{
if (_pos / _colum < _row - )
{
int id = Pics[_pos + _colum].ID;
Pics[_pos + _colum].ID = Pics[_pos].ID;
Pics[_pos].ID = id;
_pos += _colum;
Step++;
}
}
break;
case Direction.D_Down:
{
if (_pos / _colum > )
{
int id = Pics[_pos - _colum].ID;
Pics[_pos - _colum].ID = Pics[_pos].ID;
Pics[_pos].ID = id;
_pos -= _colum;
Step++;
}
}
break;
case Direction.D_Left:
{
if (_pos % _colum < _colum - )
{
int id = Pics[_pos + ].ID;
Pics[_pos + ].ID = Pics[_pos].ID;
Pics[_pos].ID = id;
_pos += ;
Step++;
}
}
break;
case Direction.D_Right:
{
if (_pos % _colum > )
{
int id = Pics[_pos - ].ID;
Pics[_pos - ].ID = Pics[_pos].ID;
Pics[_pos].ID = id;
_pos -= ;
Step++;
}
}
break;
}
}
public bool CheckOVER()
{
for (int i = ; i < _row * _colum; i++)
{
if (Pics[i].ID != i)
return false;
}
return true;
}
public void Random(int count)
{
System.Random rand = new System.Random((int)DateTime.Now.Ticks);
for (int i = ; i < count; i++)
{
int d = rand.Next(, );
MovePic((Direction)d);
}
Step = ;
}
}
}
VIEW的XAML定义：使用ItemsContrl来展示Image
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="clr-namespace:NineKong" Title="拼图游戏" Height="494" Width="849" Loaded="Window_Loaded" KeyDown="Kong_KeyDown">
其他具体实现请查看源代码，代码比较简单，所以并没有什么注释。总的来说个人觉得WINFORM和WPF的主要差别：一个是事件驱动，一个是数据驱动！由于时间比较仓促，然后对WPF其实也不是很熟练（很早以前自学过2个月，然后基本没用过了，其实这是写的第一个比较完整的WPF程序），很多东西概念知道，但是真的用起来发现比较吃力，边百度边实验，对图片的操作和GDI+模式差别比较大，所以没有实现通过指定的图片按指定大小切图来自定义游戏。。。不过这篇博客主要是想演示一下WPF和WINFORM差别，真的非常大！所以也就不要太在意某些细节。。。
九宫拼图源码 下载
9宫拼图小游戏（WPF MVVM实现）的更多相关文章
JavaScript版拼图小游戏
慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 ...
使用NGUI实现拖拽功能（拼图小游戏）
上一次用UGUI实现了拼图小游戏,这次,我们来用NGUI来实现 实现原理 NGUI中提供了拖拽的基类UIDragDropItem,所以我们要做的就是在要拖拽的图片上加一个继承于该类的脚本,并实现其中的 ...
jQuery实现拼图小游戏
小熊维尼拼图 2017-07-23 ...
jQuery拼图小游戏
jQuery拼图小游戏 最后样式 核心代码部分