OpenHarmony应用开发ets猜数字游戏

工具：DevEco3.0，SDK9

文章目录

• 前言
• 一、pandas是什么？
• 二、使用步骤
  • 1.引入库
  • 2.读入数据
• 总结

---

前言

制作一个简易猜数字游戏

---

一、采用Column为根布局，Row包裹内容

二、编写界面

1.头部猜数字游戏文字

代码如下（示例）：

//头部文字
Row(){
        Text('猜数字游戏')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .fontColor(Color.Orange)
          .textAlign(TextAlign.Center)
          .width('100%')
}

2.中间内容主体区

代码如下（示例）：

//中间内容区域
Column({space:20}) {
        Row() {
          TextInput({ placeholder: '请输入猜测的数字'})
            .width('60%')
            .enterKeyType(EnterKeyType.Done)
            .maxLength(3)
            .type(InputType.Number)
            .onChange((value) => {
              // @ts-ignore
              this.values = value
            })
          Button('确认')
            .width(80)
            .margin({ left: 20 })
            .onClick(() => {
              this.guess()
            })
        }
        Row() {
          Text(this.message)
            .fontSize(19)
        }
        Row() {
          Text(this.info)
            .fontSize(20)
            .fontColor(Color.Red)
            .fontWeight(FontWeight.Bold)
        }
}

3.底部游戏规则区

 代码如下（示例）：

//底部游戏规则区
 Row(){
        Text('游戏规则：'+'\n'+'1.输入在区间的一个数字' + '\n' +
        '2.若直接猜中了正确答案，则提示胜利'+'\n'+'' +
        '3.若没有猜中，则会提示你输入的结果与正确答案相比是大了还是小了'+'\n'+
        '4.同时会通过你输入的值给定一个正确的区间供你参考')
          .fontSize(18)
          .width('98%')
          .border({width:2,color:'#ff5dd7d7'})
          .borderRadius(10)
          .padding(10)
}

---

总结

完整代码如下

//定义全局样式，可以给所有需要这样的样式的组件提供
@Styles function rowStyle(){
  .width('100%')
  .margin({top:10})
}
@Entry
@Component
struct Index {
    @State maxNumber:number = 100//定义区间最大值
    @State minNumber:number = 0//定义区间最小值
    @State message:string = '游戏已经开始，请输入[0-100]之间的数'//游戏信息
    @State answer:number=-1//正确答案
    @State values:number=-1//用户输入的值
    @State info:string = ''//区间信息

  aboutToAppear(){
    this.answer = Math.floor(Math.random()*101)//随机数初始化正确答案
    this.info = '['+this.minNumber+','+this.maxNumber+']'//将区间信息赋值为默认值
    console.log(this.answer.toString())
  }

  //创建猜测函数，当用户点击确认的时候执行该函数
  guess(){
    //如果用户输入的值比最小值或者最大值或者没有输入值的情况进行判断
    if (this.values < this.minNumber || this.values > this.maxNumber || this.values == -1) {
      return
    }
    //用户猜对的结果，进行逻辑判断
    if (this.values == this.answer) {
      this.message = '游戏胜利'
      this.info = '恭喜你，猜对了'
    }
    if (this.values > this.answer) {//用户猜大时进行判断
      this.message = '猜大了'
      this.maxNumber = this.values
      this.info = '[' + this.minNumber + ',' + this.maxNumber + ']'
    } else if (this.values < this.answer) {//用户猜小时进行判断
      this.message = '猜小了'
      this.minNumber = this.values
      this.info = '[' + this.minNumber + ',' + this.maxNumber + ']'
    }
  }

  build() {
    Column({space:10}){
      Row(){//头部文字
        Text('猜数字游戏')
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .fontColor(Color.Orange)
          .textAlign(TextAlign.Center)
          .width('100%')
      }
      .rowStyle()
      Column({space:20}) {//中间内容区域
        Row() {
          TextInput({ placeholder: '请输入猜测的数字'})
            .width('60%')
            .enterKeyType(EnterKeyType.Done)
            .maxLength(3)
            .type(InputType.Number)
            .onChange((value) => {
              // @ts-ignore
              this.values = value
            })
          Button('确认')
            .width(80)
            .margin({ left: 20 })
            .onClick(() => {
              this.guess()
            })
        }
        Row() {
          Text(this.message)
            .fontSize(19)
        }
        Row() {
          Text(this.info)
            .fontSize(20)
            .fontColor(Color.Red)
            .fontWeight(FontWeight.Bold)
        }
      }
      Row(){//底部游戏规则区
        Text('游戏规则：'+'\n'+'1.输入在区间的一个数字' + '\n' +
        '2.若直接猜中了正确答案，则提示胜利'+'\n'+'' +
        '3.若没有猜中，则会提示你输入的结果与正确答案相比是大了还是小了'+'\n'+
        '4.同时会通过你输入的值给定一个正确的区间供你参考')
          .fontSize(18)
          .width('98%')
          .border({width:2,color:'#ff5dd7d7'})
          .borderRadius(10)
          .padding(10)
      }
      .rowStyle()
    }
    .width('100%')
    .height('100%')
    .padding(10)
    .justifyContent(FlexAlign.SpaceBetween)
  }
}