前言java
爲了更好地熟練掌握鴻蒙手機應用開發,深鴻會深大學習小組將帶來一款經典的鴻蒙手機小遊戲——俄羅斯方塊,此前更多精彩分享歡迎關注荔園Harmony基地。自研了俄羅斯方塊的算法,詳細講述了俄羅斯方塊在鴻蒙手機上的開發思路,內含詳細註釋。深鴻會深大學習小組是一羣熱衷於學習鴻蒙相關知識和開發鴻蒙相關應用的開發者們,咱們的學習項目爲:荔園Harmony,同時也歡迎與各位感興趣的開發者一塊兒學習HarmonyOS開發,相互交流、共同進步。android
概述git
本個demo將從零基礎開始完成鴻蒙小遊戲APP在手機上的編譯在項目中咱們所使用到的軟件爲DevEco Studio,下載地址爲:DevEco Studio下載、DevEco Studio安裝教程,在項目中咱們要實現的內容爲俄羅斯方塊APP的開發。算法
1. 運行應用時每次均會隨機生成一種方塊,點擊「←」方塊將會向左移動一格,點擊「→」方塊將會向右移動一格,點擊「變」將會切換成該方塊的其餘形狀json
2. 當有任一行所有填滿方塊時該行便會消除,該行上述的全部方塊均會向下移動一格canvas
3. 當沒法產生新的方塊時便會顯示遊戲結束,點擊「從新開始」即可以從新開始遊戲數組
正文app
建立項目ide
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的值
文章後續內容和相關附件能夠點擊下面的原文連接前往學習
原文連接:https://harmonyos.51cto.com/posts/2382#bkwz