網頁版：http://pt2club.blogspot.com/2010/08/gwt.html 上一次教完如何寫一個生命遊戲（好久以前啊 [遠目]） 這次的題目同樣是陣列系的踩地雷 不過，如果單機自己玩也太無聊了點 所以呢... 這次的目標是「對抗電腦版的踩地雷」！ 這個題目有點大，讓我們一步一步慢慢來...... 首先是先弄出一個 MineGM 的物件 來負責創造地雷世界、運作規則邏輯 所以 MineGM 必須要有這些 field public static final int UNKNOW = -1; private int x; private int y; private int total; //總共幾個地雷 private int remainder; //剩下幾個地雷 private boolean[][] answer; //地雷分佈圖 private int[][] map; //玩家看到的地圖 private int[] playerHit = new int[2]; //分別踩了幾個 一開始就用亂數把 answer 準備好 至於 map 的內容一開始都是 UNKNOWN，表示還不知道是啥狀況 map 當中還可能出現： 0～8：九宮格內出現的地雷數 9：玩家踩到的地雷 -9：電腦踩到的地雷 而 MineGM 還需要有一個 public 的 method「shoot()」 負責接受玩家的輸入、然後回報是否命中 public boolean shoot(int hitX, int hitY, boolean who){ map[hitX][hitY] = count(hitX, hitY); //踩到空地的連鎖反應 if(map[hitX][hitY]==0){ for(int i=-1; i&lt;2; i++){ if(hitX+i==x || hitX+i&lt;0){continue;} for(int j=-1; j&lt;2; j++){ if(hitY+j==y || hitY+j&lt;0){continue;} if(map[hitX+i][hitY+j] != -1){ continue; }else{ shoot(hitX+i, hitY+j, who); } } } } //不同人踩到地雷要給不同值 if(map[hitX][hitY]==9){ remainder--; if(who){ playerHit[0]++; }else{ map[hitX][hitY]=-9; playerHit[1]++; } } return Math.abs(map[hitX][hitY])==9; } count() 就是計算周圍九宮格有幾個地雷，然後設定到對應的 map 上 另外，因為我採取「answer 的周圍多一格空地」的作法 所以「踩到空地的連鎖反應」那段的迴圈可以比較好看一點 雖然已經有 MineGM 建立、維護地雷世界了 但是，我們還是需要另外一個 GameInfo 來包裝給玩家的資訊 不然如果玩家 or 電腦直接拿 MineGM 的 answer 來作弊怎麼辦？ Orz 所以在 MineGM 當中弄了一個 static method 來轉換成 GameInfo public static GameInfo toGameInfo(MineGM server) { GameInfo result = new GameInfo(); result.setMap(server.getMap()); result.setRemainder(server.remainder); result.setTotal(server.total); result.setPlayerHit(server.playerHit); return result; } 至於其他的細節就留給大家慢慢寫了...... 接下來處理 UI 的部份 這次使用 GWT 2.0 的 UiBinder 來處理排版 使用方法可以看官方文件或痞子版的中文翻譯 預計的遊戲畫面是長這樣： http://tinyurl.com/296b2mz 上方是數據區 左右兩側是雙方的名字與分數，包了一個 PlayerInfo 來處理 其實很簡單，剛好適合拿來了解 UiBinder PlayerInfo.ui.xml： <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui"> <ui:style> .title{ padding-left: 5px; } </ui:style> <g:FlowPanel> <g:InlineLabel ui:field="title" styleName="{style.title}" /> <g:InlineLabel ui:field="hitCount" /> </g:FlowPanel> </ui:UiBinder> PlayerInfo.java： public class PlayerInfo extends Composite { private static PlayerInfoUiBinder uiBinder = GWT.create(PlayerInfoUiBinder.class); interface PlayerInfoUiBinder extends UiBinder<Widget, PlayerInfo> {} @UiField Label title; @UiField Label hitCount; public PlayerInfo() { initWidget(uiBinder.createAndBindUi(this)); setHitCount(0); } public void setHitCount(int i) { hitCount.setText(""+i); } public void setName(String name){ title.setText(name+"："); } } 中間是還剩下多少地雷，用一個 Label 解決 下方的地雷區則是用 FlexTable 處理 這些東西都放在 MineMain 這個 class 當中 所以 MineMain.ui.xml 會長成這樣： <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> <ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:m="urn:import:org.psmonkey.product.client.mine"> <ui:style> .playerInfo{ width: 480px; } .cpu{ width: 220px; background-color: red; } .player{ width: 220px; background-color: #64A0C8; } .remainder{ width: 40px; color: white; background-color: gray; text-align: center; } </ui:style> <g:VerticalPanel> <g:HorizontalPanel styleName="{style.playerInfo}"> <m:PlayerInfo ui:field="cpu" styleName="{style.cpu}" /> <g:Label ui:field="remainder" styleName="{style.remainder}" /> <m:PlayerInfo ui:field="player" styleName="{style.player}" /> </g:HorizontalPanel> <g:FlexTable ui:field="map"></g:FlexTable> </g:VerticalPanel> </ui:UiBinder> 很懶惰地用 VerticalPanel 跟 HorizontalPanel 解決 XD 接下來，就要處理跟 web server 之間的溝通了！ [待續] -- 錢鍾書： 說出來的話 http://www.psmonkey.org 比不上不說出來的話 Java 版 cookcomic 版 只影射著說不出來的話 and more...... --

※ 發信站: 批踢踢實業坊(ptt.cc) ◆ From: 219.70.214.149