1、Java拼圖小游戲 2015/1/5 利用利用java的圖形用戶界面設(shè)計(jì)，設(shè)計(jì)簡單的的圖形用戶界面設(shè)計(jì)，設(shè)計(jì)簡單的拼圖游戲拼圖游戲一、實(shí)訓(xùn)要求二、程序流程圖三、實(shí)現(xiàn)的游戲功能三、實(shí)現(xiàn)的游戲功能附加功能：附加功能： 可選擇可選擇從從預(yù)設(shè)的圖片中選擇圖片預(yù)設(shè)的圖片中選擇圖片拼圖拼圖三、實(shí)現(xiàn)的游戲功能游戲結(jié)束界面游戲結(jié)束界面要實(shí)現(xiàn)游戲的上述功能，很顯然有以下幾個(gè)關(guān)鍵問題要考慮：四、算法設(shè)計(jì)1.如何加載圖片？如何加載圖片？2.如何實(shí)現(xiàn)拼圖的隨機(jī)排列？如何實(shí)現(xiàn)拼圖的隨機(jī)排列？3.如何實(shí)現(xiàn)圖片的移動(dòng)？如何實(shí)現(xiàn)圖片的移動(dòng)？4.如何判斷游戲結(jié)束的標(biāo)志？如何判斷游戲結(jié)束的標(biāo)志？5.如何實(shí)現(xiàn)圖片的切換選擇？如何實(shí)

2、現(xiàn)圖片的切換選擇？1.如何加載圖片？如何加載圖片？2.如何實(shí)現(xiàn)拼圖的隨機(jī)排列？如何實(shí)現(xiàn)拼圖的隨機(jī)排列？3.如何實(shí)現(xiàn)圖片的移動(dòng)？如何實(shí)現(xiàn)圖片的移動(dòng)？4.如何判斷游戲結(jié)束的標(biāo)志如何判斷游戲結(jié)束的標(biāo)志？5.如何實(shí)現(xiàn)圖片的切換選擇？如何實(shí)現(xiàn)圖片的切換選擇？五、核心代碼分析cell=new Cell9;/ 創(chuàng)建九個(gè)方格創(chuàng)建九個(gè)方格Icon icon;/ 聲明圖標(biāo)聲明圖標(biāo)for (int i = 0; i 3; i+) /循環(huán)為循環(huán)為9個(gè)方格加載圖片，并初使化個(gè)方格加載圖片，并初使化坐標(biāo)，形成三行三列坐標(biāo)，形成三行三列for(int j=0;j3;j+)icon=new ImageIcon(“pictru

3、e/pic_”+pictureID+“_”+(i*3+j+1)+“.jpg”);/ 根據(jù)指定根據(jù)指定URL創(chuàng)建創(chuàng)建圖標(biāo)圖標(biāo)celli*3+j=new Cell(icon);/ 創(chuàng)建方格在方格中加載圖片創(chuàng)建方格在方格中加載圖片celli*3+j.setLocation(j*100,i*100);/ 設(shè)置方格的位置設(shè)置方格的位置this.add(celli*3+j);/ 面板添加方格面板添加方格（1）如何加載圖片？1.如何加載圖片？如何加載圖片？2.如何實(shí)現(xiàn)拼圖的隨機(jī)排列？如何實(shí)現(xiàn)拼圖的隨機(jī)排列？3.如何實(shí)現(xiàn)圖片的移動(dòng)？如何實(shí)現(xiàn)圖片的移動(dòng)？4.如何判斷游戲結(jié)束的標(biāo)志如何判斷游戲結(jié)束的標(biāo)志？5.如何

4、實(shí)現(xiàn)圖片的切換選擇？如何實(shí)現(xiàn)圖片的切換選擇？五、核心代碼分析關(guān)鍵代碼：int direction=(int)(Math.random()*4);/隨機(jī)隨機(jī)產(chǎn)生一產(chǎn)生一個(gè)個(gè)0-3的的數(shù)字，對(duì)應(yīng)空方格的上下數(shù)字，對(duì)應(yīng)空方格的上下左右左右移動(dòng)移動(dòng)（2）如何實(shí)現(xiàn)拼圖的隨機(jī)排列？1.如何加載圖片？如何加載圖片？2.如何實(shí)現(xiàn)拼圖的隨機(jī)排列？如何實(shí)現(xiàn)拼圖的隨機(jī)排列？3.如何實(shí)現(xiàn)圖片的移動(dòng)？如何實(shí)現(xiàn)圖片的移動(dòng)？4.如何判斷游戲結(jié)束的標(biāo)志如何判斷游戲結(jié)束的標(biāo)志？5.如何實(shí)現(xiàn)圖片的切換選擇？如何實(shí)現(xiàn)圖片的切換選擇？五、核心代碼分析（3）如何實(shí)現(xiàn)圖片的移動(dòng)？ 通過鼠標(biāo)點(diǎn)擊相鄰圖片，所點(diǎn)擊的圖片與空白按通過鼠標(biāo)點(diǎn)擊相

5、鄰圖片，所點(diǎn)擊的圖片與空白按鈕互換位置，完成拼圖的移動(dòng)。鈕互換位置，完成拼圖的移動(dòng)。具體代碼具體代碼（3）如何實(shí)現(xiàn)圖片的移動(dòng)？1.鼠標(biāo)事件鼠標(biāo)事件public void mousePressed(MouseEvent event) /方格的鼠標(biāo)按下方格的鼠標(biāo)按下事件事件Cell button=(Cell)event.getSource();/ 獲得鼠標(biāo)按的方格按鈕獲得鼠標(biāo)按的方格按鈕int x1=button.getBounds().x;/得到所單擊方格的坐標(biāo)得到所單擊方格的坐標(biāo)int y1=button.getBounds().y;int x2=cellNull.getBounds().x;

6、/得到空方格的坐標(biāo)得到空方格的坐標(biāo)int y2=cellNull.getBounds().y;（3）如何實(shí)現(xiàn)圖片的移動(dòng)？1.鼠標(biāo)事件鼠標(biāo)事件if(x1=x2&y1-y2=100)/如果滿足條件則進(jìn)行交換button.move(UP,100);/ 方格向上移動(dòng)else if(x1=x2 & y1-y2=-100)button.move(DOWN,100);/ 方格向下移動(dòng)else if(x1-x2=100 & y1=y2)button.move(LEFT,100);/ 方格向左移動(dòng)else if(x1-x2=-100 & y1=y2)button.move(RIG

7、HT,100);/ 方格向右移動(dòng)elsereturn;/不滿足就不進(jìn)行任何處理（3）如何實(shí)現(xiàn)圖片的移動(dòng)？1.鼠標(biāo)事件鼠標(biāo)事件cellNull.setLocation(x1,y1);/ 重新設(shè)置空方格的重新設(shè)置空方格的位置位置this.repaint();（3）如何實(shí)現(xiàn)圖片的移動(dòng)？public void move(String direction,int sleep)/方格的移動(dòng)if(direction=UP)/ 方格向上移動(dòng)this.setLocation(this.getBounds().x,this.getBounds().y-100);else if(direction=DOWN)/ 方

8、格向下移動(dòng)this.setLocation(this.getBounds().x,this.getBounds().y+100);else if(direction=LEFT)/ 方格向左移動(dòng)this.setLocation(this.getBounds().x-100,this.getBounds().y);else/ 方格向右移動(dòng)this.setLocation(this.getBounds().x+100,this.getBounds().y); 2.move方法方法1.如何加載圖片？如何加載圖片？2.如何實(shí)現(xiàn)拼圖的隨機(jī)排列？如何實(shí)現(xiàn)拼圖的隨機(jī)排列？3.如何實(shí)現(xiàn)圖片的移動(dòng)？如何實(shí)現(xiàn)圖片的

9、移動(dòng)？4.如何判斷游戲結(jié)束的標(biāo)志如何判斷游戲結(jié)束的標(biāo)志？5.如何實(shí)現(xiàn)圖片的切換選擇？如何實(shí)現(xiàn)圖片的切換選擇？五、核心代碼分析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)/判斷是否每一個(gè)位置都恢復(fù)到初始位置return false; return true; （4）如何判斷游戲結(jié)束的標(biāo)志？1.如何加載圖片？如何加載圖片？2.如何實(shí)現(xiàn)拼圖的隨機(jī)排列？如何實(shí)現(xiàn)拼圖的隨機(jī)排列？3.如何實(shí)現(xiàn)圖片的移動(dòng)？

10、如何實(shí)現(xiàn)圖片的移動(dòng)？4.如何判斷游戲結(jié)束的標(biāo)志如何判斷游戲結(jié)束的標(biāo)志？5.如何實(shí)現(xiàn)圖片的切換選擇？如何實(shí)現(xiàn)圖片的切換選擇？五、核心代碼分析public void actionPerformed(ActionEvent arg0) /對(duì)三個(gè)按鈕事件的處理Button button=(Button)arg0.getSource();/ 獲得事件按鈕源if(button=start)/ 如果是開始按鈕myCanvas.Start();/ 調(diào)用圖片方格打亂方法（5）如何實(shí)現(xiàn)圖片的切換？else if(button=preview)/ 如果是查看事件if(button.getLabel()=預(yù)覽)/ 如

11、果按鈕標(biāo)簽為預(yù)覽 container.remove(myCanvas);/ 容器移除圖片面板 container.add(panelPreview);/ 容器添加預(yù)覽標(biāo)簽 panelPreview.updateUI(); / 不用調(diào)整大小就可以出現(xiàn)新增刪的組件 container.repaint();/ 重繪 button.setLabel(返回);/ 設(shè)置按鈕標(biāo)簽（5）如何實(shí)現(xiàn)圖片的切換？elsecontainer.remove(panelPreview);/ 容器移除預(yù)覽面板container.add(myCanvas);/ 容器添加圖片面板container.repaint();/ 重繪

12、button.setLabel(預(yù)覽);/ 設(shè)置按鈕標(biāo)簽（5）如何實(shí)現(xiàn)圖片的切換？else if(button=set)/如果是選擇按鈕，修改所選圖片Choice pic = new Choice();/ 創(chuàng)建選擇器pic.add(小貓);/ 添加列表項(xiàng)pic.add(小豬); pic.add(云);pic.add(QQ);pic.add(卡通);pic.add(花);（5）如何實(shí)現(xiàn)圖片的切換？int i=JOptionPane.showConfirmDialog(this,pic, 選擇圖片, JOptionPane.OK_CANCEL_OPTION);/彈出對(duì)話框if(i=JOptionPane.YES_OPTION)/ 選擇對(duì)話框的確定按鈕MyCanvas.pictureID=pic.getSelectedIndex()+1;/ 獲得列表項(xiàng)的編號(hào)myCanvas.reLoadPictrue();/ 圖片重載（5）如何實(shí)現(xiàn)圖片的切換？Icon icon=new