资源描述
,单击此处编辑母版标题样式,#,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,Java,拼图小游戏,2015/1/5,1,利用,java,的图形用户界面设计,设计简单的拼图游戏,一、实训要求,2,2025/4/15 周二,二、程序流程图,3,2025/4/15 周二,三、实现的游戏功能,4,2025/4/15 周二,三、实现的游戏功能,附加功能:,可选择从预设的图片中选择图片拼图,5,2025/4/15 周二,三、实现的游戏功能,游戏结束界面,6,2025/4/15 周二,要实现游戏的上述功能,很显然有以下几个关键问题要考虑:,四、算法设计,1.,如何加载图片?,2.,如何实现拼图的随机排列?,3.,如何实现图片的移动?,4.,如何判断游戏结束的标志?,5.,如何实现图片的切换选择?,7,2025/4/15 周二,1.,如何加载图片?,2.,如何实现拼图的随机排列?,3.,如何实现图片的移动?,4.,如何判断游戏结束的标志?,5.,如何实现图片的切换选择?,五、核心代码分析,8,2025/4/15 周二,cell=new Cell9;/,创建九个方格,Icon icon;/,声明图标,for(int i=0;i 3;i+)/,循环为,9,个方格加载图片,并初使化坐标,形成三行三列,for(int j=0;j3;j+),icon=new ImageIcon(“pictrue/pic_”+,pictureID+“_”+(i*3+j+1)+“.jpg”);/,根据指定,URL,创建图标,celli*3+j=new Cell(icon);/,创建方格在方格中加载图片,celli*3+j.setLocation(j*100,i*100);/,设置方格的位置,this.add(celli*3+j);/,面板添加方格,(,1,)如何加载图片?,9,2025/4/15 周二,1.,如何加载图片?,2.,如何实现拼图的随机排列?,3.,如何实现图片的移动?,4.,如何判断游戏结束的标志?,5.,如何实现图片的切换选择?,五、核心代码分析,10,2025/4/15 周二,关键代码:,int direction=(int)(Math.random()*4);,/,随机产生一个,0-3,的数字,对应空方格的上下左右移动,(,2,)如何实现拼图的随机排列?,11,2025/4/15 周二,1.,如何加载图片?,2.,如何实现拼图的随机排列?,3.,如何实现图片的移动?,4.,如何判断游戏结束的标志?,5.,如何实现图片的切换选择?,五、核心代码分析,12,2025/4/15 周二,(,3,)如何实现图片的移动?,通过鼠标点击相邻图片,所点击的图片与空白按钮互换位置,完成拼图的移动。,具体代码,13,2025/4/15 周二,(,3,)如何实现图片的移动?,1.,鼠标事件,public void mousePressed(MouseEvent event),/,方格的鼠标按下事件,Cell button=(Cell)event.getSource();,/,获得鼠标按的方格按钮,int x1=button.getBounds().x;,/,得到所单击方格的坐标,int y1=button.getBounds().y;,int x2=cellNull.getBounds().x;/,得到空方格的坐标,int y2=cellNull.getBounds().y;,14,2025/4/15 周二,(,3,)如何实现图片的移动?,1.,鼠标事件,if,(x1=x2&y1-y2=100)/,如果满足条件则,进行交换,button.move(UP,100);/,方格向上移动,else,if,(x1=x2/,方格向下移动,else,if,(x1-x2=100/,方格向左移动,else,if,(x1-x2=-100&y1=y2),button.move(RIGHT,100);/,方格向右移动,else,return,;/,不满足就不进行任何处理,15,2025/4/15 周二,(,3,)如何实现图片的移动?,1.,鼠标事件,cellNull.setLocation(x1,y1);/,重新设置空方格的位置,this.repaint();,16,2025/4/15 周二,(,3,)如何实现图片的移动?,public,void,move(String direction,int,sleep)/,方格的移动,if,(direction=UP)/,方格向上移动,this,.setLocation(,this,.getBounds().x,this,.getBounds().y-100);,else,if,(direction=DOWN)/,方格向下移动,this,.setLocation(,this,.getBounds().x,this,.getBounds().y+100);,else,if,(direction=LEFT)/,方格向左移动,this,.setLocation(,this,.getBounds().x-100,this,.getBounds().y);,else,/,方格向右移动,this,.setLocation(,this,.getBounds().x+100,this,.getBounds().y);,2.move,方法,17,2025/4/15 周二,1.,如何加载图片?,2.,如何实现拼图的随机排列?,3.,如何实现图片的移动?,4.,如何判断游戏结束的标志?,5.,如何实现图片的切换选择?,五、核心代码分析,18,2025/4/15 周二,public,boolean,isFinish()/,判断是否拼合成功,for,(,int,i=0;i8;i+),int,x=celli.getBounds().x;,int,y=celli.getBounds().y;,if,(y/100*3+x/100!=i),/,判断是否每一个位置都恢复到初始位置,return,false,;,return,true,;,(,4,)如何判断游戏结束的标志?,19,2025/4/15 周二,1.,如何加载图片?,2.,如何实现拼图的随机排列?,3.,如何实现图片的移动?,4.,如何判断游戏结束的标志?,5.,如何实现图片的切换选择?,五、核心代码分析,20,2025/4/15 周二,public,void,actionPerformed(ActionEvent arg0),/,对三个按钮事件的处理,Button button=(Button)arg0.getSource();,/,获得事件按钮源,if,(button=start)/,如果是开始按钮,myCanvas.Start();,/,调用图片方格打乱方,法,(,5,)如何实现图片的切换?,21,2025/4/15 周二,else,if,(button=preview)/,如果是查看事件,if,(button.getLabel()=,预览,),/,如果按钮标签为,预览,container.remove(myCanvas);/,容器移除图片面,板,container.add(panelPreview);/,容器添加预览标,签,panelPreview.updateUI();,/,不用调整大小就可以出现新增删的组件,container.repaint();/,重绘,button.setLabel(,返回,);/,设置按钮标签,(,5,)如何实现图片的切换?,22,2025/4/15 周二,else,container.remove(panelPreview);,/,容器移除预览面板,container.add(myCanvas);/,容器添加图片面板,container.repaint();/,重绘,button.setLabel(,预览,);/,设置按钮标签,(,5,)如何实现图片的切换?,23,2025/4/15 周二,else,if,(button=set)/,如果是选择按钮,修改所选图片,Choice pic=,new,Choice();/,创建选择器,pic.add(,小猫,);/,添加列表项,pic.add(,小猪,);pic.add(,云,);,pic.add(QQ);,pic.add(,卡通,);,pic.add(,花,);,(,5,)如何实现图片的切换?,24,2025/4/15 周二,int,i=JOptionPane.,showConfirmDialog,(,this,pic,选择图片,JOptionPane.,OK_CANCEL_OPTION,);,/,弹出对话框,if,(i=JOptionPane.,YES_OPTION,),/,选择对话框的确定按钮,MyCanvas.,pictureID,=pic.getSelectedIndex()+1;,/,获得列表项的编号,myCanvas.reLoadPictrue();/,图片重载,(,5,)如何实现图片的切换?,25,2025/4/15 周二,Icon icon=,new,ImageIcon(pictrue/pic_+MyCanvas.,pictureID,+.jpg);,/,获得图片图标,JLabel label=,new,JLabel(icon);/,根据图标设置标签,label.setBounds(0,0,300,300);/,设置标签的方位,panelPreview.add(label);,panelPreview.repaint();,(,5,)如何实现图片的切换?,26,2025/4/15 周二,谢谢观看!,27,2025/4/15 周二,
展开阅读全文