0
点赞
收藏
分享

微信扫一扫

HarmonyOS3.0真机下丝滑2048游戏

艾米吖 2022-08-02 阅读 49
HarmonyOS3.0ArkUI2048游戏HarmonyOS编程语言

@toc

前言

之前张荣超老师在直播课里讲OpenHarmony 3.1 Release 版本的基础能力、分布式能力、应用程序框架能力时，用开发板讲解了他的经典游戏2048，此帖子实例也是跟着张老师直播回放撸出来的，加了点横屏时，改变布局，关于2048游戏逻辑，小伙伴们可以到这里学习
OpenHarmony 3.1分布式应用开发—分布式应用案例

真机

开发全过程视频

简介

  1. 界面用全屏显示，这里要到config.json文件module节点下添加以下配置 
    "metaData": {
  "customizeData": [
    {
      "name": "hwc-theme",
      "value": "androidhwext:style/Theme.Emui.Light.NoTitleBar.Fullscreen",
      "extra": ""
    }
  ]
},
  2. 引用了以下API 
    // 媒体查询, 用于判断手机是否横屏
import mediaquery from '@ohos.mediaquery'
// 用于存储记录最高分
import dataStorage from '@ohos.data.storage';
// 用于获取上下文
import featureAbility from '@ohos.ability.featureAbility'

  3. 游戏开发创建运行过程视频，B站审核通过后，回复到下面回帖内容。

  4. 这里是主要代码，感兴趣可以参考一下： 
    
import mediaquery from '@ohos.mediaquery'
import dataStorage from '@ohos.data.storage';
import featureAbility from '@ohos.ability.featureAbility'

let portraitFunc = null
let store

const colors = {
'0': '#CDC1B4',
'2': '#EEE4DA',
'4': '#ECE0C6',
'8': '#F2B179',
'16': '#F59563',
'32': '#F67C5F',
'64': '#F65E3B',
'128': '#EDCF72',
'256': '#EDCC61',
'1024': '#83AF9B',
'2048': '#0099CC',
'2or4': '#645B52',
'others': '#FFFFFF'
}

class MyStack<T> {
private items: Array<T> = []

public push(item: T):void {
this.items.push(item)
}

public pop(): T {
return this.items.pop()
}

public peek(): T {
return this.items[this.items.length - 1]
}

public isEmpty(): boolean {
return this.items.length ==0
}

public size(): number {
return this.items.length
}

public clear(): void {
this.items = []
}
}

@Entry@Component
br/>@Component
// 当前分数
@State currentScore: number = 0
// 最高分数
@State highestScore: number = 0
// 当前用户操作二维数组
@State currentArrays: number[][] = [
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]
]
// 对方用户操作二维数组
@State enemyArrays: number[][] = [
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0],
[0, 0, 0, 0]
]
// 循环下标使用
private arr: number[] = [0, 1, 2, 3]
@State isLandscape: boolean = false;
// 媒体查询横屏
listener = mediaquery.matchMediaSync('(orientation: landscape)')

// 当前数组栈
currentArrayStack: MyStack<number[][]> = new MyStack<number[][]>();
// 当前分栈
currentScoreStack: MyStack<number> = new MyStack<number>();

// 屏幕旋转匹配函数
onPortrait(mediaQueryResult) {
if (mediaQueryResult.matches) {
this.isLandscape = true;
} else {
this.isLandscape = false;
}
}

/**

  • 初始游戏
    */
    init() {
    // 当前分数初始化为0
    this.currentScore = 0
    // 最高分数
    let context = featureAbility.getContext()
    context.getOrCreateLocalDir().then((path) => {
    store = dataStorage.getStorageSync(path + '/mystore')
    this.highestScore = store.getSync('highestScore', 0)
    })
    // 当前用户操作二维数组初始化为0
    this.currentArrays = [
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0]
    ]
    // 初始化用户操作二维数组
    this.addTwoOrFourToArrays()
    this.addTwoOrFourToArrays()

    // // 对方用户操作二维数组初始化为0
    // this.enemyArrays = [
    // [0, 0, 0, 0],
    // [0, 0, 0, 0],
    // [0, 0, 0, 0],
    // [0, 0, 0, 0]
    // ]

    // // 初始化对方操作二维数组
    // this.addTwoOrFourToArrays()
    }

    /**

  • 随机生成2或4到空格子里
    /
    addTwoOrFourToArrays() {
    // 把为0的空格子找出来，保存在array数组里
    let array = []
    for (let row = 0; row < 4; row++) {
    for (let column = 0; column < 4; column++) {
    if (this.currentArrays[row][column] == 0) {
    array.push([row, column])
    }
    }
    }
    // 随机找出一个为0空格子
    let randomIndex = Math.floor(Math.random()     array.length)
    // 找出空格子的行坐标
    let row = array[randomIndex][0]
    // 找出空格子的列坐标
    let column = array[randomIndex][1]
    // 随机出现2或4的机率
    if (Math.random() < 0.8) {
    this.currentArrays[row][column] = 2;
    } else {
    this.currentArrays[row][column] = 4;
    }
    }

    /**

  • Grid滑动函数
    */
    swipeGrid(direction) {
    // 滑动前当前分数赋值给临时变量
    let tempCurrentScore = this.currentScore
    // 滑动后的新数组
    let newArrays = this.changeCurreyArrays(direction)

    if (newArrays.toString() != this.currentArrays.toString()) {
    // 入栈滑动前数组
    this.currentArrayStack.push(this.currentArrays)
    // 入栈滑动后-滑动前当前分
    this.currentScoreStack.push(this.currentScore - tempCurrentScore)
    // 更新当前二维数组数字
    this.currentArrays = newArrays
    // 添加2或4到空格子里
    this.addTwoOrFourToArrays()
    // 保存最高分
    if (this.currentScore > this.highestScore) {
    store.putSync('highestScore', this.currentScore)
    }
    }
    }

    changeCurreyArrays(direction) {
    let newArrays = [
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0],
    [0, 0, 0, 0]
    ]

    // 处理左滑与右滑
    if (direction == 'left' || direction == 'right') {
    let step = 1 // 默认从左到右，为正数
    if (direction == 'right') {
    // 从右到左，为负数，反方向
    step = -1
    }
    // 一行一行数据处理
    for (var row = 0; row < 4; row++) {
    let array = [] // 临时存储新数据
    let column = 0 // 默认从左到右，下标从0开始
    if (direction == 'right') {
    column = 3 // 从右到左，下标从最大开始
    }
    // 一列一列数据处理
    for (let i = 0; i < 4; i++) {
    if (this.currentArrays[row][column] != 0) {
    // 不为0的数字保存到临时数组里
    array.push(this.currentArrays[row][column])
    }
    // 更新下一列下标
    column += step
    }
    // 合并数据
    for (let i = 0; i < array.length - 1; i++) {
    // 如果相邻两个相同，合并
    if (array[i] == array[i+1]) {
    array[i] += array[i+1] // 两个数相加
    this.currentScore += array[i] // 计算当前得分
    array[i+1] = 0 // 合并后的另一个数据，设置为0
    i++ // 下一个下标数据
    }
    }
    // 重置列下标
    column = 0 // 默认从左到右，下标从0开始
    if (direction == 'right') {
    column = 3 // 从右到左，下标从最大开始
    }

    // 遍历临时新数据
for (const elem of array) {
  if (elem != 0) {
    // 赋值给新数组
    newArrays[row][column] = elem;
    // 更新列下标是从左到右，还是从右到左
    column += step
  }

}

    }
    } else if (direction == 'up' || direction == 'down') {
    let step = 1 // 默认从下到上，为正数
    if (direction == 'down') {
    // 从上到下，为负数，反方向
    step = -1
    }
    // 一列一列数据处理
    for (let column = 0; column < 4; column++) {
    // 临时数组
    let array = []
    // 向上滑动，下标从0开始
    let row = 0
    if (direction == 'down') {
    // 向下滑动，下标从3开始
    row = 3
    }

    for (let i = 0; i < 4; i++) {
  if (this.currentArrays[row][column] != 0) {
    // 保存不为0的数据
    array.push(this.currentArrays[row][column])
  }
  // 遍历下一行
  row += step
}

// 合并数据
for (let i = 0; i < array.length - 1; i++) {
  if (array[i] == array[i+1]) {
    array[i] += array[i+1]
    this.currentScore += array[i] // 计算当前得分
    array[i+1] = 0
    i++
  }
}

// 更新临时数组数据到新数组
row = 0
if (direction == 'down') {
  // 向下滑动，下标从3开始
  row = 3
}
for (const elem of array) {
  if (elem != 0) {
    newArrays[row][column] = elem
    row += step
  }
}

    }
    }

    return newArrays
    }

    aboutToAppear() {
    // 绑定匹配函数
    portraitFunc = this.onPortrait.bind(this)
    // 监听屏幕旋转变化
    this.listener.on('change', portraitFunc)

    // 初始化界面数字
    this.init()
    }

    build() {
    // 如果是横屏用行布局，否则用列布局
    Flex({
    direction: this.isLandscape ? FlexDirection.Row : FlexDirection.Column,
    justifyContent: FlexAlign.Start
    }) {
    Column({ space: 10 }) {
    /**

    • 统计分数标题框
      */
      Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceEvenly }) {
      Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) {
      Text('2048')
      .width('100%')
      .fontColor(Color.White)
      .fontSize(22)
      .textAlign(TextAlign.Center)
      Text('4X4')
      .width('100%')
      .fontColor(Color.White)
      .fontSize(20)
      .textAlign(TextAlign.Center)
      }
      .width(100)
      .height('100%')
      .backgroundColor('#BBADA0')
      .borderRadius(10)

      Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) {
      Text('当前分')
      .width('100%')
      .fontColor(Color.White)
      .fontSize(22)
      .textAlign(TextAlign.Center)
      Text(this.currentScore.toString())
      .width('100%')
      .fontColor(Color.White)
      .fontSize(20)
      .textAlign(TextAlign.Center)
      }
      .width(100)
      .height('100%')
      .backgroundColor('#BBADA0')
      .borderRadius(10)

      Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center }) {
      Text('最高分')
      .width('100%')
      .fontColor(Color.White)
      .fontSize(22)
      .textAlign(TextAlign.Center)
      Text(this.highestScore.toString())
      .width('100%')
      .fontColor(Color.White)
      .fontSize(20)
      .textAlign(TextAlign.Center)
      }
      .width(100)
      .height('100%')
      .backgroundColor('#BBADA0')
      .borderRadius(10)
      }
      .width('100%').height(60).margin({ top: 10 })

      /**

    • 当前用户操作二维数组
      */
      Grid() {
      ForEach(this.arr, (row: number) => {
      ForEach(this.arr, (column: number) => {
      GridItem() {
      Text(this.currentArrays[row][column] == 0 ? '' : this.currentArrays[row][column].toString())
      .fontSize(22)
      .width('100%')
      .height('100%')
      .textAlign(TextAlign.Center)
      .backgroundColor(colors[this.currentArrays[row][column].toString()])
      .fontColor(this.currentArrays[row][column] <= 4 ? colors['2or4'] : colors['others'])
      }
      }, column => column.toString())
      }, row => row.toString())
      }
      .rowsTemplate('1fr 1fr 1fr 1fr')
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsGap(3)
      .columnsGap(3)
      .width(280)
      .height(280)
      .backgroundColor('#BBADA0')
      .gesture(
      GestureGroup(GestureMode.Parallel,
      PanGesture({ direction: PanDirection.Left })
      .onActionEnd((event: GestureEvent) => {
      console.info('xx-left-offsetX: ' +event.offsetX + ', offsetY: ' + event.offsetY)
      this.swipeGrid('left')
      }),
      PanGesture({ direction: PanDirection.Right })
      .onActionEnd((event: GestureEvent) => {
      console.info('xx-right-offsetX: ' +event.offsetX + ', offsetY: ' + event.offsetY)
      this.swipeGrid('right')
      }),
      PanGesture({ direction: PanDirection.Up })
      .onActionEnd((event: GestureEvent) => {
      console.info('xx-up-offsetX: ' +event.offsetX + ', offsetY: ' + event.offsetY)
      this.swipeGrid('up')
      }),
      PanGesture({ direction: PanDirection.Down })
      .onActionEnd((event: GestureEvent) => {
      console.info('xx-down-offsetX: ' +event.offsetX + ', offsetY: ' + event.offsetY)
      this.swipeGrid('down')
      })
      )
      )
      }
      .width(this.isLandscape ? '50%' : '100%')

      Column({ space: 10 }) {
      /**

    • 操作按钮
      */
      Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.SpaceEvenly }) {
      Button('重新开始', { type: ButtonType.Normal })
      .width(120)
      .height(60)
      .fontSize(20)
      .align(Alignment.Center)
      .backgroundColor('#AD9D8F')
      .fontColor('#FFFFFF')
      .borderRadius(10)
      .onClick((event: ClickEvent) => {
      this.init()
      this.currentArrayStack.clear()
      this.currentScoreStack.clear()
      })
      Button('悔步', { type: ButtonType.Normal })
      .width(90)
      .height(60)
      .fontSize(20)
      .align(Alignment.Center)
      .backgroundColor('#AD9D8F')
      .fontColor('#FFFFFF')
      .borderRadius(10)
      .onClick((event: ClickEvent) => {
      if (this.currentArrayStack.size() > 0) {
      this.currentArrays = this.currentArrayStack.pop()
      this.currentScore -= this.currentScoreStack.pop()
      }
      })
      Button('设置', { type: ButtonType.Normal })
      .width(90)
      .height(60)
      .fontSize(20)
      .align(Alignment.Center)
      .backgroundColor('#AD9D8F')
      .fontColor('#FFFFFF')
      .borderRadius(10)
      }
      .width('100%').margin({ top: 10 })

      /**

    • 对方用户操作二维数组
      */
      Grid() {
      ForEach(this.arr, (row: number) => {
      ForEach(this.arr, (column: number) => {
      GridItem() {
      Text(this.enemyArrays[row][column] == 0 ? '' : this.enemyArrays[row][column].toString())
      .fontSize(22)
      .width('100%')
      .height('100%')
      .textAlign(TextAlign.Center)
      .backgroundColor(colors[this.enemyArrays[row][column].toString()])
      .fontColor(this.enemyArrays[row][column] <= 4 ? colors['2or4'] : colors['others'])
      }
      }, column => column.toString())
      }, row => row.toString())
      }
      .rowsTemplate('1fr 1fr 1fr 1fr')
      .columnsTemplate('1fr 1fr 1fr 1fr')
      .rowsGap(3)
      .columnsGap(3)
      .width(240)
      .height(240)
      .backgroundColor('#BBADA0')
      }
      .width(this.isLandscape ? '50%' : '100%')

    }
    .width('100%')
    .height('100%')
    }
    }

总结

终于可以不用远程模拟器开发了，真机开发就是爽，eTS写代码更爽，目前只有手机升级到了3.0，到时平板审核通过了，就可以尝试分布式流转了。

想了解更多关于开源的内容，请访问：

51CTO 开源基础软件社区

https://ost.51cto.com/#bkwz

举报

相关推荐

HarmonyOS3.0点赞事件

harmonyos华为

HarmonyOS Next 实现 2048 小游戏

HarmonyOS NextArkUIArkTsAndroid移动开发指尖人生

HarmonyOS3.0尝鲜之关键Js Api--动态权限申请的支持

HarmonyOS3.0Js ApiHarmonyOS编程语言

HarmonyOS远程真机调试方法

ue4c++

安卓真机无root环境下的单机游戏修改-IL2CPP

开源spring boot能源java后端springjava-ee

创建并启动华为HarmonyOS本地与远程模拟器及远程真机

hivehadoop数据仓库

华为OD机试真题 Java 实现【报数游戏】【2022Q4 100分】

c++算法

虚拟机系列：（VMware Workstation Pro）Centos7下搭建Android开发环境及Android真机调试

android

华为OD机试真题-亲子游戏-2024年OD统一考试（C卷D卷 ）

音视频计算机视觉图像处理深度学习人工智能美颜SDK直播美颜SDK

Sonic 开源移动端云真机测试平台 - windows系统下的sonic快速部署演示

dockersonic移动端自动化mysql数据库
0 条评论