#深入淺出學(xué)習(xí)eTs#（八）“猜大小”小游戲

本項(xiàng)目Gitee倉(cāng)地址：[深入淺出eTs學(xué)習(xí): 帶大家深入淺出學(xué)習(xí)eTs (gitee.com)](

上一章節(jié)提到的模擬器存在的BUG問(wèn)題，目前沒(méi)有辦法直接改善，本來(lái)打算直接使用鴻蒙遠(yuǎn)程設(shè)備來(lái)實(shí)現(xiàn)，但是發(fā)現(xiàn)支持API8的設(shè)備都被搶光了（包括模擬器），而本地模擬器僅僅都支持API6，也是不能使用的，在之后的內(nèi)容中咱們還是依托于預(yù)覽器來(lái)實(shí)現(xiàn)，如果實(shí)現(xiàn)不了的或者有特定需求的，我會(huì)使用DAYU200真機(jī)來(lái)實(shí)現(xiàn)

一、基本需求

本章節(jié)給大家?guī)?lái)一個(gè)最基礎(chǔ)的一個(gè)賭博小游戲，即通過(guò)猜大猜小，然后使用隨機(jī)數(shù)來(lái)進(jìn)行判定。

二、控件介紹

本章節(jié)中使用到的新控件為進(jìn)度條和圖片（代碼），用來(lái)展示開(kāi)獎(jiǎng)的這個(gè)過(guò)程

Progress：官方文檔

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

進(jìn)度條，用于顯示內(nèi)容加載或操作處理進(jìn)度。

interface ProgressInterface {
  (options: ProgressOptions): ProgressAttribute;
}

declare interface ProgressOptions {
  value: number; // 必須要指定初始進(jìn)度
  total?: number;
  style?: ProgressStyle
  type?: ProgressType
}

復(fù)制

參數(shù)

參數(shù)名	參數(shù)類型	必填	默認(rèn)值	參數(shù)描述
value	number	是	-	指定當(dāng)前進(jìn)度值。
total	number	否	100	指定進(jìn)度總長(zhǎng)。
type	ProgressType	否	ProgressType.Linear	指定進(jìn)度條樣式。
主要有以上幾種樣式，我們?cè)谶@里使用最基礎(chǔ)的長(zhǎng)條形來(lái)進(jìn)行使用，

Image

圖片組件，支持本地圖片和網(wǎng)絡(luò)圖片的渲染展示。

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

權(quán)限說(shuō)明

使用網(wǎng)絡(luò)圖片時(shí)，需要在config.json（FA模型）或者module.json5（Stage模型）對(duì)應(yīng)的"abilities"中添加網(wǎng)絡(luò)使用權(quán)限ohos.permission.INTERNET。

"abilities": [
  {
    ...
    "permissions": ["ohos.permission.INTERNET"],
    ...
  }
] 

復(fù)制

interface ImageInterface {
  (src: string | PixelMap | Resource): ImageAttribute;
}
src：設(shè)置要加載的圖片資源，支持從本地、網(wǎng)絡(luò)和內(nèi)存中加載圖片，簡(jiǎn)單樣例如下：
    Image($r("app.media.test"))
  .width(180)
  .height(80)

復(fù)制

三、UI設(shè)計(jì)

首先將圖片放入目錄當(dāng)中

此時(shí)在我們的Image控件當(dāng)中就可以使用媒體的路徑地址：$r(“app.media.2”)

        Image($r("app.media.2"))
          .width(300)
          .height(300)

復(fù)制

此時(shí)可以在右側(cè)預(yù)覽器中顯示出來(lái)我們的圖片

在圖片下面需要加入兩個(gè)按鈕，分別是賭大和賭小

 Row() {
          Button('賭大')
            .width(150)
            .onClick(() => {

            })
          Button('賭小')
            .width(150)
            .onClick(() => {
            })
        }

復(fù)制

因?yàn)槭切枰脚帕?，這里使用Row容器組件，寫(xiě)入點(diǎn)擊事件備用

在按鈕下邊則加入我們的進(jìn)度條控件

         @State Set_Num: number = 0;
Progress({
          value: this.Set_Num,                   // 設(shè)置當(dāng)前進(jìn)度
          total: 100,                  // 設(shè)置進(jìn)度總量
          type: ProgressType.Linear    // 設(shè)置進(jìn)度條的樣式為條形樣式
        })
          .size({width: '100%', height: 40})

復(fù)制

設(shè)置總寬度為100，當(dāng)前寬度為0（賦值給了變量）

在最下面放置一個(gè)標(biāo)簽，用來(lái)提示當(dāng)前系統(tǒng)的運(yùn)行狀態(tài)

四、功能設(shè)計(jì)

首先呢，需要讓我們的進(jìn)度條動(dòng)起來(lái)，因?yàn)闆](méi)有直接的sleep函數(shù)，所以需要我們構(gòu)建一個(gè)，這里引入了同步和異步的概念，怕大家理解不了就不深入展開(kāi)了，應(yīng)用方式如下：

function sleep(ms){
  return new Promise((resolve)=>setTimeout(resolve,ms));
}

async Get_Result()
  {
    this.Set_Num = 0
    for(var i = 0;i<=100;i++)
    {
      var temple = await sleep(10);
      this.Set_Num = i
    }
}

復(fù)制

上面的Promise 和 下面的async為對(duì)應(yīng)出現(xiàn)，因?yàn)槲覀儼堰M(jìn)度條的當(dāng)前位置賦值給了 this.Set_Num，那么上面的部分意思就是在for循環(huán)中增加進(jìn)度條的當(dāng)前位置，間隔為10ms，一共100次，則對(duì)應(yīng)進(jìn)度條1s走完，實(shí)現(xiàn)一個(gè)動(dòng)畫(huà)效果

在完成動(dòng)畫(huà)效果后，我們需要實(shí)現(xiàn)“賭博”功能，即實(shí)現(xiàn)對(duì)賭大賭小的分析，這里使用隨機(jī)數(shù)生成器

this.The_Result = Math.ceil(Math.random() * 100 + 1)

復(fù)制

將結(jié)果賦值給this.The_Result(0-100大小的數(shù))

此時(shí)我們判斷按下的是賭大還是賭小，分別進(jìn)行分析

async Get_Result()
  {
    this.Set_Num = 0
    for(var i = 0;i<=100;i++)
    {
      var temple = await sleep(10);
      this.Set_Num = i
    }
    this.The_Result = Math.ceil(Math.random() * 100 + 1)
    if(this.Flag){
      if(this.The_Result<50)
      {
        this.message = '你輸了！！' + this.The_Result.toString()
      }else
      {
        this.message = '你贏了?。?+ this.The_Result.toString()
      }

    }else
    {
      if(this.The_Result>=50)
      {
        this.message = '你輸了?。?+ this.The_Result.toString()
      }else
      {
        this.message = '你贏了??！'+ this.The_Result.toString()
      }

    }
  }

復(fù)制

補(bǔ)充完整按鍵部分的程序

        Row() {
          Button('賭大')
            .width(150)
            .onClick(() => {
              this.Flag = 1
              this.Get_Result()

            })
          Button('賭小')
            .width(150)
            .onClick(() => {
              this.Flag = 0
              this.Get_Result()
            })
        }

復(fù)制

此時(shí)便能實(shí)現(xiàn)完整的一次運(yùn)行，在運(yùn)行后會(huì)將結(jié)果以及隨機(jī)數(shù)的大小顯示在標(biāo)簽上

五、功能演示

如上圖，實(shí)現(xiàn)了預(yù)計(jì)功能