项目10：Windows程序的功能设计——“图片配对”游戏

C#程序设计主讲教师：杨剑1项目10：Windows程序的功能设计——“图片配对”游戏一、教学内容及要求能力培养：1、理解基于Windows的应用程序的基本概念2、掌握Windows窗体和控件的常用属性。3、掌握一些常用的Windows窗体控件的使用。4、学会创建较为复杂的Windows应用程序。。核心技能点：1、Windows窗体应用程序中窗体、控件、事件的基本概念。2、Windows窗体控件的共同特性。3、常用的Windows窗体控件。扩展技能点：1、Windows窗体和控件的常用属性2、Windows窗体的设计和创建3、各种控件的综合应用教学内容：1、项目介绍。任务1：“图片配对”游戏（5分钟）2、案例演示：程序流程任务2：讲解程序设计流程。（15分钟）3、案例演示：主要功能实现任务3：讲解主要功能的实现方法。（30分钟）4、课内实践：任务4：利用C#/WinForms编程，编写一个小游戏“图片配对”。(130分钟)1.基本功能：(1)窗口中有16张图片，共8种图案，每种图案有两张。(2)游戏开始时程序向用户展示所有的图片，片刻之后图片翻过去。(3)用户凭记忆连续单击两张自己认为是相同图案的图片，这时被单击图片翻起。(4)如果被单击图片不相同，则自动翻回去。(5)如果被单击图片相同，则这两张图片消失。(6)这样不断单击，直到16张图片均配对成功消失，游戏结束。2.扩展功能：为游戏增加菜单、计时功能。C#程序设计主讲教师：杨剑2(1)通过菜单的“新游戏”选项可以重复进行多次游戏。(2)通过菜单的“帮助”-“游戏规则”选项显示一个模式窗体，向用户介绍游戏规则。(3)在每次游戏结束时，弹出对话框显示用户配对成功所花的时间。(4)游戏所用时间越短越好，在程序中保存最高记录。(5)在窗体上显示最高纪录和当前游戏已经进行的时间。二、教学重点、难点及解决办法教学重点：1、Windows窗体控件的共同特性2、常用的Windows窗体控件教学难点：1、Windows窗体的设计和创建2、各种控件的综合应用教学方法：基于CDIO的课程改革，应用了CDIO教育模式。以“做中学”为出发点，实施“知识讲解案例化、课内课外协作化、实战演练一体化”的教学模式。由传统的教师引导课堂转变为以学生为主体，课本中的知识点讲解转变为“项目”主导，将传统的课堂模式转变为了以实际经验为核心。三、教学设计1、教学进程工程化将教学内容按CDIO理念，以项目为核心，并结合课程内容设计了四个环节的内容，包括构思环节、设计环节、实现环节、运作环节，同时，在课程的教学过程中，主要采用“做中学”的教学理念来实现“教学做”一体化。以项目为载体，将抽象的知识融入到项目中，通过项目的学习将知识点分解，将“工程”教学思想体现在教学中，进而提高学生的学习效果。2、教学设计递进化根据“工程化”的思想，教学模式的设计呈递进化趋势，每一个教学项目的实现将分成四个部分来完成：任务的明确，实施方案的编写，项目的实施和项目的评价3、实践设计层次化在项目的实施过程中，主要组织层次化教学。在教学中，采取“基础实验”“综合实验”，“综合性课程设计”的设计。4、课程考核工程化考核以过程考核和工程验收测试相结合的方式进行。本门课程采取的是形成C#程序设计主讲教师：杨剑3性考核方式，考试成绩由本门课程学习期间的多项过程成绩组合而成5、知识讲解案例化根据CDIO的思想，对知识点采取案例化教学法，6、课内课外协作化7、实战演练一体化为了让学生对所学课程加深理论知识，并能够将相关知识结合到实际应用中，学生需要自选一个相关主题进行综合项目的开发，提高综合应用能力。在这个环节中，学生是主体，教师主要负责引导和监控，学生需要在这个阶段发挥自身能力，以团队的形式完成项目，并由此锻炼学生的团队合作意识。四、教学过程1、项目介绍。任务1：“图片配对”游戏（5分钟）功能具体描述：（1）程序开始界面如图所示。（2）3秒后，所有图片翻过去，此时开始计时，如图所示。C#程序设计主讲教师：杨剑4（3）用户连续单击两张图片，图片翻起，如图所示。（4）如果两张图片相同，则图片消失，如图所示。C#程序设计主讲教师：杨剑5（5）游戏结束，弹出对话框提示，并显示所用时间，如图所示。2、案例演示：程序流程任务2：讲解程序设计流程。（15分钟）C#程序设计主讲教师：杨剑6//一维数组，与窗体上的每个图片框对应，存放每个图片框对应的图片索引int[]pictureIds;intfirstIndex;//记录点击的第一个图片框intsecondIndex;//记录点击的匹配的图片框intfirstPictureId;//已经点中的第一个图片框中显示的图片索引intsecondPictureId;//已经点中的匹配的图片框中显示的图片索引intcount;//计数，记录点击了几个图片intgameState;//游戏状态：0-进行中，1-新游戏，-1-未开始intgameTime;//游戏时间intmatchNum;//配成对的数量intrecord;//最高记录定义类的属性创建一维数组pictureIds=newint[16];gameState=-1;//游戏状态为未开始record=0;//没有最高记录程序启动标志为新游戏设置各个变量的初始状态计时器都停止（3个计时器）将记录图片框显示的图片的数组都置为-1随机指定每个图片框显示的动物图片显示所有图片启动“3秒隐藏”计时器开始游戏将所有图片都翻过去“游戏已用时”计时器开始计时。3秒后隐藏所有图片图片框单击事件是否游戏开始获取当前点中的图片框在数组中的索引当前点中的图片框显示的图片的索引点击的是第一张图片记录第一张图片编号显示图片启动3秒计时器，3秒后隐藏图片点击的是第二张图片记录第二张图片编号显示图片停止3秒钟定时器启动延时0.5s计时器，并判断是否匹配延时0.5s计时器，并判断是否匹配如果两张图片匹配成功将两个图片框置为不可见配成对的数量加1恢复状态firstIndex=-1;secondIndex=-1;firstPictureId=-1;secondPictureId=-1;count=0;隐藏所有图片检查是否匹配完（matchNum==8）“游戏已用时”计时器停止计时显示已用时间如果已用时间小于最高记录，则设置最高记录为当前已用时间。游戏变为未开始状态结束C#程序设计主讲教师：杨剑73、案例演示：主要功能实现任务3：讲解主要功能的实现方法。（30分钟）（1）设置窗体的“BackgroundImage”属性为“bg.jpg”;（2）添加菜单：从工具框中拖入“MenuStrip”并正确设置其各菜单项。（3）最高记录“、“0秒”、“已用时”、“20秒”等内容为“Label”控件。（4）在窗体上用16个图片框控件（PictureBox）显示16张图片。注意设置每个图片框控件的Tag属性为（0~15），设置其“BackColor”属性为Transparent（透明）。（5）用图像列表控件（ImageList）来保存要显示的8张正面图和1张背面图。（该图像列表控件已经设置好，在示例程序中名为：ilPictures，可以直接复制到自己的项目中。（6）图片翻转就是改变PictureBox的Image属性，让它对应ImageList中的不同图片。（7）为窗体增加一个整型数组字段，数组长度为16，数组的每个元素都与窗体上的一个PictureBox对应，元素的值就是相应的PictureBox中显示的图片在ImageList中的索引。把数组每个元素的下标（从0到16）写在每个PictureBox的Tag属性中。（8）游戏开始时，利用生成随机数的办法，循环将8张正面图随机放在2个PictureBox中，也就是记录在相应的一维数组的两个元素中。参考代码：//随机指定每个图片框显示的图片for(inti=1;i=8;i++){//每张图片都放在两个图片框中PutIntoBox(i);PutIntoBox(i);}//将指定索引的图片随机放在一个图片框中，记录在一维数组中privatevoidPutIntoBox(intpictureIndex){Randomr=newRandom();intindex=r.Next(16);//随机找到一个图片框的数组索引if(this.pictureIds[index]!=-1)//已经有图片了{//找到一个还没有指定图片的图片框C#程序设计主讲教师：杨剑8while(this.pictureIds[index]!=-1){index=r.Next(16);//随机找到一个图片框的数组索引}}//指定这个图片框对应的图片this.pictureIds[index]=pictureIndex;}（9）显示所有图片，需要遍历窗体上的所有PictureBox控件，参考代码：//显示所有图片foreach(Controliteminthis.Controls){if(itemisPictureBox){//取得当前图片框对应的数组索引intindex=Convert.ToInt32(((PictureBox)item).Tag);//获得图片框中显示的图片在ImageList中的索引intpictureIndex=this.pictureIds[index];//设置图片框可见((PictureBox)item).Visible=true;//设置图片框显示的图片((PictureBox)item).Image=ilPictures.Images[pictureIndex];}}（10）单击每一张图片后，都进入同一个事件处理函数。可以用下面代码获取以下信息。//当前点中的图片框在数组中的索引intnewIndex=Convert.ToInt32(((PictureBox)sender).Tag);//当前点中的图片框显示的图片的索引intnewPictureId=this.pictureIds[newIndex];（11）两张图片匹配成功应满足条件this.firstIndex!=this.secondIndex&&this.firstPictureId==this.secondPictureId（12）将指定索引的图片框设为不可见foreach(Controliteminthis.Controls)C#程序设计主讲教师：杨剑9{if(itemisPictureBox){if(Convert.ToInt32(((PictureBox)item).Tag)==index){((PictureBox)item).Visible=false;}}（13）程序应有3个计时器控件（Timer）（1）一个计时器用来控制在开始游戏前显示所有图片3秒钟后翻转（3秒显示计数器）；（2）一个计时器，用来计算用户已用总时间（3）一个计时器用来控制延时0.5s计时器，当用户选择了两张图片后，0.5秒后决定是否配对成功（消除这两张图片）或配对不成功（翻转这两张图片）。（4）计时器的停止和起动可以使用Stop()和Start()方法。4、课内实践：任务4：利用C#/WinForms编程，编写一个小游戏“图片配对”。(130分钟)1.基本功能：(1)窗口中有16张图片，共8种图案，每种图案有两张。(2)游戏开始时程序向用户展示所有的图片，片刻之后图片翻过去。(3)用户凭记忆连续单击两张自己认为是相同图案的图片，这时被单击图片翻起。(4)如果被单击图片不相同，则自动翻回去。(5)如果被单击图片相同，则这两张图片消失。(6)这样不断单击，直到16张图片均配对成功消失，游戏结束。2.扩展功能：为游戏增加菜单、计时功能。(1)通过菜单的“新游戏”选项可以重复进行多次游戏。(2)通过菜单的“帮助”-“游戏规则”选项显示一个模式窗体，向用户介绍游戏规则。(3)在每次游戏结束时，弹出对话框显示用户配对成功所花的时间。(4)游戏所用时间越短越好，在程序中保存最高记录。(5)在窗体上显示最高纪录和当前游戏已经进行的时间。五