鸿蒙开发游戏(一)—大鱼吃小鱼(界面部署)
鸿蒙开发游戏(二)—大鱼吃小鱼(摇杆控制)
鸿蒙开发游戏(三)—大鱼吃小鱼(放置NPC)
鸿蒙开发游戏(四)—大鱼吃小鱼(互吃升级)
鸿蒙开发游戏(五)—大鱼吃小鱼(添加音效)
鸿蒙开发游戏(六)—大鱼吃小鱼(称霸海洋)
前言:你是否玩过古老而不失优雅的大鱼吃小鱼,小鱼的生存之路何尝不是我们这些打工人的写照,以前想用安卓写的,碰巧鸿蒙它来了,那就边学习边记录吧,这个游戏一共分为6篇,记录了鸿蒙App的第一步创建,申明式UI控件如何使用,简单动画的使用,方法的封装,变量的状态管理,点击事件的分发,页面的生命周期,钩子的使用,一些用法与安卓原生的对比等,也算是一个小完整的项目了。
第一篇相对简单,只是简单的布局摆放,用的知识点是Stack布局,State状态管理,Entry入口,Component注解等
1、创建项目
2、项目结构
3、布局搭建
4、代码编写
1、创建项目
一般选择一个空的Ability
我们填写对应的项目名称,Bundle其实相当于安服务器托管网卓的包名,记得IOS也叫Bundle Name,就是唯一的标识。这里选择Api9,因为Api7以前还能使用Java编写,8还可以使用Js编写,到9以后就只能使用ArkTs了,这是官方对ts的一个升级。模型选择Stage,因为Api8以前只有FA模型,这两个模型的区别可以去官方看看,目前你只需要知道用Stage就对了,主推也是Stage模型。
Finish完成
2、项目目录
到这你会发现,系统帮我们创建了entry目录,有一个EntryAbility.ts和Index.ets。
这两个是有关联的,EntryAbility会加载一个主页面作为入口,就是Index.ets,当然你后期新创建了其他ets文件也可以修改。需要注意的是必须要有@Entry和@Component修饰
- @Entry:作为入口显示
- @Component:作为组件显示,如我们封装一个通用的TitleView,就只需要此修饰即可。
需要注意的是系统给我们创建了Index.et,会默认给我添加到配置文件中,如果自己创建,需要在这里添加,相当于安卓里的配置文件添加Activity。
3、布局搭建
我们需要2张图,一张小鱼,一张背景图(当然也可以gif,后面的海带飘飘)
放在media目录下,
4、编写代码
@Entry
@Component
export struct FishPage {
build() {
}
}
这是新的一个文件,我取名叫FishPage,我们写的UI 就在build里写,当然这里还有其他的生命周期的方法,这里暂时没用到,后面会一一介绍。
竟然需要背景,那就首选层叠布局Stack
@Entry
@Component
export struct服务器托管网 FishPage {
//方向
@State angle: number = 0
//其实位置
@State xFish: number = 100
@State yFish: number = 100
build() {
Row() {
Stack() {
// 背景
Image($r("app.media.bg_fish"))
Image($r("app.media.icon_fish_right"))
.position({ x: this.xFish - 20, y: this.yFish - 20 })
.rotate({ angle: this.angle, centerX: '50%', centerY: '50%' })
.width(40)
.height(40)
Row() {
Button('←')
.onClick(() => {
this.xFish -= 20
})
Column({ space: 40 }) {
Button('↑')
.onClick(()=>{
this.yFish -= 20
})
Button('↓')
.onClick(()=>{
this.yFish += 20
})
}
Button('→')
.onClick(()=>{
this.xFish += 20
})
}
.position({ x: 50, y: 200 })
}
}
}
}
这里需要注意一点就是
Image($r("app.media.bg_fish"))
安卓中是R.drawable.xxx,这里是$r
生命式UI组件的用法这里就不解答了,参考文档很详细
第一篇完
服务器托管,北京服务器托管,服务器租用 http://www.fwqtg.net
机房租用,北京机房租用,IDC机房托管, http://www.fwqtg.net