HarmonyOS小游戲項(xiàng)目—數(shù)獨(dú)Sudoku（六）

作者：木棉花小藍(lán) 2022-10-19 15:19:53

系統(tǒng) OpenHarmony

本期筆者將在游戲內(nèi)導(dǎo)入更多題目，并實(shí)現(xiàn)游戲處于關(guān)卡選擇頁面時(shí)進(jìn)入不同關(guān)卡的頁面跳轉(zhuǎn)邏輯。

??51CTO 開源基礎(chǔ)軟件社區(qū)??

??https://ost.51cto.com??

前言

本期筆者將在游戲內(nèi)導(dǎo)入更多題目，并實(shí)現(xiàn)游戲處于關(guān)卡選擇頁面時(shí)進(jìn)入不同關(guān)卡的頁面跳轉(zhuǎn)邏輯。

正文

利用xml布局創(chuàng)建UI

打開entry>src>main>resouce>base>graphic，并在graphic目錄下新創(chuàng)建一個(gè)xml文件（可以通過復(fù)制粘貼graphic目錄下的其他xml文件來實(shí)現(xiàn)），將其命名為select_text.xml，最后在文件內(nèi)將代碼修改為如下：

<?xml version="1.0" encoding="UTF-8" ?>
<state-container xmlns:ohos="http://schemas.huawei.com/res/ohos" >
<item ohos:state="component_state_pressed" ohos:element="#007CFD"/>
    <item ohos:state="component_state_empty" ohos:element="white"/>
</state-container>

接著，在graphic目錄下再次新創(chuàng)建一個(gè)xml文件，將其命名為select_text_exit.xml，并在文件內(nèi)添加如下代碼:

<?xml version="1.0" encoding="UTF-8" ?>
<state-container xmlns:ohos="http://schemas.huawei.com/res/ohos" >

<item ohos:state="component_state_pressed" ohos:element="red"/>
    <item ohos:state="component_state_empty" ohos:element="white"/>
</state-container>

這樣以后，我們就完成了兩類組件背景元素的創(chuàng)建，而這兩類組件背景元素所實(shí)現(xiàn)的UI效果是：當(dāng)組件處于被點(diǎn)擊的狀態(tài)時(shí)，組件改變顏色；當(dāng)組件未處于被點(diǎn)擊的·狀態(tài)時(shí)，組件保持初始的顏色。

之后，打開entry>src>main>resouce>base>layout，并在layout目錄下新創(chuàng)建一個(gè)xml文件（可以通過復(fù)制粘貼layout目錄下的其他xml文件來實(shí)現(xiàn)），將其命名為select.xml。

最后在文件內(nèi)將代碼修改為如下:

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <Text
        ohos:id="$+id:btn1"
        ohos:background_element="$graphic:select_text"  //引用先前創(chuàng)建的背景元素
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="30vp"
        ohos:text="第一關(guān)  入門"
        ohos:text_alignment="horizontal_center"
        ohos:bottom_margin="15vp"/>
    <Text
        ohos:id="$+id:btn2"
        ohos:background_element="$graphic:select_text"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="30vp"
        ohos:text="第二關(guān)  初級(jí)"
        ohos:text_alignment="horizontal_center"
        ohos:bottom_margin="15vp"
        />
    <Text
        ohos:id="$+id:btn3"
        ohos:background_element="$graphic:select_text"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="30vp"
        ohos:text="第三關(guān)  中級(jí)"
        ohos:text_alignment="horizontal_center"
        ohos:bottom_margin="15vp"
        />
    <Text
        ohos:id="$+id:btn4"
        ohos:background_element="$graphic:select_text"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="30vp"
        ohos:text="第四關(guān)  中級(jí)"
        ohos:text_alignment="horizontal_center"
        ohos:bottom_margin="15vp"
        />
    <Text
        ohos:id="$+id:btn5"
        ohos:background_element="$graphic:select_text"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="30vp"
        ohos:text="第五關(guān)  高級(jí)"
        ohos:text_alignment="horizontal_center"
        ohos:bottom_margin="15vp"
        />
    <Text
        ohos:id="$+id:Aa"
        ohos:background_element="$graphic:select_text"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="30vp"
        ohos:text_alignment="horizontal_center"
        ohos:bottom_margin="15vp"
        />
    <Text
        ohos:id="$+id:btn6"
        ohos:background_element="$graphic:select_text_exit"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="30vp"
        ohos:text="退出"
        ohos:text_alignment="horizontal_center"
        ohos:top_margin="55vp"
        />
</DirectionalLayout>

這樣以后，我們就完成了基本的組件布局，當(dāng)然，此xml文件在后文是要與關(guān)卡選擇界面相綁定的。此時(shí)可以打開previewer預(yù)覽UI效果。

【木棉花】#打卡不停更#HarmonyOS小游戲項(xiàng)目——數(shù)獨(dú)Sudoku（6）-開源基礎(chǔ)軟件社區(qū)

在SelectAbilitySlice內(nèi)完善交互邏輯

打開先前創(chuàng)建的SelectAbilitySlice（目錄路徑：entry\src\main\java\com.example.project\slice\SelectAbilitySlice），將代碼修改為如下：

package ...
import ......
public class SelectAbilitySlice extends AbilitySlice {   //繼承AbilitySlice類
  private String level;  //定義字符串level，
    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_select);//綁定先前創(chuàng)建的layout類xml文件
    }
    @Override
    protected void onActive() {
        super.onActive();
      //將select.xml文件中的6個(gè)text組件在AbilitySlice中聲明
       Text text1=(Text) findComponentById(ResourceTable.Id_btn1);
       Text text2=(Text) findComponentById(ResourceTable.Id_btn2);
       Text text3=(Text) findComponentById(ResourceTable.Id_btn3);
       Text text4=(Text) findComponentById(ResourceTable.Id_btn4);
       Text text5=(Text) findComponentById(ResourceTable.Id_btn5);
       Text text6=(Text) findComponentById(ResourceTable.Id_btn6);
       Intent intent_go=new Intent();//創(chuàng)建一個(gè)intent對(duì)象
        text1.setClickedListener((Component component)->{
            intent_go.setParam("level","0");
            present(new GameAbilitySlice(),intent_go);
        });
        text2.setClickedListener((Component component)->{
            intent_go.setParam("level","1");
            present(new GameAbilitySlice(),intent_go);
        });
        text3.setClickedListener((Component component)->{
            intent_go.setParam("level","2");
            presen(new GameAbilitySlice(),intent_go);
        });
        text4.setClickedListener((Component component)->{
            intent_go.setParam("level","3");
            present(new GameAbilitySlice(),intent_go);
        });
        text5.setClickedListener((Component component)->{
            intent_go.setParam("level","4");
            present(new GameAbilitySlice(),intent_go);
        });
         text6.setClickedListener((Component component)->{
            terminate();
        });
    }
    @Override
    protected void onResult(int request_code,Intent intent_back){
        super.onResult(request_code,intent_back);
    }
    @Override
    protected void onForeground(Intent intent) {
        super.onForeground(intent);
    }
    @Override
    protected void onBackground() {
        super.onBackground();
    }
}

在此次的代碼添加中，筆者先是擴(kuò)展了SelectAbilitySlice的框架，并將SelectAbilitySlice與select.xml綁定，這樣以后SelectAbilitySlice就可以顯示select.xml內(nèi)設(shè)定的布局元素；接著，我們?cè)趏nActive()函數(shù)內(nèi)聲明了已在select.xml設(shè)定的6個(gè)text組件，并為每個(gè)text組件都設(shè)定了點(diǎn)擊監(jiān)聽器；最后，我們創(chuàng)建了一個(gè)intent對(duì)象，并在每個(gè)text對(duì)象的點(diǎn)擊監(jiān)聽器內(nèi)加入指令：將需要傳遞的數(shù)字信息以字符串的形式儲(chǔ)存在inent中，并調(diào)用present（）函數(shù)執(zhí)行頁面跳轉(zhuǎn)（從SelectAbilitySlice跳轉(zhuǎn)至新創(chuàng)建的GameAbilitySlice）。由于intent是兩個(gè)AbilitySlice的信息傳遞媒介，故當(dāng)頁面導(dǎo)航至新生成的GameAbilitySlice時(shí)，GameAbilitySlice可以接收到來自SelectAbilitySlice的intent，而這個(gè)intent也是攜帶重要的數(shù)字信息的（點(diǎn)擊不同的text組件,intent所攜帶的數(shù)字信息也不同）。關(guān)于intent的接收，筆者將在后文闡述。

完成上述操作后，我們打開MainAbilitySlice，設(shè)置其頁面導(dǎo)航路由，使得我們?cè)谥鹘缑纥c(diǎn)擊“開始游戲”后，系統(tǒng)界面可以從主界面跳轉(zhuǎn)至關(guān)卡選擇界面：

public class MainAbilitySlice extends AbilitySlice {
    @Override
    ...
    @Override
    public void onActive() {
        super.onActive();
        //通過id號(hào)獲取xml文件中的button組件
        Button button1=(Button) findComponentById(ResourceTable.Id_Game);
        button1.setClickedListener(new Component.ClickedListener() {
            @Override
            public void onClick(Component component) {
                present(new SelectAbilitySlice(),new Intent());//點(diǎn)擊此組件后，頁面將從MainAbilitySlice跳轉(zhuǎn)至SelectAbilitySlice             
            }
        });
    }

    @Override
    ...

再打開MainAbility，將PageAbility默認(rèn)展示界面改為InitialAbilitySlice：

......
public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(InitialAbilitySlice.class.getName());  //將參數(shù)改為改為InitialAbilitySlice
    }
}

完成以上操作后，我們可以打開模擬機(jī)查看效果：當(dāng)界面跳轉(zhuǎn)至游戲的主界面時(shí)，我們點(diǎn)擊“開始游戲”，游戲則會(huì)跳轉(zhuǎn)到關(guān)卡選擇的畫面。

【木棉花】#打卡不停更#HarmonyOS小游戲項(xiàng)目——數(shù)獨(dú)Sudoku（6）-開源基礎(chǔ)軟件社區(qū)

點(diǎn)擊：

【木棉花】#打卡不停更#HarmonyOS小游戲項(xiàng)目——數(shù)獨(dú)Sudoku（6）-開源基礎(chǔ)軟件社區(qū)

導(dǎo)入更多的數(shù)獨(dú)題目

在GameAbilitySlice合適的位置加入如下八個(gè)數(shù)組（局部變量），其中，前四個(gè)數(shù)組用做數(shù)獨(dú)題答案，后四個(gè)數(shù)組則將用于題目的初始化、與用戶交互。

...
    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
      ....
//答案
        int[][] grid_v1=new int[6][];
        grid_v1[0]=new int[]{5,4,3,1,2,6};
        grid_v1[1]=new int[]{6,3,4,2,5,1};
        grid_v1[2]=new int[]{2,1,6,5,3,4};
        grid_v1[3]=new int[]{3,5,1,6,4,2};
        grid_v1[4]=new int[]{4,6,2,3,1,5};
        grid_v1[5]=new int[]{1,2,5,4,6,3};
        int[][] grid_v2=new int[6][];
        grid_v2[0]=new int[]{5,6,1,2,3,4};
        grid_v2[1]=new int[]{1,3,5,4,2,6};
        grid_v2[2]=new int[]{2,4,6,3,5,1};
        grid_v2[3]=new int[]{6,5,2,1,4,3};
        grid_v2[4]=new int[]{3,1,4,5,6,2};
        grid_v2[5]=new int[]{4,2,3,6,1,5};
        int[][] grid_v3=new int[6][];
        grid_v3[0]=new int[]{2,1,3,6,4,5};
        grid_v3[1]=new int[]{5,4,1,2,3,6};
        grid_v3[2]=new int[]{6,3,5,4,2,1};
        grid_v3[3]=new int[]{1,6,4,3,5,2};
        grid_v3[4]=new int[]{4,2,6,5,1,3};
        grid_v3[5]=new int[]{3,5,2,1,6,4};
        int[][] grid_v4=new int[6][];
        grid_v4[0]=new int[]{5,2,3,4,1,6};
        grid_v4[1]=new int[]{6,4,2,1,5,3};
        grid_v4[2]=new int[]{3,1,5,6,2,4};
        grid_v4[3]=new int[]{1,3,4,2,6,5};
        grid_v4[4]=new int[]{2,5,6,3,4,1};
        grid_v4[5]=new int[]{4,6,1,5,3,2};
//題目
        int[][] grid_c1=new int[6][];
        grid_c1[0]=new int[]{5,0,3,0,2,0};
        grid_c1[1]=new int[]{0,0,4,2,0,1};
        grid_c1[2]=new int[]{2,1,0,0,3,0};
        grid_c1[3]=new int[]{0,5,0,0,4,2};
        grid_c1[4]=new int[]{4,0,2,3,0,0};
        grid_c1[5]=new int[]{0,2,0,4,0,3};
        int[][] grid_c2=new int[6][];
        grid_c2[0]=new int[]{0,0,1,2,0,0};
        grid_c2[1]=new int[]{0,0,0,0,0,0};
        grid_c2[2]=new int[]{0,0,0,3,0,1};
        grid_c2[3]=new int[]{0,5,2,0,0,3};
        grid_c2[4]=new int[]{0,1,4,5,0,2};
        grid_c2[5]=new int[]{4,0,0,0,0,0};
         int[][] grid_c3=new int[6][];
        grid_c3[0]=new int[]{2,0,3,0,4,5};
        grid_c3[1]=new int[]{0,0,0,0,0,0};
        grid_c3[2]=new int[]{0,0,0,0,2,1};
        grid_c3[3]=new int[]{1,6,0,0,0,0};
        grid_c3[4]=new int[]{0,0,0,0,0,0};
        grid_c3[5]=new int[]{3,5,0,1,0,4};
        int[][] grid_c4=new int[6][];
        grid_c4[0]=new int[]{5,0,0,0,1,6};
        grid_c4[1]=new int[]{0,0,2,0,0,0};
        grid_c4[2]=new int[]{0,1,0,0,0,0};
        grid_c4[3]=new int[]{0,0,0,0,6,0};
        grid_c4[4]=new int[]{0,0,0,3,0,0};
        grid_c4[5]=new int[]{4,6,0,0,0,2};
...

之后，定義一個(gè)新的二維數(shù)組grids_initial（可以是局部變量也可以是局部變量）：

int[][] grids_initial=new  int[6][];

先找到之前用于創(chuàng)建網(wǎng)格區(qū)域的二重for循環(huán)：

for (y=0;y<6;y++){
            for (x=0;x < 6; x++) {
                Button button = new Button(this);
                button.setTouchFocusable(true);
                number=grid_c0[x][y];
                string0=String.valueOf(number);
              ....

然后進(jìn)行如下修改（即將數(shù)組grid_c0改為數(shù)組grids_initial）：

for (y=0;y<6;y++){
            for (x=0;x < 6; x++) {
                Button button = new Button(this);
                button.setTouchFocusable(true);
                number=grids_initial[x][y];//將數(shù)組grid_c0改為數(shù)組grids_initial
                string0=String.valueOf(number);            
              ...

這樣以后，grids_initial就作為唯一用于生成游戲題目的數(shù)組變量了。

最后，刪除之前在onStart()函數(shù)內(nèi)添加的以下賦值代碼：

grids_input=grid_c0;
        grids_win=grid_v0;

獲取intent

終于來到最后一個(gè)環(huán)節(jié)了。在前文的內(nèi)容中，我們已經(jīng)實(shí)現(xiàn)了一個(gè)功能：系統(tǒng)從SelectAbilitySlice導(dǎo)航至GameAbilitySlice時(shí)，GameAbilitySlice可以接收到包含數(shù)字信息的intent。

那么如何獲取intent中的信息呢？如下列代碼所示，我們通過getStringParam方法接收從SelectAbilitySlice傳入的intent，并提取其攜帶的字符串信息（其所對(duì)應(yīng)的鍵是"level"），再將此字符串轉(zhuǎn)化為整形數(shù)據(jù)，最后存儲(chǔ)在一個(gè)新聲明的整型變量L中。因?yàn)閕ntent中存儲(chǔ)的字符串代表用戶想要進(jìn)入的關(guān)卡，所以在得到L以后，我們通過switch來判斷用戶點(diǎn)擊的是第幾關(guān)，并將對(duì)應(yīng)關(guān)卡的題目與答案分別賦給三個(gè)數(shù)組變量：grids_win，grids_input與grids_initial。

......
    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        grid_c0[0]=new int[]{0,0,0,0,1,0};
         .......    
 //獲取intent   
        int L=Integer.parseInt(intent.getStringParam("level"));
    //判斷
        switch (L){
            case 0: grids_win=grid_v0;grids_input=grid_c0;grids_initial=grid_c0;break;
            case 1: grids_win=grid_v1;grids_input=grid_c1;grids_initial=grid_c1;break;
            case 2: grids_win=grid_v2;grids_input=grid_c2;grids_initial=grid_c2;break;
            case 3: grids_win=grid_v3;grids_input=grid_c3;grids_initial=grid_c3;break;
            case 4: grids_win=grid_v4;grids_input=grid_c4;grids_initial=grid_c4;break;
        }

這樣以后，當(dāng)用戶進(jìn)入不同關(guān)卡時(shí)，GameAbilitySlice的題目會(huì)根據(jù)grids_initial初始化，判斷游戲成功與否的Gamesuccess()函數(shù)也會(huì)獲取對(duì)應(yīng)的信息與成功條件，我們也就實(shí)現(xiàn)了游戲處于關(guān)卡選擇頁面時(shí)進(jìn)入不同關(guān)卡的頁面跳轉(zhuǎn)邏輯與功能。

此時(shí)我們可以打開模擬器查看交互效果：

點(diǎn)擊“第二關(guān)”：

【木棉花】#打卡不停更#HarmonyOS小游戲項(xiàng)目——數(shù)獨(dú)Sudoku（6）-開源基礎(chǔ)軟件社區(qū)