這次的題目同樣是陣列系的踩地雷
不過，如果單機自己玩也太無聊了點
所以呢... 這次的目標是「對抗電腦版的踩地雷」！
這個題目有點大，讓我們一步一步慢慢來......
首先是先弄出一個 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：電腦踩到的地雷
負責接受玩家的輸入、然後回報是否命中
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<2; i++){
if(hitX+i==x || hitX+i<0){continue;}
for(int j=-1; j<2; j++){
if(hitY+j==y || hitY+j<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 來處理排版
使用方法可以看官方文件或痞子版的中文翻譯
預計的遊戲畫面長這樣：
上方是數據區
左右兩側是雙方的名字與分數，包了一個 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>
<g:InlineLabel ui:field="hitCount"></g:InlineLabel>
</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}"></m:PlayerInfo>
<g:Label ui:field="remainder" styleName="{style.remainder}"></g:Label>
<m:PlayerInfo ui:field="player" styleName="{style.player}"></m:PlayerInfo>
</g:HorizontalPanel>
<g:FlexTable ui:field="map"></g:FlexTable>
</g:VerticalPanel>
</ui:UiBinder>
很懶惰地用 VerticalPanel 跟 HorizontalPanel 解決 XD
接下來，就要處理跟 web server 之間的溝通了！ [待續]
