使用WPF教你一步一步实现连连看(一)
时间:2022-05-03
本文章向大家介绍使用WPF教你一步一步实现连连看(一),主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
第一步:
问题,怎样动态的建立一个10*10的grid(布局)
第二步:
问题,怎样将button放到上边那个布局中(这个是我查资料才知道的,一般都是用Grid在前台布局)
for (int i = 0; i < 10; i++)
{
for (int j = 0; j < 10; j++)
{
Button btn = new Button();
btn.Content = i + "," + j;
Grid.SetColumn(btn, j);
Grid.SetRow(btn, i);
GridGame.Children.Add(btn);
}
}
效果如图1
第三步:
问题3,怎样将Button的内容换成随机图片呢?
Random random = new Random();
for (int i = 0; i < 10; i++)
{
for (int j = 0; j < 10; j++)
{
int imgName = random.Next(1, 10);//生成一个>=1,<10的随机数
Image img = new Image();
img.Source = new BitmapImage(new Uri("images/" + imgName + ".png", UriKind.Relative));
Button btn = new Button();
btn.Content = img;
Grid.SetColumn(btn, j);
Grid.SetRow(btn, i);
GridGame.Children.Add(btn);
}
}
效果如图
这里需要注意一点,不要把Random random = new Random();这句放到循环里面,不然会变成这样 图
第四步:
上面我们已经完成了LLK的布局,下面咱们实现Button的点击事件,并实现点击
两个相同背景的button进行消除。问题又来,我们怎么判断两个button是相同背景呢。
我们来重写Button,给它增加几个属性:
public class MyButton : Button
{
//button标示,用于判断两个按钮是否为同一个
public int Flag { get; set; }
//Button所在行
public int RowNum { get; set; }
//所在列
public int ColNum { get; set; }
public MyButton(int flag,int rowNum,int colNum)
{
this.Flag = flag;
this.RowNum = romNum;
this.ColNum = colNum;
}
}
好了,有了判断依据,我们就可以写点击事件了
MyButton btn1;
MyButton btn2;
int ClickCount = 0;
void btn_Click(object sender, RoutedEventArgs e)
{
++ClickCount;
if (ClickCount == 1)
{
btn1 = sender as MyButton;
}
else if(ClickCount==2)
{
btn2 = sender as MyButton;
if (btn1 != null && btn2 != null)
{
if (btn1.Flag == btn2.Flag&&!(btn1.ColNum==btn2.ColNum&&btn1.RowNum==btn2.RowNum))
{
btn1.Visibility = Visibility.Hidden;
btn2.Visibility = Visibility.Hidden;
}
}
btn1 =null;
btn2 = null;
ClickCount = 0;
}
}
好了,我们现在完成了最基本点击消除功能
运行效果如下:
完整代码如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Data;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Imaging;
using System.Windows.Navigation;
using System.Windows.Shapes;
namespace llk
{
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent();
Add();
}
public void Add()
{
Random random = new Random();
for (int i = 0; i < 10; i++)
{
RowDefinition rowDef = new RowDefinition();
GridGame.RowDefinitions.Add(rowDef);
ColumnDefinition colDef = new ColumnDefinition();
GridGame.ColumnDefinitions.Add(colDef);
}
for (int i = 0; i < 10; i++)
{
for (int j = 0; j < 10; j++)
{
int imgName = random.Next(1, 10);//生成一个>=1,<21的随机数
Image img = new Image();
img.Source = new BitmapImage(new Uri("images/" + imgName + ".png", UriKind.Relative));
MyButton btn = new MyButton(imgName,i,j);
btn.Content = img;
btn.Click += btn_Click;
Grid.SetColumn(btn, j);
Grid.SetRow(btn, i);
GridGame.Children.Add(btn);
}
}
}
MyButton btn1;
MyButton btn2;
int ClickCount = 0;
void btn_Click(object sender, RoutedEventArgs e)
{
++ClickCount;
if (ClickCount == 1)
{
btn1 = sender as MyButton;
}
else if(ClickCount==2)
{
btn2 = sender as MyButton;
if (btn1 != null && btn2 != null)
{
if (btn1.Flag == btn2.Flag&&!(btn1.ColNum==btn2.ColNum&&btn1.RowNum==btn2.RowNum))
{
btn1.Visibility = Visibility.Hidden;
btn2.Visibility = Visibility.Hidden;
}
}
btn1 =null;
btn2 = null;
ClickCount = 0;
}
}
}
public class MyButton : Button
{
//button标示,用于判断两个按钮是否为同一个
public int Flag { get; set; }
//Button所在行
public int RowNum { get; set; }
//所在列
public int ColNum { get; set; }
public MyButton(int flag,int romNum,int colNum)
{
this.Flag = flag;
this.RomNum = romNum;
this.ColNum = colNum;
}
}
}
是不是很简单啊,下一步我们加入规则算法……
----- 未完待续……------
另外谁能告诉我怎么上传源代码吗,直接发出来太占篇幅了……
哈,知道怎么上传了,现把图片发一下,资源图片,便于你们试验用……
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何制作推论统计分析报告
- 全局唯一 ID 服务的分布式ID生成系统
- SpringBoot 国际化实现跨地区的多语言切换
- MySQL 死锁产生原因和解决方法
- 手把手教你ShardingSphere和Mybatis拦截器实现特殊字段动态切换加密
- Swagger3.0官方starter诞生,可以扔掉那些野生starter了
- Prometheus 入门教程(一):Prometheus 快速入门
- 开发|ShiroConfig实现基础拦截
- 推荐几个 VS Code 扩展、主题和字体
- 万字长文 | 这可能是东半球最保姆级的后台服务器开发学习路线
- Python|对多角星的绘制
- Pythyon|当中秋遇上国庆
- 清华老哥要是会 screen,是不是就不用拖着电脑骑车了
- Python|用turtle画笔制作奥运五环
- 2 行代码,将 .NET 执行时间降低 87%!(附代码)