偷偷摘套内射激情视频,久久精品99国产国产精,中文字幕无线乱码人妻,中文在线中文a,性爽19p

OpenHarmony羊了個(gè)羊復(fù)刻學(xué)習(xí)

作者：程皖Orz
系統(tǒng) OpenHarmony
在這里我選擇使用兩層、4種類型，總個(gè)數(shù)36個(gè)，界面選擇6*6的方格，下面存儲(chǔ)的格數(shù)選擇為6個(gè)。

??想了解更多關(guān)于開(kāi)源的內(nèi)容，請(qǐng)?jiān)L問(wèn)：??

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

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

一、明確玩法

#沖刺創(chuàng)作新星# O了個(gè)H（OpenHarmony羊了個(gè)羊復(fù)刻學(xué)習(xí)）-開(kāi)源基礎(chǔ)軟件社區(qū)

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

開(kāi)源地址：https://gitee.com/cheng-wan-orz/olgh。

  • 通過(guò)點(diǎn)擊選擇對(duì)應(yīng)的目標(biāo)
  • 點(diǎn)擊目標(biāo)后界面中消失，移動(dòng)到欄中
  • 當(dāng)目標(biāo)連續(xù)湊夠三個(gè)(左或右)，進(jìn)行消除
  • 第一層消除后顯示出第二層
  • 當(dāng)儲(chǔ)存欄滿了后失敗

二、簡(jiǎn)易邏輯搭建

#沖刺創(chuàng)作新星# O了個(gè)H（OpenHarmony羊了個(gè)羊復(fù)刻學(xué)習(xí)）-開(kāi)源基礎(chǔ)軟件社區(qū)

因?yàn)檫@個(gè)內(nèi)容是半個(gè)下午實(shí)現(xiàn)的（拖到現(xiàn)在才發(fā)而已），僅僅搭建了框架，若有大的問(wèn)題也請(qǐng)大家諒解，該內(nèi)容僅做學(xué)習(xí)使用。

（1）確定層數(shù)、欄目數(shù)以及種類

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

（2）建立類型標(biāo)志

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數(shù)組，代表總數(shù)36個(gè)，其中1-4代表四種類型，此時(shí)將數(shù)組進(jìn)行打亂。

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

此時(shí)經(jīng)過(guò)打亂后得到一個(gè)隨機(jī)的數(shù)組排序，即實(shí)現(xiàn)完全隨機(jī)的游戲體驗(yàn)。

（3）建立層次

在得到打亂后的數(shù)組后需要進(jìn)行分層，此時(shí)使用隨機(jī)數(shù)。

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

得到第一層是[0,10]+10,即得到一個(gè)10-20的數(shù)作為第一層的個(gè)數(shù)。

Second = 36 - First;

（4）位置排序

在確定第一層和第二層數(shù)目以及整體類型數(shù)組后，需要考慮怎么樣進(jìn)行隨機(jī)位置的擺放，單純的按數(shù)排序是我們不希望看到的，這里引入坐標(biāo)的概念，因?yàn)槲沂褂玫氖?*6的單元格，這里創(chuàng)建一個(gè)36成員的數(shù)組。

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]

此時(shí)進(jìn)行第一次打亂，同樣使用打亂函數(shù)。

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

打亂后即可得到一個(gè)亂序的位置排序，此時(shí)將第一層的內(nèi)容進(jìn)行放入即可。

//ONE_set的數(shù)目可通過(guò)對(duì)6的整除和除以，得到對(duì)應(yīng)的行列坐標(biāo)，例如23是第四列第五個(gè)

（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]

將上方確定的內(nèi)容進(jìn)行導(dǎo)入,此時(shí)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）點(diǎn)擊判定

點(diǎn)擊判定這里簡(jiǎn)化為坐標(biāo)實(shí)現(xiàn)（具體實(shí)現(xiàn)看下午技術(shù)部分），通過(guò)6*6單元格的分析，當(dāng)點(diǎn)擊后得到一個(gè)XY軸，此時(shí)首先判斷該層數(shù)的XY軸處有沒(méi)有放置圖片，如果有則讀取當(dāng)前點(diǎn)的類型（1-4），并將其消除進(jìn)入消除判定。

（7）消除判定

當(dāng)點(diǎn)擊到類型后，該圖片進(jìn)入欄目中，此時(shí)需要對(duì)欄目進(jìn)行判定，是否出現(xiàn)連續(xù)三個(gè)的情況，引入一維數(shù)組。

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

當(dāng)點(diǎn)擊判定后，首先判斷當(dāng)前第一位是否存在，沒(méi)有的話點(diǎn)擊的內(nèi)容成為第一位，有的話成為第二位。

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

當(dāng)前三位的存在的情況下，判斷第二第三和點(diǎn)擊的是否一致，不一致判斷第一第二和點(diǎn)擊的項(xiàng)目是否一致，都不一致則成為第四位，一致則消除。

當(dāng)欄目數(shù)為5的情況下，且點(diǎn)擊項(xiàng)目左右都不一致，則游戲失敗(判斷程序如下)。

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）第一層完成

每次操作后都判斷一次棋盤數(shù)組是否都為0，如果都為0的話代表當(dāng)前層數(shù)被清空，進(jìn)入下一層。

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: '成功通過(guò)第二層'
            })
            Now_floor = 1
            this.Re_fisrt_floor()
          }

三、OpenHarmony程序編寫

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

Canvas

說(shuō)明： 該組件從API Version 8開(kāi)始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

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

（1）主要函數(shù)

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

進(jìn)行圖像繪制。

  • 參數(shù)

參數(shù)

類型

必填

默認(rèn)值

描述

image

??ImageBitmap???或??PixelMap??

是

null

圖片資源，請(qǐng)參考ImageBitmap或PixelMap。

sx

number

否

0

裁切源圖像時(shí)距離源圖像左上角的x坐標(biāo)值。

sy

number

否

0

裁切源圖像時(shí)距離源圖像左上角的y坐標(biāo)值。

sWidth

number

否

0

裁切源圖像時(shí)需要裁切的寬度。

sHeight

number

否

0

裁切源圖像時(shí)需要裁切的高度。

dx

number

是

0

繪制區(qū)域左上角在x軸的位置。

dy

number

是

0

繪制區(qū)域左上角在y 軸的位置。

dWidth

number

否

0

繪制區(qū)域的寬度。 當(dāng)繪制區(qū)域的寬度和裁剪圖像的寬度不一致時(shí)，將圖像寬度拉伸或壓縮為繪制區(qū)域的寬度。

dHeight

number

否

0

繪制區(qū)域的高度。 當(dāng)繪制區(qū)域的高度和裁剪圖像的高度不一致時(shí)，將圖像高度拉伸或壓縮為繪制區(qū)域的高度。

clearRect

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

刪除指定區(qū)域內(nèi)的繪制內(nèi)容。

  • 參數(shù)

參數(shù)

類型

必填

默認(rèn)值

描述

x

number

是

0

指定矩形上的左上角x坐標(biāo)。

y

number

是

0

指定矩形上的左上角y坐標(biāo)。

width

number

是

0

指定矩形的寬度。

height

number

是

0

指定矩形的高度。

fillRect

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

填充一個(gè)矩形。

  • 參數(shù)

參數(shù)

類型

必填

默認(rèn)值

說(shuō)明

x

number

是

0

指定矩形左上角點(diǎn)的x坐標(biāo)。

y

number

是

0

指定矩形左上角點(diǎn)的y坐標(biāo)。

width

number

是

0

指定矩形的寬度。

height

number

是

0

指定矩形的高度。

（2）游戲開(kāi)局渲染

導(dǎo)入背景圖片：

#沖刺創(chuàng)作新星# O了個(gè)H（OpenHarmony羊了個(gè)羊復(fù)刻學(xué)習(xí)）-開(kāi)源基礎(chǔ)軟件社區(qū)

@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）設(shè)置單元格

我的模擬器參數(shù)為：

#沖刺創(chuàng)作新星# O了個(gè)H（OpenHarmony羊了個(gè)羊復(fù)刻學(xué)習(xí)）-開(kāi)源基礎(chǔ)軟件社區(qū)


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

（4）開(kāi)局兩層擺放

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
    }
  }
}

由第二部分內(nèi)容確定邏輯，即可實(shí)現(xiàn)游戲初始的渲染部分。

（5）點(diǎn)擊判定

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函數(shù)，得到對(duì)應(yīng)的XY軸坐標(biāo)，再進(jìn)行分析得到6*6單元格的坐標(biāo)進(jìn)行判定。

事件

名稱

是否冒泡

功能描述

onTouch(callback: (event?: TouchEvent) => void)

是

觸摸動(dòng)作觸發(fā)該方法調(diào)用，event參數(shù)見(jiàn)??TouchEvent??介紹。

if(Key_Num>0 && Key_Num<38)     //判定按下是否為單元格區(qū)域
    {       
    }
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;
    }
  }
}

得到坐標(biāo)后需要判斷是否為單元格區(qū)域，如果超出該區(qū)域則不進(jìn)行響應(yīng)。

（6）第二層繪制

當(dāng)通過(guò)第一層時(shí)，因?yàn)樵诘谝粚雍偷诙又g有一個(gè)灰色圖層。需要進(jìn)行一次全局刷新，此時(shí)通過(guò)提前記錄的第一次生成的數(shù)據(jù)，進(jìn)行一次更新即可。

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）游戲成功

如果正確游戲且通過(guò)的話，會(huì)提示游戲成功(因?yàn)橛休^大的隨機(jī)性，不一定一定成功哦，下一期會(huì)教大家怎么使用背景音樂(lè)！)

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: '成功通過(guò)第一層'
            })
            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: '成功通過(guò)第二層'
            })
            Now_floor = 1
            this.Re_fisrt_floor()
          }
        }
      }

??想了解更多關(guān)于開(kāi)源的內(nèi)容，請(qǐng)?jiān)L問(wèn)：??

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

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

責(zé)任編輯：jianghua 來(lái)源： 51CTO開(kāi)源基礎(chǔ)軟件社區(qū)
游戲開(kāi)發(fā)鴻蒙
相關(guān)推薦

2022-10-10 14:57:09

NP游戲

2022-09-27 16:03:51

羊了個(gè)羊鴻蒙

2022-09-19 16:31:14

游戲益智游戲機(jī)

2022-09-26 08:30:41

黑客網(wǎng)絡(luò)攻擊隱私

2022-09-20 16:06:57

Python小程序微信

2022-09-20 15:24:09

程序員項(xiàng)目

2022-03-16 09:49:54

機(jī)器人AI技術(shù)

2015-08-12 16:32:34

華為／物聯(lián)網(wǎng)

2022-09-26 07:25:25

Java 19C++二維碼

2010-02-03 13:25:34

云計(jì)算

2023-05-22 09:28:30

模型AI

2022-10-31 06:00:00

華為亞馬遜Chrome

2013-07-29 15:58:28

大數(shù)據(jù)數(shù)據(jù)分析

2023-05-15 09:39:37

2015-04-15 10:29:38

Linux 4.0

2023-06-20 07:46:27

數(shù)據(jù)治理大數(shù)據(jù)建設(shè)

2015-07-30 09:16:03

羊聯(lián)網(wǎng)億利華為

2024-05-28 01:00:00

CISO網(wǎng)絡(luò)安全
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)