本文我們將逐步分享基于 JAVA UI 開(kāi)發(fā)的“推箱子”小游戲這個(gè)項(xiàng)目的構(gòu)建流程。

實(shí)際上，筆者在進(jìn)行開(kāi)發(fā)的過(guò)程中，并不是寫(xiě)完一個(gè)界面的內(nèi)部邏輯，就開(kāi)始對(duì)界面進(jìn)行美化，而是先讓所有的東西可以正常地跑起來(lái)，再談美化。

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

項(xiàng)目創(chuàng)建

根據(jù)上期分享的開(kāi)發(fā)思路，先完成 UI 交互部分的框架。

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

SelectSlice：關(guān)卡選擇界面，用戶可以在這個(gè)界面選擇將要跳轉(zhuǎn)的關(guān)卡。

InitSlice：加載界面。當(dāng)用戶選擇關(guān)卡之后，會(huì)進(jìn)入加載界面，仿照游戲加載資源。（實(shí)際上啥都沒(méi)干）

至此，我們可以簡(jiǎn)單地梳理一下四個(gè)界面以及他們包含的組件之間的關(guān)系：用戶進(jìn)入 MainAbilitySlice 之后，通過(guò)“開(kāi)始游戲”按鍵進(jìn)入 SelectSlice。

在 SelectSlice 中有三個(gè)按鍵，會(huì)對(duì)應(yīng)跳轉(zhuǎn)到三個(gè)不同的關(guān)卡，但是進(jìn)入關(guān)卡之前會(huì)先進(jìn)入 InitSlice，加載過(guò)后在進(jìn)入最后的 GameSlice，從而開(kāi)始游戲。以上就是開(kāi)發(fā)的時(shí)候要理清楚的頁(yè)面跳轉(zhuǎn)關(guān)系。

核心代碼分析

①M(fèi)ainAbilitySlice

里面有四個(gè)按鈕，那可以簡(jiǎn)單的給他們分個(gè)類，例如：開(kāi)始游戲的按鈕要實(shí)現(xiàn)的功能是頁(yè)面跳轉(zhuǎn)，直接與其他界面關(guān)聯(lián)，分為一類。

歷史記錄與關(guān)于游戲可以用彈出窗口來(lái)實(shí)現(xiàn)，不需要額外界面，歸為一類；退出游戲按鈕直接結(jié)束應(yīng)用進(jìn)程，也是單獨(dú)一類。

明確之后，就可以給各個(gè)按鈕添加點(diǎn)擊事件了：

//開(kāi)始游戲按鈕
startBtn.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
//頁(yè)面跳轉(zhuǎn)
present(newSelectSlice(),newIntent());
}
});
//歷史記錄按鈕
recordBtn.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
//歷史記錄彈窗
}
});
//關(guān)于游戲按鈕
aboutBtn.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
//關(guān)于游戲彈窗
}
});
//退出游戲按鈕
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();
}
});

②SelectSlice

這一個(gè)界面主要有三個(gè)按鈕，如何實(shí)現(xiàn)按下不同的按鈕，跳轉(zhuǎn)到同一個(gè)加載界面，但是加載完后又跳轉(zhuǎn)到不同的游戲界面？

這里使用 Intent 對(duì)跳轉(zhuǎn)時(shí)的數(shù)據(jù)進(jìn)行打包傳輸，具體實(shí)現(xiàn)如下：

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

那要怎么實(shí)現(xiàn)加載的時(shí)候進(jìn)度條跟進(jìn)？我的實(shí)現(xiàn)方式是使用兩個(gè)定時(shí)器（其實(shí)用一個(gè)也完全能搞定）

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

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

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

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

核心代碼如下：

//GameMap繼承于PositionLayout布局，方便對(duì)圖片進(jìn)行渲染
publicclassGameMapextendsPositionLayout{

privatefinalstaticintsize=110;

//用二維數(shù)組來(lái)存儲(chǔ)地圖
privateInteger[][]gameMap;
//定義x，y坐標(biāo)
privatePairmap_position;
//標(biāo)識(shí)是否繪制過(guò)地圖（畫(huà)過(guò)一次后，后面所有的操作都只能是進(jìn)行刷新，防止重復(fù)生成對(duì)象）
privateBooleanisDrew=Boolean.FALSE;
//定義移動(dòng)方式枚舉，方便外部調(diào)用進(jìn)行選擇
publicenumMOVE_WAY{
MOVE_UP,
MOVE_DOWN,
MOVE_LEFT,
MOVE_RIGHT
}

//設(shè)置每種物體的屬性值
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;
//定義存儲(chǔ)地圖用的棧
privateStackstack;
//可使用此構(gòu)造函數(shù)繪制不同大小的地圖，這個(gè)是預(yù)留的接口，項(xiàng)目中使用的是直接在xml文件中加入這個(gè)組件（因?yàn)槔^承了PositionLayout所以可以在xml文件中使用），當(dāng)然也可以直接用構(gòu)造函數(shù)創(chuàng)建，留給讀者自己發(fā)揮。
publicGameMap(Contextcontext,Integer[][]map,intx,inty){
super(context);
gameMap=map;
map_position=newPair<>(x,y);
}
//外部設(shè)置地圖接口
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;ifor(intj=0;jnewDraweeView(getContext());
draweeView.setComponentSize(size,size);
draweeView.setContentPosition(size*j,size*i);
intindex=gameMap[i][j];
switch(index){
caseROAD:
Glide.with(getContext())
.load(ResourceTable.Media_road)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.into(draweeView);
break;
caseWALL:
Glide.with(getContext())
.load(ResourceTable.Media_wall)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.into(draweeView);
break;
caseLABA:
Glide.with(getContext())
.load(ResourceTable.Media_laba)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.into(draweeView);
break;
caseYIBU:
Glide.with(getContext())
.load(ResourceTable.Media_yibu)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.into(draweeView);
break;
caseBOBO:
Glide.with(getContext())
.load(ResourceTable.Media_bobo)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.into(draweeView);
break;
caseMINI:
Glide.with(getContext())
.load(ResourceTable.Media_mini)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.into(draweeView);
break;
caseMIAO:
Glide.with(getContext())
.load(ResourceTable.Media_miao)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.into(draweeView);
break;
caseBALL_EMPTY:
Glide.with(getContext())
.load(ResourceTable.Media_ballEmpty)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.into(draweeView);
break;
caseBALL_FULL1:
caseBALL_FULL2:
caseBALL_FULL3:
caseBALL_FULL4:
caseBALL_FULL5:
Glide.with(getContext())
.load(ResourceTable.Media_ballFull)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.into(draweeView);
break;
casePEOPLE1:
casePEOPLE2:
casePEOPLE3:
casePEOPLE4:
casePEOPLE5:
casePEOPLE6:
Glide.with(getContext())
.load(ResourceTable.Media_people)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.into(draweeView);
break;
}

this.addComponent(draweeView);
}
}
isDrew=Boolean.TRUE;
}
//外部刷新地圖接口
publicvoidflushMap(){
for(inti=0;ifor(intj=0;jintindex=gameMap[i][j];
switch(index){
caseROAD:
Glide.with(getContext())
.load(ResourceTable.Media_road)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.into(draweeView);
break;
caseWALL:
Glide.with(getContext())
.load(ResourceTable.Media_wall)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.into(draweeView);
break;
caseLABA:
Glide.with(getContext())
.load(ResourceTable.Media_laba)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.into(draweeView);
break;
caseYIBU:
Glide.with(getContext())
.load(ResourceTable.Media_yibu)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.into(draweeView);
break;
caseBOBO:
Glide.with(getContext())
.load(ResourceTable.Media_bobo)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.into(draweeView);
break;
caseMINI:
Glide.with(getContext())
.load(ResourceTable.Media_mini)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.into(draweeView);
break;
caseMIAO:
Glide.with(getContext())
.load(ResourceTable.Media_miao)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.into(draweeView);
break;
caseBALL_EMPTY:
Glide.with(getContext())
.load(ResourceTable.Media_ballEmpty)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.into(draweeView);
break;
caseBALL_FULL1:
caseBALL_FULL2:
caseBALL_FULL3:
caseBALL_FULL4:
caseBALL_FULL5:
Glide.with(getContext())
.load(ResourceTable.Media_ballFull)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.into(draweeView);
break;
casePEOPLE1:
casePEOPLE2:
casePEOPLE3:
casePEOPLE4:
casePEOPLE5:
casePEOPLE6:
Glide.with(getContext())
.load(ResourceTable.Media_people)
.diskCacheStrategy(DiskCacheStrategy.NONE)
.skipMemoryCache(true)
.into(draweeView);
break;
}

}
}
}
//獲取當(dāng)前操作的人物坐標(biāo)
publicPairgetMyPosition(){
for(inti=0;ifor(intj=0;jif(gameMap[i][j]==PEOPLE1||gameMap[i][j]==PEOPLE2||
gameMap[i][j]==PEOPLE3||gameMap[i][j]==PEOPLE4||
gameMap[i][j]==PEOPLE5||gameMap[i][j]==PEOPLE6)
{
returnnewPair<>(i,j);
}

}
}
returnnewPair<>(-1,-1);
}
//給地圖里任意一張圖設(shè)置對(duì)應(yīng)的值，移動(dòng)的時(shí)候需要此接口
protectedvoidsetValue(intx,inty,intvalue){
gameMap[x][y]+=value;
}
//判斷是否能夠移動(dòng)
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;
}
//外部接口，每一次移動(dòng)完判斷游戲是否結(jié)束
publicBooleanisWin(){
for(inti=0;ifor(intj=0;jif(gameMap[i][j]==LABA||gameMap[i][j]==YIBU||
gameMap[i][j]==BOBO||gameMap[i][j]==MINI||
gameMap[i][j]==MIAO)returnBoolean.FALSE;
}
}
returnBoolean.TRUE;
}
//外部移動(dòng)接口
publicvoidmove(@NotNullMOVE_WAYmove_way){
Pairposition=getMyPosition();
Integer[][]oldMap=newInteger[map_position.f][map_position.s];
for(inti=0;iif(map_position.s>=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;iif(map_position.s>=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);
}
}

后退地圖操作的按鈕和地圖是剛需，優(yōu)先實(shí)現(xiàn)，代碼如下：

//在外部定義變量
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方法內(nèi)

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

//滑動(dòng)屏幕移動(dòng)角色
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)100){//right
gameMap.move(GameMap.MOVE_WAY.MOVE_RIGHT);
}
elseif(endPoint.getX()abs(endPoint.getY()-start_y)100){//left
gameMap.move(GameMap.MOVE_WAY.MOVE_LEFT);
}
elseif(endPoint.getY()abs(endPoint.getX()-start_x)100){//up
gameMap.move(GameMap.MOVE_WAY.MOVE_UP);
}
elseif(endPoint.getY()>start_y&&Math.abs(endPoint.getX()-start_x)100){//down
gameMap.move(GameMap.MOVE_WAY.MOVE_DOWN);
}
if(gameMap.isWin()){
//贏了之后該干嘛

}
break;
}
returntrue;
}

});
stackBtn.setClickedListener(newComponent.ClickedListener(){
@Override
publicvoidonClick(Componentcomponent){
gameMap.back();
}
});

用一個(gè)漂亮的布局整合起來(lái)，再根據(jù)自己的興趣添加一些其他功能，下篇將重點(diǎn)給出美化 UI 交互界面的代碼，敬請(qǐng)期待！