TS选择结构2

最新推荐文章于 2024-09-13 10:46:15 发布

MX0625

最新推荐文章于 2024-09-13 10:46:15 发布

阅读量422

点赞数 5

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/MX0625/article/details/140853241

版权

TS选择结构2

1.switch 语法用法

switch 只能写等值判断区间范围无法使用

let xq: number = 120;
switch (xq) {
    case 100:
    case 110:
    case 120:
        console.log("在井盖上相亲");
        break;
    case 130:
    case 140:
        console.log("在公安局相亲");
        break;
    case 180:
    case 250:
        console.log("在猪圈");
        break;
    default:
        console.log("我家");
}

2.剪刀石头布

import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct GameTest {
  @State message: string = '剪刀石头布';
  @State userCz: string = ''; //用户出招
  @State comCz: string = ''; //电脑出招
  @State res: string = ''; //结果
  @State uY:number=0//用户赢的次数
  @State cY:number=0//电脑赢的次数
  @State pY:number=0//平局的次数
  @State isJ:boolean=false//选中状态
  @State isS:boolean=false//选中状态
  @State isB:boolean=false//选中状态
  build() {
    Column({ space: 30 }) {
      Text(this.message).fontSize(30).fontColor(Color.Red)
      //用户出招
      Row() {
        Radio({ value: '剪刀', group: 'gm' })
          .onChange((isChecked: boolean) => {
            promptAction.showToast({ message: `剪刀:${isChecked}` })
            this.userCz = '剪刀'
            this.isJ=isChecked
          })
          .checked(this.isJ)
        Text('剪刀').fontSize(30)
        Radio({ value: '石头', group: 'gm' })
          .onChange((isChecked: boolean) => {
            promptAction.showToast({ message: `石头:${isChecked}` })
            this.userCz = '石头'
            this.isS=isChecked
          })
          .checked(this.isS)
        Text('石头').fontSize(30)
        Radio({ value: '布', group: 'gm' })
          .onChange((isChecked: boolean) => {
            promptAction.showToast({ message: `布:${isChecked}` })
            this.userCz = '布'
            this.isB=isChecked
          })
          .checked(this.isB)
        Text('布').fontSize(30)
      }
      .width('100%')
      .height(50)
      .justifyContent(FlexAlign.SpaceBetween)

      Text(`电脑:${this.comCz}`).width('100%').backgroundColor(Color.Blue).fontSize(30)
      Text(`胜利者:${this.res}`).fontSize(30).fontColor(Color.Red)
      Row() {
        Button("重新开始")
          .onClick(()=>{
          //   清零  重新初始化
            this.userCz=''
            this.comCz=''
            this.res=''
            this.uY=0
            this.cY=0
            this.pY=0
            // 初始化单选的选项
            this.isJ=false
            this.isS=false
            this.isB=false
          })
        Button("电脑出招")
          .onClick(() => {
            // 用户出招了 才进行下一步
            if (this.userCz !== '') {
              // Math.random() 会产生0-1之间的一个小数
              // 0 剪刀 1石头 2布
              let num: number = parseInt(`${Math.random() * 3}`)
              switch (num) {
                case 0:
                  this.comCz = '剪刀'
                  break;
                case 1:
                  this.comCz = '石头'
                  break;
                case 2:
                  this.comCz = '布'
                  break;
              }
              //   1.电脑赢
              if ((this.comCz == '剪刀' && this.userCz == '布') || (this.comCz == '石头' && this.userCz == '剪刀') || (this.comCz == '布' && this.userCz == '石头')) {
                this.res = '电脑赢'
                this.cY++;
              } else if ((this.userCz == '石头' && this.comCz == '剪刀') || (this.userCz == '布' && this.comCz == '石头') || (this.userCz == '剪刀' && this.comCz == '布')) {
                this.res = '用户赢'
                this.uY++;
              } else {
                this.res = '平局'
                this.pY++;
              }
              //   2.用户赢
              //   3.平局
            } else {
              promptAction.showToast({ message: '请用户先出招' })
            }
            // promptAction.showToast({message:`${num}`})
          })
      }.width('80%').justifyContent(FlexAlign.SpaceAround)
      Text(`赢:${this.uY}`).fontSize(30).fontColor(Color.Orange)
      Text(`输:${this.cY}`).fontSize(30).fontColor(Color.Orange)
      Text(`平:${this.pY}`).fontSize(30).fontColor(Color.Orange)
      Text(`总:${this.pY+this.cY+this.uY}`).fontSize(30).fontColor(Color.Orange)
      Text(`胜率:${this.uY}/${this.pY+this.cY+this.uY}`).fontSize(30).fontColor(Color.Orange)
    }
    .height('100%')
    .width('100%')
  }
}

效果图

在这里插入图片描述

2.1 页面

2.2 变量

 @State message: string = '剪刀石头布';
  @State userCz: string = ''; //用户出招
  @State comCz: string = ''; //电脑出招
  @State res: string = ''; //结果
  @State uY:number=0//用户赢的次数
  @State cY:number=0//电脑赢的次数
  @State pY:number=0//平局的次数
  @State isJ:boolean=false//选中状态
  @State isS:boolean=false//选中状态
  @State isB:boolean=false//选中状态

2.3 处理用户出招

Row() {
        Radio({ value: '剪刀', group: 'gm' })
          .onChange((isChecked: boolean) => {
            promptAction.showToast({ message: `剪刀:${isChecked}` })
            this.userCz = '剪刀'
            this.isJ=isChecked
          })
          .checked(this.isJ)
        Text('剪刀').fontSize(30)
        Radio({ value: '石头', group: 'gm' })
          .onChange((isChecked: boolean) => {
            promptAction.showToast({ message: `石头:${isChecked}` })
            this.userCz = '石头'
            this.isS=isChecked
          })
          .checked(this.isS)
        Text('石头').fontSize(30)
        Radio({ value: '布', group: 'gm' })
          .onChange((isChecked: boolean) => {
            promptAction.showToast({ message: `布:${isChecked}` })
            this.userCz = '布'
            this.isB=isChecked
          })
          .checked(this.isB)
        Text('布').fontSize(30)
      }
      .width('100%')
      .height(50)
      .justifyContent(FlexAlign.SpaceBetween)

2.4 处理电脑出招

Button("电脑出招")
  .onClick(() => {
    // 用户出招了 才进行下一步
    if (this.userCz !== '') {
      // Math.random() 会产生0-1之间的一个小数
      // 0 剪刀 1石头 2布
      let num: number = parseInt(`${Math.random() * 3}`)
      switch (num) {
        case 0:
          this.comCz = '剪刀'
          break;
        case 1:
          this.comCz = '石头'
          break;
        case 2:
          this.comCz = '布'
          break;
      }
      //   1.电脑赢
      if ((this.comCz == '剪刀' && this.userCz == '布') || (this.comCz == '石头' && this.userCz == '剪刀') || (this.comCz == '布' && this.userCz == '石头')) {
        this.res = '电脑赢'
        this.cY++;
      } else if ((this.userCz == '石头' && this.comCz == '剪刀') || (this.userCz == '布' && this.comCz == '石头') || (this.userCz == '剪刀' && this.comCz == '布')) {
        this.res = '用户赢'
        this.uY++;
      } else {
        this.res = '平局'
        this.pY++;
      }
      //   2.用户赢
      //   3.平局
    } else {
      promptAction.showToast({ message: '请用户先出招' })
    }
    // promptAction.showToast({message:`${num}`})
  })

2.5 数据统计

Text(`赢:${this.uY}`).fontSize(30).fontColor(Color.Orange)
Text(`输:${this.cY}`).fontSize(30).fontColor(Color.Orange)
Text(`平:${this.pY}`).fontSize(30).fontColor(Color.Orange)
Text(`总:${this.pY+this.cY+this.uY}`).fontSize(30).fontColor(Color.Orange)
Text(`胜率:${this.uY}/${this.pY+this.cY+this.uY}`).fontSize(30).fontColor(Color.Orange)

2.6 重新开始

Button("重新开始")
  .onClick(()=>{
  //   清零  重新初始化
    this.userCz=''
    this.comCz=''
    this.res=''
    this.uY=0
    this.cY=0
    this.pY=0
    // 初始化单选的选项
    this.isJ=false
    this.isS=false
    this.isB=false
  })
r.Orange)

2.6 重新开始

Button("重新开始")
  .onClick(()=>{
  //   清零  重新初始化
    this.userCz=''
    this.comCz=''
    this.res=''
    this.uY=0
    this.cY=0
    this.pY=0
    // 初始化单选的选项
    this.isJ=false
    this.isS=false
    this.isB=false
  })