【鸿蒙实战开发】鸿蒙原生小游戏（放置NPC）

HarmonyOS_001

于 2024-07-14 19:33:55 发布

阅读量294

点赞数 16

分类专栏：鸿蒙前端安卓文章标签： harmonyos android 华为鸿蒙前端

本文链接：https://blog.csdn.net/HarmonyOS_001/article/details/140421372

版权

鸿蒙同时被 3 个专栏收录

52 篇文章 0 订阅

订阅专栏

前端

47 篇文章 0 订阅

订阅专栏

安卓

41 篇文章 0 订阅

订阅专栏

前言

前两篇文章我们做了摇杆控制小鱼移动，这篇将会添加一个NPC，让其自动在海洋里游荡，然后玩家控制吃掉它。在这之前我们想思考一些问题，

NPC如何生成？NPC有哪些属性？NPC是如何控制的？如何做到随机转方向？

这是该篇的难点，这里还用到了一些数学知识，包括sin，cos，弧度与角度的计算等，还是比较麻烦的，但是等你看到代码又会发现代码量很少，又会觉得如此简单，好了，看例子。

1、开始游戏

这里我们需要添加一个开始游戏按钮，因为只有玩家开始了游戏，我们启动一个计时器才会变得顺理成章，不然的话，上来就启动计时器会很好资源的。

export struct FishPage {
    @State isBegin: boolean = false
}

这里我们默认是false，未启动状态

build() {
  Row() {
    Stack() {
      // 背景
      Image($r("app.media.bg_fish"))

      if (this.isBegin == false) {
        Button('开始游戏')
          .backgroundColor('#36d')
          .onClick(() => {
          //这里把设置成true
            this.isBegin = true
            
          })
      } else {
          //渲染小鱼
      }
    }
}

在这里插入图片描述

2、添加NPC小鱼

我们在开始之前就已经开始思考了，NPC应该有什么属性，起始位置，方向，速度，等，这里暂时不需要等级，下篇互吃逻辑写。

//NPC
@State npcSpeed: number = 3
@State npcFishX: number = 300
@State npcFishY: number = 200
@State npcAngle: number = 0
@State intervalIdNPC_1: number = 1
@State npcSin: number = 1
@State npcCos: number = 1
npc显示需要写在else里面，也就是点击开始游戏后，isBegin=true时

if (this.isBegin == false) {
  Button('开始游戏')
    .backgroundColor('#36d')
    .onClick(() => {
      this.isBegin = true
    })
} else {
  Image($r("app.media.icon_fish_right"))
    .position({ x: this.xFish - this.fishRadius, y: this.yFish - this.fishRadius })
    .rotate({ angle: this.angle, centerX: '50%', centerY: '50%' })
    .width(40)
    .height(40)

  Image($r("app.media.icon_npc_2"))
    .position({ x: this.npcFishX - this.fishRadius, y: this.npcFishY - this.fishRadius })
    .rotate({ angle: this.npcAngle, centerX: '50%', centerY: '50%' })
    .objectFit(ImageFit.ScaleDown)
    .width(40)
    .height(40)
    
}

ok,第一个image是玩家控制的小鱼，第二个image是NPC。

3、NPC动起来

问题来了，NPC如何自己动起来了，这就又用到了计时器，这里如果有其他好的方法也评论区打出来哈。当玩家点击开始游戏按钮时启动计时器，

if (this.isBegin == false) {
  Button('开始游戏')
    .backgroundColor('#36d')
    .onClick(() => {
      this.isBegin = true
      clearInterval(this.intervalIdNPC_1)
      this.intervalIdNPC_1 = setInterval(() => {

        //设置小鱼的移动位置,
        this.npcFishX += this.npcSpeed * this.npcCos
        this.npcFishY += this.npcSpeed * this.npcSin

        this.npcFishX = this.getNPCBorderX(this.npcFishX)
        this.npcFishY = this.getNPCBorderY(this.npcFishY)


      }, 40)

    })
}

这里需要说一下，启动一个计时器，内部是不断地计算npc的位置，getNPCBorderX这个是防止走出屏幕的宽度和高度设置的，当触碰到边框要改变方向。难点也在这

getNPCBorderX(x: number) {
  if (x <= this.fishRadius) {
    x = this.fishRadius + 10
    this.getRandom()
  }
  if (x > this.screenWidth - this.fishRadius) {
    x = this.screenWidth - this.fishRadius - 15
    this.getRandom()
  }
  return x
}

getNPCBorderY(y: number) {
  if (y <= this.fishRadius) {
    y = this.fishRadius + 10
    this.getRandom()
  }
  if (y > this.screenHeight - this.fishRadius) {
    y = this.screenHeight - this.fishRadius - 10
    this.getRandom()
  }
  return y
}

那一个x方向说吧，当x<=小鱼的半径时说明，小鱼已经贴左边了，大于屏幕宽度时贴右边了，这时我们要改变方向，getRandom()就是改变方向用的，至于x=this.fishRadius +10 这个主要是当贴边后，小鱼还在走，就会触发多次if语句，生成多次方向，也就是说会出现抖动现象，感兴趣去掉赋值可以试试。

4、NPC方向生成

这一块是最麻烦的，

弧度 = 角度 * π / 180
角度 = 弧度 * 180 / π

我们认识到的Math.sin,cos,tan等一般都是传入一个弧度，而不是角度（我传入角度老是有问题，这里传入弧度就解决了）

/*随机获取一个角度*/
getRandom() {
  this.npcAngle= this.selectFrom(-179,180)
  // let angle = Math.random()+Math.random()+Math.random()
  // this.npcAngle = angle * 180 / Math.PI
  //这是是求弧度，弧度 = 角度 * π / 180

  this.npcSin = Math.sin(this.npcAngle * Math.PI /180)
  this.npcCos = Math.cos(this.npcAngle * Math.PI /180)

  console.log("角度"+this.npcAngle)
}

selectFrom(startNumber, endNumber) {
  let choice = endNumber - startNumber + 1;
  return Math.floor(Math.random() * choice + startNumber)
}

首先我们需要随机生成一个角度，比如说90度，50度，-120度等
在这里插入图片描述

角度是作为鱼头方向用的，我们按照speed速度去计算该方向的值
在这里插入图片描述

那么x轴上的值就是x = speed * cos值，如下

this.intervalIdNPC_1 = setInterval(() => {

  //设置小鱼的移动位置,
  this.npcFishX += this.npcSpeed * this.npcCos
  this.npcFishY += this.npcSpeed * this.npcSin

  this.npcFishX = this.getNPCBorderX(this.npcFishX)
  this.npcFishY = this.getNPCBorderY(this.npcFishY)


}, 40)

5、关闭计时器

onPageHide() {
  clearInterval(this.intervalIdNPC_1)
}

记住页面消失时，或者游戏结束时需要关闭计时器

好了，到这NPC防止就完成了。

写在最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新5.0学习路线

在这里插入图片描述

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版5.0全套鸿蒙HarmonyOS学习资料

《鸿蒙 (OpenHarmony)开发入门教学视频》

在这里插入图片描述

《鸿蒙生态应用开发V3.0白皮书》

在这里插入图片描述

《鸿蒙 (OpenHarmony)开发基础到实战手册》

OpenHarmony北向、南向开发环境搭建

在这里插入图片描述

《鸿蒙开发基础》

●ArkTS语言
●安装DevEco Studio
●运用你的第一个ArkTS应用
●ArkUI声明式UI开发
.……
在这里插入图片描述

《鸿蒙开发进阶》

●Stage模型入门
●网络管理
●数据管理
●电话服务
●分布式应用开发
●通知与窗口管理
●多媒体技术
●安全技能
●任务管理
●WebGL
●国际化开发
●应用测试
●DFX面向未来设计
●鸿蒙系统移植和裁剪定制
……
在这里插入图片描述

《鸿蒙进阶实战》

●ArkTS实践
●UIAbility应用
●网络案例
……
在这里插入图片描述

获取以上完整鸿蒙HarmonyOS学习资料，请点击→纯血版全套鸿蒙HarmonyOS学习资料

HarmonyOS_001

关注

16
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
【鸿蒙实战开发】鸿蒙原生小游戏（放置NPC）

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。
复制链接

扫一扫