#2020徵文-手機#鴻蒙手機經典小遊戲——俄羅斯方塊
阿新 • • 發佈：2021-01-11
前言
為了更好地熟練掌握鴻蒙手機應用開發，深鴻會深大學習小組將帶來一款經典的鴻蒙手機小遊戲——俄羅斯方塊，此前更多精彩分享歡迎關注荔園Harmony基地。自研了俄羅斯方塊的演算法，詳細講述了俄羅斯方塊在鴻蒙手機上的開發思路，內含詳細註釋。深鴻會深大學習小組是一群熱衷於學習鴻蒙相關知識和開發鴻蒙相關應用的開發者們，我們的學習專案為：荔園Harmony，同時也歡迎與各位感興趣的開發者一起學習HarmonyOS開發，相互交流、共同進步。
概述
本個demo將從零基礎開始完成鴻蒙小遊戲APP在手機上的編譯在專案中我們所使用到的軟體為DevEco Studio，下載地址為： DevEco Studio下載、DevEco Studio安裝教程，在專案中我們要實現的內容為俄羅斯方塊APP的開發。
1. 執行應用時每次均會隨機生成一種方塊，點選“←”方塊將會向左移動一格，點選“→”方塊將會向右移動一格，點選“變”將會切換成該方塊的其他形狀
2. 當有任一行全部填滿方塊時該行便會消除，該行上述的所有方塊均會向下移動一格
3. 當無法產生新的方塊時便會顯示遊戲結束，點選“重新開始”便可以重新開始遊戲
正文
建立專案
DevEco Studio下載安裝成功後，開啟DevEco Studio，點選左上角的File，點選New，再選擇New Project，選擇Phone選項，選擇預設的模板（java版），然後選擇儲存路徑，將檔案命名為MyPhoneGame2（檔名不能出現中文或者特殊字元，否則將無法成功建立專案檔案），最後點選Finish。
準備工作
在entry>src>main>config.json檔案中最下方"launchType": "standard"的後面新增以下程式碼，這樣就可以實現去掉應用上方的標籤欄了，並且將上方的“label”：“MyPhoneGame2”修改成"label": "俄羅斯方塊"，這樣就可以實現將應用名稱修改為俄羅斯方塊了
config.json最下面部分程式碼：
"icon": "$media:icon", "description": "$string:mainability_description", "label": "俄羅斯方塊","type": "page", "launchType": "standard", "metaData": { "customizeData": [ { "name": "hwc-theme", "value": "androidhwext:style/Theme.Emui.Light.NoTitleBar", "extra": "" } ] }
繪製基礎元件
首先我們要繪製一個15*10的方陣和“←”按鈕、“→”按鈕、“變”按鈕、“重新開始”按鈕
在entry>src>main>java>com.example.myphoneapplication>slice>MainAbilitySlice編寫程式碼
先定義方格的邊長length為常量100，方格的間距interval為常量2，再定義一個位置佈局layout和一個表示方格顏色的二維陣列grids，建立函式initializeinitialize()分別對其初始化，佈局layout初始化為線性佈局DirectionalLayout，二維陣列grids全部賦值為0，在onStart函式中呼叫函式initializeinitialize()
public class MainAbilitySlice extends AbilitySlice { private DirectionalLayout layout; private static final int length=100; private static final int interval=2; private int[][] grids; public void onStart(Intent intent) { super.onStart(intent); initialize(); } public void initialize(){ layout = new DirectionalLayout(this); grids = new int[15][10]; for(int row = 0; row < 15; row++) for(int column = 0; column < 10; column++) grids[row][column] = 0; }
然後建立函式drawGrids(int[][] grids)用於繪製15*10的方陣，因為有七種顏色的方塊，所以分別用0到7代表一種顏色
public void drawGrids(){ layout.setLayoutConfig((new ComponentContainer.LayoutConfig(ComponentContainer.LayoutConfig.MATCH_PARENT,ComponentContainer.LayoutConfig.MATCH_PARENT))); Component.DrawTask task=new Component.DrawTask() { @Override public void onDraw(Component component, Canvas canvas) { Paint paint = new Paint(); paint.setColor(Color.BLACK); RectFloat rect=new RectFloat(30-20,250-20,length*10+interval*9+30+20,length*15+interval*14+250+20); canvas.drawRect(rect,paint); for(int row = 0; row < 15; row++){//0表示灰色，1代表紅色，2代表綠色，3代表藍綠色，4代表品紅色，5代表藍色，6代表白色，7代表黃色 for(int column = 0; column < 10; column++){ if(grids[row][column] == 0) paint.setColor(Color.GRAY); else if(grids[row][column] == 1) paint.setColor(Color.RED); else if(grids[row][column] == 2) paint.setColor(Color.GREEN); else if(grids[row][column] == 3) paint.setColor(Color.CYAN); else if(grids[row][column] == 4) paint.setColor(Color.MAGENTA); else if(grids[row][column] == 5) paint.setColor(Color.BLUE); else if(grids[row][column] == 6) paint.setColor(Color.WHITE); else if(grids[row][column] == 7) paint.setColor(Color.YELLOW); RectFloat rectFloat=new RectFloat(30+column*(length+interval),250+row*(length+interval),30+length+column*(length+interval),250+length+row*(length+interval)); canvas.drawRect(rectFloat,paint); } } } }; layout.addDrawTask(task); setUIContent(layout); }
然後建立函式drawButton()用於繪製四個按鈕
public void drawButton(){
ShapeElement background = new ShapeElement();
background.setRgbColor(new RgbColor(174, 158, 143));
background.setCornerRadius(100);
Button button1 = new Button(this);
button1.setText("←");
button1.setTextAlignment(TextAlignment.CENTER);
button1.setTextColor(Color.WHITE);
button1.setTextSize(100);
button1.setMarginTop(1800);
button1.setMarginLeft(160);
button1.setPadding(10,0,10,0);
button1.setBackground(background);
button1.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
leftShift();
}
});
layout.addComponent(button1);
Button button2 = new Button(this);
button2.setText("變");
button2.setTextAlignment(TextAlignment.CENTER);
button2.setTextColor(Color.WHITE);
button2.setTextSize(100);
button2.setMarginLeft(480);
button2.setMarginTop(-130);
button2.setPadding(10,0,10,0);
button2.setBackground(background);
button2.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
changGrids();
}
});
layout.addComponent(button2);
Button button3 = new Button(this);
button3.setText("→");
button3.setTextAlignment(TextAlignment.CENTER);
button3.setTextColor(Color.WHITE);
button3.setTextSize(100);
button3.setMarginLeft(780);
button3.setMarginTop(-130);
button3.setPadding(10,0,10,0);
button3.setBackground(background);
button3.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
rightShift();
}
});
layout.addComponent(button3);
Button button = new Button(this);
button.setText("重新開始");
button.setTextSize(100);
button.setTextAlignment(TextAlignment.CENTER);
button.setTextColor(Color.WHITE);
button.setMarginTop(5);
button.setMarginLeft(310);
button.setPadding(10,10,10,10);
button.setBackground(background);
button.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
initialize();
}
});
layout.addComponent(button);
}
最後在initialize()函式中呼叫drawButton()函式和drawGrids()函式
public void initialize(){//部分程式碼沒有貼出，歡迎自行下載附件檢視原始碼
drawButton();
drawGrids();
}隨機產生方塊
然後我們要實現隨機產生一種形狀的方塊
首先說明一下本人研究出來表示不同方塊的演算法：用一個常量二維陣列去儲存不同顏色的不同形狀的方塊所在的位置，如{{0,3},{0,4},{1,4},{1,5}}中的{0,3}就表示該方塊的第一個方格在grids[0][3]的位置，{0,4}就表示該方塊的第二個方格在grids[0][4的]位置，以此類推，這樣連起來就可以得到一種顏色的一種形狀的方塊了。
然後先定義各種表示方塊的常量二維陣列，定義方塊所佔方格的數量grids_number為常量4，二維陣列NowGrids表示當前方塊的形狀，row_number表示方塊的總行數，column_number表示方塊的總列數，Grids表示方塊的顏色，column_start表示方塊第一個方格所在二維陣列grids的列數
private static final int[][] RedGrids1={{0,3},{0,4},{1,4},{1,5}}; private static final int[][] RedGrids2={{0,5},{1,5},{1,4},{2,4}}; private static final int[][] GreenGrids1={{0,5},{0,4},{1,4},{1,3}}; private static final int[][] GreenGrids2={{0,4},{1,4},{1,5},{2,5}}; private static final int[][] CyanGrids1={{0,4},{1,4},{2,4},{3,4}}; private static final int[][] CyanGrids2={{0,3},{0,4},{0,5},{0,6}}; private static final int[][] MagentaGrids1={{0,4},{1,3},{1,4},{1,5}}; private static final int[][] MagentaGrids2={{0,4},{1,4},{1,5},{2,4}}; private static final int[][] MagentaGrids3={{0,3},{0,4},{0,5},{1,4}}; private static final int[][] MagentaGrids4={{0,5},{1,5},{1,4},{2,5}}; private static final int[][] BlueGrids1={{0,3},{1,3},{1,4},{1,5}}; private static final int[][] BlueGrids2={{0,5},{0,4},{1,4},{2,4}}; private static final int[][] BlueGrids3={{0,3},{0,4},{0,5},{1,5}}; private static final int[][] BlueGrids4={{0,5},{1,5},{2,5},{2,4}}; private static final int[][] WhiteGrids1={{0,5},{1,5},{1,4},{1,3}}; private static final int[][] WhiteGrids2={{0,4},{1,4},{2,4},{2,5}}; private static final int[][] WhiteGrids3={{0,5},{0,4},{0,3},{1,3}}; private static final int[][] WhiteGrids4={{0,4},{0,5},{1,5},{2,5}}; private static final int[][] YellowGrids={{0,4},{0,5},{1,5},{1,4}}; private static final int grids_number=4; private int[][] NowGrids; private int row_number; private int column_number; private int Grids; private int column_start;
建立函式“create+Color+Grids”為各種顏色各種形狀的方塊賦予對應的NowGrids、row_number、column_numbr、Grids、column_start的值
public void createRedGrids1(){ NowGrids=RedGrids1; row_number=2; column_number=3; Grids=1; column_start=3; } public void createRedGrids2(){ NowGrids=RedGrids2; row_number=3; column_number=2; Grids=1; column_start=4; } public void createGreenGrids1(){ NowGrids=GreenGrids1; row_number=2; column_number=3; Grids=2; column_start=3; } public void createGreenGrids2(){ NowGrids=GreenGrids2; row_number=3; column_number=2; Grids=2; column_start=4; } public void createCyanGrids1(){ NowGrids=CyanGrids1; row_number=4; column_number=1; Grids=3; column_start=4; } public void createCyanGrids2(){ NowGrids=CyanGrids2; row_number=1; column_number=4; Grids=3; column_start=3; } public void createMagentaGrids1(){ NowGrids=MagentaGrids1; row_number=2; column_number=3; Grids=4; column_start=3; } public void createMagentaGrids2(){ NowGrids=MagentaGrids2; row_number=3; column_number=2; Grids=4; column_start=4; } public void createMagentaGrids3(){ NowGrids=MagentaGrids3; row_number=2; column_number=3; Grids=4; column_start=3; } public void createMagentaGrids4(){ NowGrids=MagentaGrids4; row_number=3; column_number=2; Grids=4; column_start=4; } public void createBlueGrids1(){ NowGrids=BlueGrids1; row_number=2; column_number=3; Grids=5; column_start=3; } public void createBlueGrids2(){ NowGrids=BlueGrids2; row_number=3; column_number=2; Grids=5; column_start=4; } public void createBlueGrids3(){ NowGrids=BlueGrids3; row_number=2; column_number=3; Grids=5; column_start=3; } public void createBlueGrids4(){ NowGrids=BlueGrids4; row_number=3; column_number=2; Grids=5; column_start=4; } public void createWhiteGrids1(){ NowGrids=WhiteGrids1; row_number=2; column_number=3; Grids=6; column_start=3; } public void createWhiteGrids2(){ NowGrids=WhiteGrids2; row_number=3; column_number=2; Grids=6; column_start=4; } public void createWhiteGrids3(){ NowGrids=WhiteGrids3; row_number=2; column_number=3; Grids=6; column_start=3; } public void createWhiteGrids4(){ NowGrids=WhiteGrids4; row_number=3; column_number=2; Grids=6; column_start=4; } public void createYellowGrids(){ NowGrids=YellowGrids; row_number=2; column_number=2; Grids=7; column_start=4; }
作者：張詔添
想了解更多內容，請訪問： 51CTO和華為官方戰略合作共建的鴻蒙技術社群https://harmonyos.51cto.com/