本文我們將逐步分享基于 JAVA UI 開發的“推箱子”小游戲這個項目的構建流程。

實際上，筆者在進行開發的過程中，并不是寫完一個界面的內部邏輯，就開始對界面進行美化，而是先讓所有的東西可以正常地跑起來，再談美化。

因此本系列文章前半部分會重點討論游戲以及界面之間的核心邏輯，后半部分則會分享美化界面的部分。

項目創建

打開 DevEco Studio，創建一個新項目，選擇 JAVA 作為開發語言，將項目保存至合適的位置。

根據上期分享的開發思路，先完成 UI 交互部分的框架。

可以看到，這里需要新建三個 Slice（原本自帶一個 MainAbilitySlice）：

下面對四個 UI 交互功能進行講解。 MainAbilitySlice：打開應用時，首先顯示的界面，也就是用戶主界面。

SelectSlice：關卡選擇界面，用戶可以在這個界面選擇將要跳轉的關卡。

InitSlice：加載界面。當用戶選擇關卡之后，會進入加載界面，仿照游戲加載資源。（實際上啥都沒干）

GameSlice：最后一個界面，也就是這個游戲的核心界面，所有的游戲邏輯都將在這個頁面中進行，因此它將是本篇文章的核心講解部分。

至此，我們可以簡單地梳理一下四個界面以及他們包含的組件之間的關系：用戶進入 MainAbilitySlice 之后，通過“開始游戲”按鍵進入 SelectSlice。

在 SelectSlice 中有三個按鍵，會對應跳轉到三個不同的關卡，但是進入關卡之前會先進入 InitSlice，加載過后在進入最后的 GameSlice，從而開始游戲。以上就是開發的時候要理清楚的頁面跳轉關系。

核心代碼分析

①MainAbilitySlice

里面有四個按鈕，那可以簡單的給他們分個類，例如：開始游戲的按鈕要實現的功能是頁面跳轉，直接與其他界面關聯，分為一類。

歷史記錄與關于游戲可以用彈出窗口來實現，不需要額外界面，歸為一類；退出游戲按鈕直接結束應用進程，也是單獨一類。

明確之后，就可以給各個按鈕添加點擊事件了：

//開始游戲按鈕
startBtn.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
//頁面跳轉
present(newSelectSlice(),newIntent());
}
});
//歷史記錄按鈕
recordBtn.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
//歷史記錄彈窗
}
});
//關于游戲按鈕
aboutBtn.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
//關于游戲彈窗
}
});
//退出游戲按鈕
exitBtn.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
//退出游戲提示
CommonDialogcommonDialog=newCommonDialog(getContext());
commonDialog.setTitleText("提示");
commonDialog.setContentText("是否退出游戲");
commonDialog.setButton(1,"確定",newIDialog.ClickedListener(){
@Override
publicvoidonClick(IDialogiDialog,inti){
terminateAbility();
}
});
commonDialog.setButton(2,"取消",newIDialog.ClickedListener(){
@Override
publicvoidonClick(IDialogiDialog,inti){
commonDialog.destroy();
}
});
commonDialog.show();
}
});

在開發中，由于歷史記錄跟關于游戲這兩個功能并不是核心，因此，最開始也只是做個殼子放在這，以便自己能專注于游戲主邏輯的開發，這也是我想分享的一種思路：先搭殼子再填東西。 因此，閱讀本系列時，如果碰到代碼中只有注釋，沒有實現內容時，那是因為當時做到這一步的時候，并不會去關注具體如何實現，只會想個大概，先放著。 到這里之后，實際上已經完成了游戲的退出以及從 MainAbilitySlice 頁面到 SelectSlice 頁面的導航，便可進行到我們的下一步。

②SelectSlice

這一個界面主要有三個按鈕，如何實現按下不同的按鈕，跳轉到同一個加載界面，但是加載完后又跳轉到不同的游戲界面？

這里使用 Intent 對跳轉時的數據進行打包傳輸，具體實現如下：

firstBtn.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
Intenti=newIntent();
i.setParam("關卡",1);
present(newInitSlice(),i);
}
});
secondBtn.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
Intenti=newIntent();
i.setParam("關卡",2);
present(newInitSlice(),i);
}
});
thirdBtn.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
Intenti=newIntent();
i.setParam("關卡",3);
present(newInitSlice(),i);
}
});

這里 Intent 的 key 都是“關卡”，但是有不同的 value，對應不同的關卡。實際上，到這里 SelectSlice 已經完成了它的功能了。接下來進入 InitSlice。 ③InitSlice 在加載界面中，我預想的是一個動態的畫面，然后加上一個進度條，因此我可能需要用到能夠播放 gif 的組件，以及進度條組件。

那要怎么實現加載的時候進度條跟進？我的實現方式是使用兩個定時器（其實用一個也完全能搞定）

//onStart外定義
Timert1=newTimer();
Timert2=newTimer();
//onStart內
TimerTasktask1=newTimerTask(){
@Override
publicvoidrun(){
//頁面跳轉
present(newGameSlice(),intent);
}
};
TimerTasktask2=newTimerTask(){
@Override
publicvoidrun(){
//進度條更新
intvalue=progressBar.getProgress();
progressBar.setProgressValue(value+20);
}
};
t1.schedule(task1,5000);
t2.schedule(task2,0,1000);

關于如何播放 gif，本不應該在此講解，因為與主線任務無關，但是這里用到的第三方組件，后面游戲界面頻繁使用，因此在這進行介紹。

這里用到了第三方組件 Glide，關于組件如何使用，可具體看這篇文章，只需幾行代碼即可完成 gif 的播放，十分方便。

https://ost.51cto.com/posts/8635

intimageResourceId=ResourceTable.Media_gifimg;
Glide.with(this)
.asGif()
.load(imageResourceId)
.into(draweeView);

至此，從 InitSlice 跳轉到 GameSlice 的邏輯也寫好了，并且攜帶著從 SelectSlice 打包過來的數據，接下來重點講解游戲界面的實現。 ④GameSlice 制作一個可以玩的游戲界面最首要的任務就是繪制地圖，因此定義了一個 JAVA 類 GameMap 用于地圖的繪制。 在說明如何實現 GameMap 之前，我想先簡單闡述一下推箱子游戲的實現邏輯：實際上每一次操作的都是圖片，邏輯判斷依賴的是圖片所綁定的屬性值（只涉及加減運算）。 舉個例子：我在程序中將路設置為 0，將墻體設置為 1，將寶可夢設置為 2 和 3，將空球設置為 4，那收服之后的球應該設置為：2+4=6、3+4=7，這樣就實現了你把空球推向寶可夢時，顯示的是已經收復的球的狀態。 而如果將人設置為 8，那 8+2=10、8+3=11 也必須是人，這樣才能實現你移動到寶可夢上面時，是以原人物的方式呈現。 這是在設置屬性值需要注意的，其他方面，例如怎么判斷墻體之類的，只需要 if 語句判斷即可。 還有一點，如果我們要實現回退功能，就需要用到棧的一些相關操作。

核心代碼如下：

//GameMap繼承于PositionLayout布局，方便對圖片進行渲染
publicclassGameMapextendsPositionLayout{

privatefinalstaticintsize=110;

//用二維數組來存儲地圖
privateInteger[][]gameMap;
//定義x，y坐標
privatePairmap_position;
//標識是否繪制過地圖（畫過一次后，后面所有的操作都只能是進行刷新，防止重復生成對象）
privateBooleanisDrew=Boolean.FALSE;
//定義移動方式枚舉，方便外部調用進行選擇
publicenumMOVE_WAY{
MOVE_UP,
MOVE_DOWN,
MOVE_LEFT,
MOVE_RIGHT
}

//設置每種物體的屬性值
privatefinalstaticintROAD=0;
privatefinalstaticintWALL=1;

privatefinalstaticintLABA=2;
privatefinalstaticintYIBU=3;
privatefinalstaticintBOBO=4;
privatefinalstaticintMINI=5;
privatefinalstaticintMIAO=6;

privatefinalstaticintBALL_EMPTY=7;
privatefinalstaticintBALL_FULL1=9;
privatefinalstaticintBALL_FULL2=10;
privatefinalstaticintBALL_FULL3=11;
privatefinalstaticintBALL_FULL4=12;
privatefinalstaticintBALL_FULL5=13;
privatefinalstaticintPEOPLE1=14;
privatefinalstaticintPEOPLE2=16;
privatefinalstaticintPEOPLE3=17;
privatefinalstaticintPEOPLE4=18;
privatefinalstaticintPEOPLE5=19;
privatefinalstaticintPEOPLE6=20;
//定義存儲地圖用的棧
privateStackstack;
//可使用此構造函數繪制不同大小的地圖，這個是預留的接口，項目中使用的是直接在xml文件中加入這個組件（因為繼承了PositionLayout所以可以在xml文件中使用），當然也可以直接用構造函數創建，留給讀者自己發揮。
publicGameMap(Contextcontext,Integer[][]map,intx,inty){
super(context);
gameMap=map;
map_position=newPair<>(x,y);
}
//外部設置地圖接口
publicvoidsetMap(Integer[][]map){
gameMap=map;
map_position=newPair<>(map.length,map[0].length);
stack=newStack<>();
}
//繪制地圖接口
publicvoiddrawMap(){
setHeight(size*map_position.s);
setWidth(size*map_position.f);
for(inti=0;igetMyPosition(){
for(inti=0;i(i,j);
}

}
}
returnnewPair<>(-1,-1);
}
//給地圖里任意一張圖設置對應的值，移動的時候需要此接口
protectedvoidsetValue(intx,inty,intvalue){
gameMap[x][y]+=value;
}
//判斷是否能夠移動
protectedBooleanisMove(inti,intj){
if(gameMap[i][j]==ROAD||gameMap[i][j]==LABA||
gameMap[i][j]==YIBU||gameMap[i][j]==BOBO||
gameMap[i][j]==MINI||gameMap[i][j]==MIAO)
returnBoolean.TRUE;
returnBoolean.FALSE;
}
//判斷是不是球
protectedBooleanisBall(inti,intj){
if(gameMap[i][j]==BALL_EMPTY||gameMap[i][j]==BALL_FULL1||
gameMap[i][j]==BALL_FULL2||gameMap[i][j]==BALL_FULL3||
gameMap[i][j]==BALL_FULL4||gameMap[i][j]==BALL_FULL5)
{
returntrue;
}
returnBoolean.FALSE;
}
//外部接口，每一次移動完判斷游戲是否結束
publicBooleanisWin(){
for(inti=0;iposition=getMyPosition();
Integer[][]oldMap=newInteger[map_position.f][map_position.s];
for(inti=0;i=0)System.arraycopy(gameMap[i],0,oldMap[i],0,map_position.s);
}

stack.push(oldMap);
switch(move_way){
caseMOVE_UP:
if(this.isMove(position.f-1,position.s))
{
this.setValue(position.f,position.s,-PEOPLE1);
this.setValue(position.f-1,position.s,PEOPLE1);
}
if(this.isBall(position.f-1,position.s))
{
if(this.isMove(position.f-2,position.s))
{
this.setValue(position.f,position.s,-PEOPLE1);
this.setValue(position.f-1,position.s,BALL_EMPTY);
this.setValue(position.f-2,position.s,BALL_EMPTY);
}
}
break;
caseMOVE_DOWN:
if(this.isMove(position.f+1,position.s))
{
this.setValue(position.f,position.s,-PEOPLE1);
this.setValue(position.f+1,position.s,PEOPLE1);
}
if(this.isBall(position.f+1,position.s))
{
if(this.isMove(position.f+2,position.s))
{
this.setValue(position.f,position.s,-PEOPLE1);
this.setValue(position.f+1,position.s,BALL_EMPTY);
this.setValue(position.f+2,position.s,BALL_EMPTY);
}
}
break;
caseMOVE_LEFT:
if(this.isMove(position.f,position.s-1))
{
this.setValue(position.f,position.s,-PEOPLE1);
this.setValue(position.f,position.s-1,PEOPLE1);
}
if(this.isBall(position.f,position.s-1))
{
if(this.isMove(position.f,position.s-2))
{
this.setValue(position.f,position.s,-PEOPLE1);
this.setValue(position.f,position.s-1,BALL_EMPTY);
this.setValue(position.f,position.s-2,BALL_EMPTY);
}
}
break;
caseMOVE_RIGHT:
if(this.isMove(position.f,position.s+1))
{
this.setValue(position.f,position.s,-PEOPLE1);
this.setValue(position.f,position.s+1,PEOPLE1);
}
if(this.isBall(position.f,position.s+1))
{
if(this.isMove(position.f,position.s+2))
{
this.setValue(position.f,position.s,-PEOPLE1);
this.setValue(position.f,position.s+1,BALL_EMPTY);
this.setValue(position.f,position.s+2,BALL_EMPTY);
}
}
break;
}
flushMap();
}
//外部回退原先地圖接口
publicvoidback(){
if(stack.empty())return;
Integer[][]temp=stack.peek();
for(inti=0;i=0)System.arraycopy(temp[i],0,gameMap[i],0,map_position.s);
}
flushMap();
stack.pop();
}

publicBooleangetIsDrew(){
returnisDrew;
}

publicGameMap(Contextcontext){
super(context);
}

publicGameMap(Contextcontext,AttrSetattrSet){
super(context,attrSet);
}

publicGameMap(Contextcontext,AttrSetattrSet,StringstyleName){
super(context,attrSet,styleName);
}
}

至此，完成了地圖類的代碼，可以開始繪制 GameSlice 了。在預覽圖中看到，核心部分有很多：一個退出界面按鈕，一個設置按鈕，一個倒計時器，還有一張地圖，一個后退地圖操作的按鈕，按照我自己的想法先進行分類。

后退地圖操作的按鈕和地圖是剛需，優先實現，代碼如下：

//在外部定義變量
floatstart_x;
floatstart_y;

Integer[][]map;
Integer[][]map1={
{1,1,1,1,1,1,1,1,1},
{1,0,0,0,1,0,0,1,1},
{1,0,1,0,1,7,2,1,1},
{1,0,0,0,0,7,3,1,1},
{1,0,1,0,1,7,4,1,1},
{1,0,0,0,1,0,0,1,1},
{1,1,1,1,1,0,14,1,1},
{1,1,1,1,1,1,1,1,1},
{1,1,1,1,1,1,1,1,1}
};
Integer[][]map2={
{1,1,1,1,1,1,1,1,1},
{1,1,1,1,1,1,1,1,1},
{1,1,0,0,0,3,0,1,1},
{1,1,0,1,0,1,0,1,1},
{1,1,0,7,14,7,0,1,1},
{1,1,0,1,0,1,5,1,1},
{1,1,0,7,6,0,0,1,1},
{1,1,1,1,1,1,1,1,1},
{1,1,1,1,1,1,1,1,1}
};
Integer[][]map3={
{1,1,1,1,1,1,1,1,1},
{1,1,1,1,1,1,1,1,1},
{1,0,2,0,7,0,1,1,1},
{1,1,0,7,6,7,0,1,1},
{1,3,4,5,1,0,5,1,1},
{1,0,1,7,0,7,0,1,1},
{1,0,7,0,1,2,7,1,1},
{1,0,14,0,0,0,0,1,1},
{1,1,1,1,1,1,1,1,1}
};

//onStart方法內

switch(intent.getIntParam("關卡",0))
{
case1:
map=map1;
break;
case2:
map=map2;
break;
case3:
map=map3;
break;
}
gameMap.setMap(map);
if(!gameMap.getIsDrew())gameMap.drawMap();
elsegameMap.flushMap();

//滑動屏幕移動角色
gameMap.setTouchEventListener(newComponent.TouchEventListener(){
@Override
publicbooleanonTouchEvent(Componentcomponent,TouchEventtouchEvent){
intaction=touchEvent.getAction();
switch(action){
caseTouchEvent.PRIMARY_POINT_DOWN:
MmiPointstartPoint=touchEvent.getPointerPosition(0);
start_x=startPoint.getX();
start_y=startPoint.getY();
break;
caseTouchEvent.PRIMARY_POINT_UP:
MmiPointendPoint=touchEvent.getPointerPosition(0);
if(endPoint.getX()>start_x&&Math.abs(endPoint.getY()-start_y)start_y&&Math.abs(endPoint.getX()-start_x)
游戲整體框架（不包括數據存儲）大概就是這些，至此，已經實現了這個游戲最基礎的功能了，從開始界面到游戲界面，以及各種游戲操作，接下來的事情就是對這些零零散散的組件。

	

	用一個漂亮的布局整合起來，再根據自己的興趣添加一些其他功能，下篇將重點給出美化 UI 交互界面的代碼，敬請期待！

	審核編輯：湯梓紅