OpenHarmony羊了個羊復刻學習

作者：程皖Orz 2022-10-21 15:35:58

系統 OpenHarmony

在這里我選擇使用兩層、4種類型，總個數36個，界面選擇6*6的方格，下面存儲的格數選擇為6個。

??想了解更多關于開源的內容，請訪問：??

??51CTO 開源基礎軟件社區??

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

一、明確玩法

#沖刺創作新星# O了個H（OpenHarmony羊了個羊復刻學習）-開源基礎軟件社區

演示視頻：https://www.bilibili.com/video/BV1ig41127T3。

開源地址：https://gitee.com/cheng-wan-orz/olgh。

通過點擊選擇對應的目標
點擊目標后界面中消失，移動到欄中
當目標連續湊夠三個(左或右)，進行消除
第一層消除后顯示出第二層
當儲存欄滿了后失敗

二、簡易邏輯搭建

#沖刺創作新星# O了個H（OpenHarmony羊了個羊復刻學習）-開源基礎軟件社區

因為這個內容是半個下午實現的（拖到現在才發而已），僅僅搭建了框架，若有大的問題也請大家諒解，該內容僅做學習使用。

（1）確定層數、欄目數以及種類

在這里我選擇使用兩層、4種類型，總個數36個，界面選擇6*6的方格，下面存儲的格數選擇為6個（PS：本來打算3層8種60個，后來嫌麻煩）。

（2）建立類型標志

var Game_buff = [
  1,1,1,1,1,1,1,1,1,
  2,2,2,2,2,2,2,2,2,
  3,3,3,3,3,3,3,3,3,
  4,4,4,4,4,4,4,4,4]

這里選擇使用單維36數組，代表總數36個，其中1-4代表四種類型，此時將數組進行打亂。

Game_buff = Game_buff.sort(() => 0.5 - Math.random())  //效果為隨機打亂數組排序

此時經過打亂后得到一個隨機的數組排序，即實現完全隨機的游戲體驗。

（3）建立層次

在得到打亂后的數組后需要進行分層，此時使用隨機數。

First = Math.random()*10+10   //取隨機數
First = Math.trunc(First)   //取整

得到第一層是[0,10]+10,即得到一個10-20的數作為第一層的個數。

Second = 36 - First;

（4）位置排序

在確定第一層和第二層數目以及整體類型數組后，需要考慮怎么樣進行隨機位置的擺放，單純的按數排序是我們不希望看到的，這里引入坐標的概念，因為我使用的是6*6的單元格，這里創建一個36成員的數組。

var ONE_set = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35]

此時進行第一次打亂，同樣使用打亂函數。

ONE_set = ONE_set.sort(() => 0.5 - Math.random())

打亂后即可得到一個亂序的位置排序，此時將第一層的內容進行放入即可。

//ONE_set的數目可通過對6的整除和除以，得到對應的行列坐標，例如23是第四列第五個

（5）建立棋盤

在位置和類型確定后建立棋盤。

var fisrt_set = [
  0,0,0,0,0,0,
  0,0,0,0,0,0,
  0,0,0,0,0,0,
  0,0,0,0,0,0,
  0,0,0,0,0,0,
  0,0,0,0,0,0]
var Second_set = [
  0,0,0,0,0,0,
  0,0,0,0,0,0,
  0,0,0,0,0,0,
  0,0,0,0,0,0,
  0,0,0,0,0,0,
  0,0,0,0,0,0]

將上方確定的內容進行導入,此時fisrt_set和Second_set代表兩層棋盤的擺放情況。

for(let num = 0;num<First;num++)
  {
    if(Game_buff[num]==1)
    {
      this.context.drawImage( this.img1,(80+((ONE_set[num]%6))*100),(240+(Math.floor((ONE_set[num]/6)))*100),80,80)
      fisrt_set[ONE_set[num]] = 1
    }else if(Game_buff[num]==2)
    {
      this.context.drawImage( this.img2,(80+((ONE_set[num]%6))*100),(240+(Math.floor((ONE_set[num]/6)))*100),80,80)
      fisrt_set[ONE_set[num]] = 2
    }else if(Game_buff[num]==3)
    {
      this.context.drawImage( this.img3,(80+((ONE_set[num]%6))*100),(240+(Math.floor((ONE_set[num]/6)))*100),80,80)
      fisrt_set[ONE_set[num]] = 3
    }else if(Game_buff[num]==4)
    {
      this.context.drawImage( this.img4,(80+((ONE_set[num]%6))*100),(240+(Math.floor((ONE_set[num]/6)))*100),80,80)
      fisrt_set[ONE_set[num]] = 4
    }else if(Game_buff[num]==5)
    {
      this.context.drawImage( this.img5,(80+((ONE_set[num]%6))*100),(240+(Math.floor((ONE_set[num]/6)))*100),80,80)
      fisrt_set[ONE_set[num]] = 5
    }else if(Game_buff[num]==6)
    {
      this.context.drawImage( this.img6,(80+((ONE_set[num]%6))*100),(240+(Math.floor((ONE_set[num]/6)))*100),80,80)
      fisrt_set[ONE_set[num]] = 6
    }
  }
  Remember = ONE_set
  ONE_set = ONE_set.sort(() => 0.5 - Math.random())

  for(let num = 0;num<Second;num++)
  {
    if(Game_buff[num+First]==1)
    {
      this.context.drawImage( this.img1,(120+((ONE_set[num]%6))*100),(280+(Math.floor((ONE_set[num]/6)))*100),80,80)
      Second_set[ONE_set[num]] = 1
    }else if(Game_buff[num+First]==2)
    {
      this.context.drawImage( this.img2,(120+((ONE_set[num]%6))*100),(280+(Math.floor((ONE_set[num]/6)))*100),80,80)
      Second_set[ONE_set[num]] = 2
    }else if(Game_buff[num+First]==3)
    {
      this.context.drawImage( this.img3,(120+((ONE_set[num]%6))*100),(280+(Math.floor((ONE_set[num]/6)))*100),80,80)
      Second_set[ONE_set[num]] = 3
    }else if(Game_buff[num+First]==4)
    {
      this.context.drawImage( this.img4,(120+((ONE_set[num]%6))*100),(280+(Math.floor((ONE_set[num]/6)))*100),80,80)
      Second_set[ONE_set[num]] = 4
    }else if(Game_buff[num]==5)
    {
      this.context.drawImage( this.img5,(120+((ONE_set[num]%6))*100),(280+(Math.floor((ONE_set[num]/6)))*100),80,80)
      Second_set[ONE_set[num]] = 5
    }else if(Game_buff[num]==6)
    {
      this.context.drawImage( this.img6,(80+((ONE_set[num]%6))*100),(240+(Math.floor((ONE_set[num]/6)))*100),80,80)
      Second_set[ONE_set[num]] = 6
    }
  }

（6）點擊判定

點擊判定這里簡化為坐標實現（具體實現看下午技術部分），通過6*6單元格的分析，當點擊后得到一個XY軸，此時首先判斷該層數的XY軸處有沒有放置圖片，如果有則讀取當前點的類型（1-4），并將其消除進入消除判定。

（7）消除判定

當點擊到類型后，該圖片進入欄目中，此時需要對欄目進行判定，是否出現連續三個的情況，引入一維數組。

var ALL_Get = [0,0,0,0,0,0];

當點擊判定后，首先判斷當前第一位是否存在，沒有的話點擊的內容成為第一位，有的話成為第二位。

在前兩位都存在的情況下，判斷前三位是否一致，一致的話消除，不一致的話成為第三位。

當前三位的存在的情況下，判斷第二第三和點擊的是否一致，不一致判斷第一第二和點擊的項目是否一致，都不一致則成為第四位，一致則消除。

當欄目數為5的情況下，且點擊項目左右都不一致，則游戲失敗(判斷程序如下)。

Con_Sheep(num)
{
  if(ALL_Get[0]==0)
  {
    ALL_Get[0] = num;
  }else if(ALL_Get[0]!=0 && ALL_Get[1]==0)
  {
    ALL_Get[1] = num;
  }else if(ALL_Get[0]!=0 && ALL_Get[1]!=0 && ALL_Get[2]==0  && ALL_Get[3]==0 && ALL_Get[4]==0 )
  {
    if(ALL_Get[0] == ALL_Get[1] && ALL_Get[0] == num)
    {
      ALL_Get[0] = 0;
      ALL_Get[1] = 0;
    }else
    {
      ALL_Get[2] = num;
    }
  }else if(ALL_Get[0]!=0 && ALL_Get[1]!=0  && ALL_Get[2]!=0 && ALL_Get[3]==0 && ALL_Get[4]==0)
  {
    if(ALL_Get[1] == ALL_Get[2] && ALL_Get[1] == num)
    {
      ALL_Get[2] = 0;
      ALL_Get[1] = 0;
    }else if(ALL_Get[0] == ALL_Get[1] && ALL_Get[0] == num)
    {
      ALL_Get[0] = ALL_Get[2];
      ALL_Get[1] = 0;
      ALL_Get[2] = 0;
    }else
    {
      ALL_Get[3] = num;
    }
  }else if(ALL_Get[0]!=0 && ALL_Get[1]!=0  && ALL_Get[2]!=0  && ALL_Get[3]!=0 && ALL_Get[4]==0)
  {
    if(ALL_Get[2] == ALL_Get[3] && ALL_Get[2] == num)
    {
      ALL_Get[2] = 0;
      ALL_Get[3] = 0;
    }else if(ALL_Get[0] == ALL_Get[1] && ALL_Get[0] == num)
    {
      ALL_Get[0] = ALL_Get[2];
      ALL_Get[1] = ALL_Get[3];
      ALL_Get[2] = 0;
      ALL_Get[3] = 0;
    }else
    {
      ALL_Get[4] = num;
    }
  }else if(ALL_Get[0]!=0 && ALL_Get[1]!=0  && ALL_Get[2]!=0  && ALL_Get[3]!=0 && ALL_Get[4]!=0)
  {
    if(ALL_Get[4] == ALL_Get[3] && ALL_Get[3] == num)
    {
      ALL_Get[4] = 0;
      ALL_Get[3] = 0;
    }else if(ALL_Get[0] == ALL_Get[1] && ALL_Get[0] == num)
    {
      ALL_Get[0] = ALL_Get[2];
      ALL_Get[1] = ALL_Get[3];
      ALL_Get[2] = ALL_Get[4];
      ALL_Get[3] = 0;
    }else
    {
      AlertDialog.show({
        message: '你輸了！！！'
      })
      ALL_Get[5] = num;
      flag = 1;
    }
  }
  this.context.clearRect(0, 1010, 720, 100) //消除
  //刷新底部顯示
  if(ALL_Get[0]==0)
  {
  }else if(ALL_Get[0]==1)
  {
    this.context.drawImage( this.img1,80,1010,80,80)
  }else if(ALL_Get[0]==2)
  {
    this.context.drawImage( this.img2,80,1010,80,80)
  }else if(ALL_Get[0]==3)
  {
    this.context.drawImage( this.img3,80,1010,80,80)
  }else if(ALL_Get[0]==4)
  {
    this.context.drawImage( this.img4,80,1010,80,80)
  }else if(ALL_Get[0]==5)
  {
    this.context.drawImage( this.img5,80,1010,80,80)
  }else if(ALL_Get[0]==6)
  {
    this.context.drawImage( this.img6,80,1010,80,80)
  }
  ///////////////////////////////////////////////////////////////////////////
  if(ALL_Get[1]==0)
  {
  }else if(ALL_Get[1]==1)
  {
    this.context.drawImage( this.img1,180,1010,80,80)
  }else if(ALL_Get[1]==2)
  {
    this.context.drawImage( this.img2,180,1010,80,80)
  }else if(ALL_Get[1]==3)
  {
    this.context.drawImage( this.img3,180,1010,80,80)
  }else if(ALL_Get[1]==4)
  {
    this.context.drawImage( this.img4,180,1010,80,80)
  }else if(ALL_Get[1]==5)
  {
    this.context.drawImage( this.img5,180,1010,80,80)
  }else if(ALL_Get[1]==6)
  {
    this.context.drawImage( this.img6,180,1010,80,80)
  }
  ///////////////////////////////////////////////////////////////////////////
  if(ALL_Get[2]==0)
  {
  }else if(ALL_Get[2]==1)
  {
    this.context.drawImage( this.img1,280,1010,80,80)
  }else if(ALL_Get[2]==2)
  {
    this.context.drawImage( this.img2,280,1010,80,80)
  }else if(ALL_Get[2]==3)
  {
    this.context.drawImage( this.img3,280,1010,80,80)
  }else if(ALL_Get[2]==4)
  {
    this.context.drawImage( this.img4,280,1010,80,80)
  }else if(ALL_Get[2]==5)
  {
    this.context.drawImage( this.img5,280,1010,80,80)
  }else if(ALL_Get[2]==6)
  {
    this.context.drawImage( this.img6,280,1010,80,80)
  }
  ///////////////////////////////////////////////////////////////////////////
  if(ALL_Get[3]==0)
  {
  }else if(ALL_Get[3]==1)
  {
    this.context.drawImage( this.img1,380,1010,80,80)
  }else if(ALL_Get[3]==2)
  {
    this.context.drawImage( this.img2,380,1010,80,80)
  }else if(ALL_Get[3]==3)
  {
    this.context.drawImage( this.img3,380,1010,80,80)
  }else if(ALL_Get[3]==4)
  {
    this.context.drawImage( this.img4,380,1010,80,80)
  }else if(ALL_Get[3]==5)
  {
    this.context.drawImage( this.img5,380,1010,80,80)
  }else if(ALL_Get[3]==6)
  {
    this.context.drawImage( this.img6,380,1010,80,80)
  }
  ///////////////////////////////////////////////////////////////////////////
  if(ALL_Get[4]==0)
  {
  }else if(ALL_Get[4]==1)
  {
    this.context.drawImage( this.img1,480,1010,80,80)
  }else if(ALL_Get[4]==2)
  {
    this.context.drawImage( this.img2,480,1010,80,80)
  }else if(ALL_Get[4]==3)
  {
    this.context.drawImage( this.img3,480,1010,80,80)
  }else if(ALL_Get[4]==4)
  {
    this.context.drawImage( this.img4,480,1010,80,80)
  }else if(ALL_Get[4]==5)
  {
    this.context.drawImage( this.img5,480,1010,80,80)
  }else if(ALL_Get[4]==6)
  {
    this.context.drawImage( this.img6,480,1010,80,80)
  }
  ///////////////////////////////////////////////////////////////////////////
  if(ALL_Get[5]==0)
  {
  }else if(ALL_Get[5]==1)
  {
    this.context.drawImage( this.img1,580,1010,80,80)
  }else if(ALL_Get[5]==2)
  {
    this.context.drawImage( this.img2,580,1010,80,80)
  }else if(ALL_Get[5]==3)
  {
    this.context.drawImage( this.img3,580,1010,80,80)
  }else if(ALL_Get[5]==4)
  {
    this.context.drawImage( this.img4,580,1010,80,80)
  }else if(ALL_Get[5]==5)
  {
    this.context.drawImage( this.img5,580,1010,80,80)
  }else if(ALL_Get[5]==6)
  {
    this.context.drawImage( this.img6,580,1010,80,80)
  }
}

（8）第一層完成

每次操作后都判斷一次棋盤數組是否都為0，如果都為0的話代表當前層數被清空，進入下一層。

let if_all = 0;
          for(let num = 0;num<36;num++)
          {
            if(Second_set[num]!=0)
            {
              if_all = 1;
            }
          }
          if(if_all==0)
          {
            AlertDialog.show({
              message: '成功通過第二層'
            })
            Now_floor = 1
            this.Re_fisrt_floor()
          }

三、OpenHarmony程序編寫

我們主要使用到了Canvas畫布組件：https://docs.openharmony.cn/pages/v3.2Beta/zh-cn/application-dev/reference/arkui-ts/ts-components-canvas-canvas.md/。

Canvas

說明： 該組件從API Version 8開始支持。后續版本如有新增內容，則采用上角標單獨標記該內容的起始版本。

提供畫布組件，用于自定義繪制圖形。

（1）主要函數

drawImage

drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number): void
drawImage(image: ImageBitmap | PixelMap, dx: number, dy: number, dWidth: number, dHeight: number): void
drawImage(image: ImageBitmap | PixelMap, sx: number, sy: number, sWidth: number, sHeight: number, dx: number, dy: number, dWidth: number, dHeight: number):void

進行圖像繪制。

參數

參數	類型	必填	默認值	描述
image	??ImageBitmap???或??PixelMap??	是	null	圖片資源，請參考ImageBitmap或PixelMap。
sx	number	否	0	裁切源圖像時距離源圖像左上角的x坐標值。
sy	number	否	0	裁切源圖像時距離源圖像左上角的y坐標值。
sWidth	number	否	0	裁切源圖像時需要裁切的寬度。
sHeight	number	否	0	裁切源圖像時需要裁切的高度。
dx	number	是	0	繪制區域左上角在x軸的位置。
dy	number	是	0	繪制區域左上角在y 軸的位置。
dWidth	number	否	0	繪制區域的寬度。當繪制區域的寬度和裁剪圖像的寬度不一致時，將圖像寬度拉伸或壓縮為繪制區域的寬度。
dHeight	number	否	0	繪制區域的高度。當繪制區域的高度和裁剪圖像的高度不一致時，將圖像高度拉伸或壓縮為繪制區域的高度。

clearRect

clearRect(x: number, y: number, w: number, h: number): void

刪除指定區域內的繪制內容。

參數

參數	類型	必填	默認值	描述
x	number	是	0	指定矩形上的左上角x坐標。
y	number	是	0	指定矩形上的左上角y坐標。
width	number	是	0	指定矩形的寬度。
height	number	是	0	指定矩形的高度。

fillRect

fillRect(x: number, y: number, w: number, h: number): void

填充一個矩形。

參數

參數	類型	必填	默認值	說明
x	number	是	0	指定矩形左上角點的x坐標。
y	number	是	0	指定矩形左上角點的y坐標。
width	number	是	0	指定矩形的寬度。
height	number	是	0	指定矩形的高度。

（2）游戲開局渲染

導入背景圖片：

#沖刺創作新星# O了個H（OpenHarmony羊了個羊復刻學習）-開源基礎軟件社區

@Entry
@Component
struct Index {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private img1:ImageBitmap = new ImageBitmap("image/1.png")
  private img2:ImageBitmap = new ImageBitmap("image/2.png")
  private img3:ImageBitmap = new ImageBitmap("image/3.png")
  private img4:ImageBitmap = new ImageBitmap("image/4.png")
  private img5:ImageBitmap = new ImageBitmap("image/5.png")
  private img6:ImageBitmap = new ImageBitmap("image/6.png")
  @State eventType: string = ''
  @State text: string = ''
}

（3）設置單元格

我的模擬器參數為：

#沖刺創作新星# O了個H（OpenHarmony羊了個羊復刻學習）-開源基礎軟件社區

所以設置單元格大小為100*100，圖片大小為80x80，同時需要確定下方的欄的坐標位置（可自行摸索）。

（4）開局兩層擺放

Set_Game()
{
  Game_buff = Game_buff.sort(() => 0.5 - Math.random())
  Re_Game = Game_buff
  First = Math.random()*10+10
  First = Math.trunc(First)
  Second = 36 - First;
  /*
  Second = Math.random()*20+10
  Second = Math.trunc(Second)
  Third = 60 - First -Second
  */
  ONE_set = ONE_set.sort(() => 0.5 - Math.random())
  for(let num=0;num<36;num++)
  {
    Remember[num] = ONE_set[num]
  }
  for(let num = 0;num<First;num++)
  {
    if(Game_buff[num]==1)
    {
      this.context.drawImage( this.img1,(80+((ONE_set[num]%6))*100),(240+(Math.floor((ONE_set[num]/6)))*100),80,80)
      fisrt_set[ONE_set[num]] = 1
    }else if(Game_buff[num]==2)
    {
      this.context.drawImage( this.img2,(80+((ONE_set[num]%6))*100),(240+(Math.floor((ONE_set[num]/6)))*100),80,80)
      fisrt_set[ONE_set[num]] = 2
    }else if(Game_buff[num]==3)
    {
      this.context.drawImage( this.img3,(80+((ONE_set[num]%6))*100),(240+(Math.floor((ONE_set[num]/6)))*100),80,80)
      fisrt_set[ONE_set[num]] = 3
    }else if(Game_buff[num]==4)
    {
      this.context.drawImage( this.img4,(80+((ONE_set[num]%6))*100),(240+(Math.floor((ONE_set[num]/6)))*100),80,80)
      fisrt_set[ONE_set[num]] = 4
    }else if(Game_buff[num]==5)
    {
      this.context.drawImage( this.img5,(80+((ONE_set[num]%6))*100),(240+(Math.floor((ONE_set[num]/6)))*100),80,80)
      fisrt_set[ONE_set[num]] = 5
    }else if(Game_buff[num]==6)
    {
      this.context.drawImage( this.img6,(80+((ONE_set[num]%6))*100),(240+(Math.floor((ONE_set[num]/6)))*100),80,80)
      fisrt_set[ONE_set[num]] = 6
    }
  }
  this.context.globalAlpha = 0.5
  this.context.fillStyle = 'rgb(0,0,0)'
  this.context.fillRect(0, 240, 800, 760)
  ONE_set = ONE_set.sort(() => 0.5 - Math.random())
  for(let num = 0;num<Second;num++)
  {
    if(Game_buff[num+First]==1)
    {
      this.context.drawImage( this.img1,(120+((ONE_set[num]%6))*100),(280+(Math.floor((ONE_set[num]/6)))*100),80,80)
      Second_set[ONE_set[num]] = 1
    }else if(Game_buff[num+First]==2)
    {
      this.context.drawImage( this.img2,(120+((ONE_set[num]%6))*100),(280+(Math.floor((ONE_set[num]/6)))*100),80,80)
      Second_set[ONE_set[num]] = 2
    }else if(Game_buff[num+First]==3)
    {
      this.context.drawImage( this.img3,(120+((ONE_set[num]%6))*100),(280+(Math.floor((ONE_set[num]/6)))*100),80,80)
      Second_set[ONE_set[num]] = 3
    }else if(Game_buff[num+First]==4)
    {
      this.context.drawImage( this.img4,(120+((ONE_set[num]%6))*100),(280+(Math.floor((ONE_set[num]/6)))*100),80,80)
      Second_set[ONE_set[num]] = 4
    }else if(Game_buff[num]==5)
    {
      this.context.drawImage( this.img5,(120+((ONE_set[num]%6))*100),(280+(Math.floor((ONE_set[num]/6)))*100),80,80)
      Second_set[ONE_set[num]] = 5
    }else if(Game_buff[num]==6)
    {
      this.context.drawImage( this.img6,(80+((ONE_set[num]%6))*100),(240+(Math.floor((ONE_set[num]/6)))*100),80,80)
      Second_set[ONE_set[num]] = 6
    }
  }
}

由第二部分內容確定邏輯，即可實現游戲初始的渲染部分。

（5）點擊判定

build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .backgroundImage('image/bm.png', ImageRepeat.NoRepeat)
        .backgroundImageSize({ width: '100%', height: '100%'})
        .onReady(() =>{
          this.Set_Game()
          /*
          this.context.drawImage( this.img1,80,240,80,80)
          this.context.drawImage( this.img2,180,340,80,80)
          this.context.drawImage( this.img3,280,440,80,80)
          this.context.drawImage( this.img4,380,540,80,80)
          this.context.drawImage( this.img5,480,640,80,80)
          this.context.drawImage( this.img6,580,740,80,80)
          */
        })
        .onTouch((event: TouchEvent) => {
          if (event.type === TouchType.Up) {
            this.eventType = 'Up'
          this.text = 'TouchType:' + this.eventType + '\nx: '
          + event.touches[0].x + '\n' + 'y: ' + event.touches[0].y
          if(event.touches[0].x < 80 && event.touches[0].x > 660)
          {
            return;
          }
          if(event.touches[0].y < 240 && event.touches[0].y > 820)
          {
            return;
          }

          GET_Key(event.touches[0].x ,event.touches[0].y);
          this.Check()
          }
        })
    }
    .width('100%')
    .height('100%')
  }

該部分是引入onTouch函數，得到對應的XY軸坐標，再進行分析得到6*6單元格的坐標進行判定。

事件

名稱	是否冒泡	功能描述
onTouch(callback: (event?: TouchEvent) => void)	是	觸摸動作觸發該方法調用，event參數見??TouchEvent??介紹。

if(Key_Num>0 && Key_Num<38)     //判定按下是否為單元格區域
    {       
    }
function GET_Key(T_x,T_y)
{
  var error_num  = 0;
  if(T_x< 80 && T_x > 700)
  {
    Key_Num = 0;
    error_num = 1;
  }
  if(T_y < 240 && T_y > 860)
  {
    Key_Num = 0;
    error_num = 1;
  }
  if(error_num == 1)
  {
    Key_Num = 0;
  }else {
    if (Now_floor == 1) {
      Key_Num = Math.ceil((T_x - 80) / 100) + Math.floor((T_y - 240) / 100) * 6;
    }
    if (Now_floor == 2) {
      Key_Num = Math.ceil((T_x - 120) / 100) + Math.floor((T_y - 280) / 100) * 6;
    }
  }
}

得到坐標后需要判斷是否為單元格區域，如果超出該區域則不進行響應。

（6）第二層繪制

當通過第一層時，因為在第一層和第二層之間有一個灰色圖層。需要進行一次全局刷新，此時通過提前記錄的第一次生成的數據，進行一次更新即可。

Re_fisrt_floor()
{
  this.context.clearRect(0, 240, 800, 760)
  for(let num = 0;num<First;num++)
  {
    if(Re_Game[num]==1)
    {
      this.context.drawImage( this.img1,(80+((Remember[num]%6))*100),(240+(Math.floor((Remember[num]/6)))*100),80,80)
      //fisrt_set[ONE_set[num]] = 1
    }else if(Re_Game[num]==2)
    {
      this.context.drawImage( this.img2,(80+((Remember[num]%6))*100),(240+(Math.floor((Remember[num]/6)))*100),80,80)
      //fisrt_set[ONE_set[num]] = 2
    }else if(Re_Game[num]==3)
    {
      this.context.drawImage( this.img3,(80+((Remember[num]%6))*100),(240+(Math.floor((Remember[num]/6)))*100),80,80)
      //fisrt_set[ONE_set[num]] = 3
    }else if(Re_Game[num]==4)
    {
      this.context.drawImage( this.img4,(80+((Remember[num]%6))*100),(240+(Math.floor((Remember[num]/6)))*100),80,80)
      //fisrt_set[ONE_set[num]] = 4
    }else if(Re_Game[num]==5)
    {
      this.context.drawImage( this.img5,(80+((Remember[num]%6))*100),(240+(Math.floor((Remember[num]/6)))*100),80,80)
      //fisrt_set[ONE_set[num]] = 5
    }else if(Re_Game[num]==6)
    {
      this.context.drawImage( this.img6,(80+((Remember[num]%6))*100),(240+(Math.floor((Remember[num]/6)))*100),80,80)
     // fisrt_set[ONE_set[num]] = 6
    }
  }
}

（7）游戲成功

如果正確游戲且通過的話，會提示游戲成功(因為有較大的隨機性，不一定一定成功哦，下一期會教大家怎么使用背景音樂！)

if(Now_floor == 1)
      {
        if(fisrt_set[Key_Num-1]!=0)
        {
          if(Key_Num%6==0)
          {
            this.context.clearRect((80+500),(240+(Math.floor((Key_Num/6))-1)*100),80,80) //消除
          }else{
            this.context.clearRect((80+((Key_Num%6)-1)*100),(240+(Math.floor((Key_Num/6)))*100),80,80) //消除
          }
          this.Con_Sheep(fisrt_set[Key_Num-1])
          fisrt_set[Key_Num-1] = 0
          let if_all = 0;
          for(let num = 0;num<36;num++)
          {
            if(fisrt_set[num]!=0)
            {
              if_all = 1;
            }
          }
          if(if_all==0)
          {
            AlertDialog.show({
              message: '成功通過第一層'
            })
            Now_floor = 1
            //this.Re_fisrt_floor()
          }
        }
      }
      if(Now_floor==2)
      {
        if(Second_set[Key_Num-1]!=0)
        {
          if(Key_Num==37)
          {
            Now_floor = 1
            this.Re_fisrt_floor()
          }
           if(Key_Num%6==0)
          {
            this.context.clearRect((120+500),(280+(Math.floor((Key_Num/6))-1)*100),80,80) //消除
          }else{
            this.context.clearRect((120+((Key_Num%6)-1)*100),(280+(Math.floor((Key_Num/6)))*100),80,80) //消除
          }
          this.Con_Sheep(Second_set[Key_Num-1])
          Second_set[Key_Num-1] = 0
          let if_all = 0;
          for(let num = 0;num<36;num++)
          {
            if(Second_set[num]!=0)
            {
              if_all = 1;
            }
          }
          if(if_all==0)
          {
            AlertDialog.show({
              message: '成功通過第二層'
            })
            Now_floor = 1
            this.Re_fisrt_floor()
          }
        }
      }

??想了解更多關于開源的內容，請訪問：??

??51CTO 開源基礎軟件社區??

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

責任編輯：jianghua 來源： 51CTO開源基礎軟件社區

游戲開發鴻蒙