template/harmony4-template
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🔥 Prune: template project

Browse Source
This commit is contained in:
cheliangzhao 2023-09-28 18:05:40 +08:00
parent 7fcc5d8950
commit 87fd13ff45
9 changed files with 18 additions and 275 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
entry/src/main/ets/components/CardView.ets
View File

@ -1,85 +0,0 @@
import { Card } from '../models/Card'
@Component
export struct CardView {
@ObjectLink card: Card
@Consume count: number
@State cardRotateAngle: number = 0
@State angle: number = 0
animate() {
if (this.card.isMatch) {
this.cardRotateAngle = 0
animateTo({
duration: 1000,
tempo: 1,
curve: Curve.Linear,
delay: 200,
iterations: -1,
playMode: PlayMode.Normal
}, () => {
this.angle = 360
})
}
if (this.card.isFaceUp && !this.card.isMatch) {
animateTo({
duration: 300,
tempo: 2,
curve: Curve.Linear,
delay: 0,
iterations: 1,
playMode: PlayMode.Normal
}, () => {
this.cardRotateAngle = 180
})
} else if (!this.card.isFaceUp) {
animateTo({
duration: 300,
tempo: 2,
curve: Curve.Linear,
delay: 0,
iterations: 1,
playMode: PlayMode.Normal
}, () => {
this.cardRotateAngle = 0
})
}
}
reverse() {
this.card.isFaceUp = !this.card.isFaceUp
this.count += 1
this.animate()
}
build() {
Column() {
Column() {
}
.width('100%')
.height('100%')
.border({ color: '#fffa9e0f', width: 2, radius: 15 })
.backgroundColor(this.card.isFaceUp ? '#fff5f0f0' : '#fffa9e0f')
.aspectRatio(2 / 3)
.rotate({ x: 0, y: 1, z: 0, angle: this.cardRotateAngle })
.visibility(this.card.isMatch ? Visibility.Hidden : Visibility.Visible)
.onClick(() => {
this.reverse()
})
Text(this.card.name)
.fontSize(20)
.textAlign(TextAlign.Center)
.visibility(!this.card.isFaceUp || this.card.isMatch ? Visibility.Hidden : Visibility.Visible)
.position({ x: '50%', y: '50%' })
.markAnchor({ x: '50%', y: '50%' })
// .rotate(this.card.isMatch ? { angle: this.angle } : { angle: 360 })
}
.padding({ left: 2, right: 2 })
.margin({ top: 10 })
.width(80)
.height(120)
}
}

37
entry/src/main/ets/components/GameView.ets
View File

@ -1,37 +0,0 @@
import { CardView } from './CardView'
import { ObservedArray } from '../models/ObservedArray'
import { Card } from '../models/Card'
@Component
export struct GameView {
@ObjectLink cards: ObservedArray<Card>
@Builder
getTitle() {
Text("字母消消乐")
.fontSize(20)
.fontWeight(FontWeight.Bold)
.width('100%')
}
build() {
Column() {
Row() {
this.getTitle()
}
Flex({
direction: FlexDirection.Row,
wrap: FlexWrap.Wrap,
justifyContent: FlexAlign.SpaceEvenly,
alignContent: FlexAlign.SpaceEvenly
}) {
ForEach(this.cards, (card, idx) => {
CardView({ card: card })
})
}
}
.padding({ left: 6, right: 6 })
.margin({ top: 20 })
}
}

12
entry/src/main/ets/models/Card.ets
View File

@ -1,12 +0,0 @@
@Observed
export class Card {
name: string
id: string
isFaceUp: boolean = false
isMatch: boolean = false
constructor(name: string) {
this.name = name
this.id = Date.now() + this.name
}
}

10
entry/src/main/ets/models/ObservedArray.ets
View File

@ -1,10 +0,0 @@
@Observed
export class ObservedArray<T> extends Array<T> {
constructor(args?: T[]) {
if (args instanceof Array) {
super(...args)
} else {
super()
}
}
}

52
entry/src/main/ets/models/viewModel.ets
View File

@ -1,52 +0,0 @@
import { Card } from './Card'
import { ObservedArray } from './ObservedArray'
export class CardViewModel {
cardList: ObservedArray<Card> = null
constructor() {
this.initCardList()
}
// 初始化cardList赋值
private initCardList() {
const words = ["A", "A", "B", "B", "C", "C", "D", "D", "E", "E", "F", "F"]
this.cardList = new ObservedArray<Card>(words.map(w => new Card(w)))
this.shuffle()
}
// 打乱元素
private shuffle() {
this.cardList.forEach((_, idx) => {
const j = Math.floor(Math.random() * (idx + 1)); // 生成随机索引
[this.cardList[idx], this.cardList[j]] = [this.cardList[j], this.cardList[idx]]; // 交换元素
})
}
public getCardList() {
return this.cardList
}
// 判断是否全部翻面
public isAllFaceUp() {
return !this.cardList.some(card =>!card.isFaceUp)
}
//
public match() {
// 如果翻了两个一样的
const cards = this.cardList.filter(item => item.isFaceUp && !item.isMatch)
if (cards.length < 2) return
if (cards.length === 2) {
const [card1, card2] = cards
console.log(card1.name, card2.name)
if (card1.name === card2.name) {
card1.isMatch = true
card2.isMatch = true
}
}
if (cards.length === 3) {
setTimeout(() => cards.forEach(item => item.isFaceUp = false), 100)
}
}
}

49
entry/src/main/ets/pages/GamePage.ets
View File

@ -1,49 +0,0 @@
import { GameView } from '../components/GameView'
import { CardViewModel } from '../models/viewModel'
import router from '@ohos.router'
@Preview
@Entry
@Component
struct Index {
@State viewModel: CardViewModel = new CardViewModel()
@Provide @Watch("handleFaceUp") count: number = 0
private time: number = 0
private intervalTimer: number
onPageShow() {
this.intervalTimer = setInterval(() => {
this.time++;
}, 1000)
}
onPageHide() {
if (this.intervalTimer) clearTimeout(this.intervalTimer)
}
/**
* 当所有Cards都反面，跳转About page
*/
handleFaceUp() {
// 如果全部翻面
if (this.viewModel.isAllFaceUp()) {
router.pushUrl({
url: "pages/OverPage",
params: {
count: this.count,
time: this.time,
}
})
return
}
this.viewModel.match()
}
build() {
Column() {
GameView({ cards: this.viewModel.getCardList() })
}
}
}

17
entry/src/main/ets/pages/Index.ets Normal file
View File

@ -0,0 +1,17 @@
@Preview
@Entry
@Component
struct Index {
@State message: string = "This a Template Project"
build() {
Row() {
Text(this.message)
.fontSize(40)
.fontWeight(FontWeight.Bold)
}
.height('100%')
.width('100%')
.justifyContent(FlexAlign.Center)
}
}

28
entry/src/main/ets/pages/OverPage.ets
View File

@ -1,28 +0,0 @@
import router from '@ohos.router'
@Preview
@Entry
@Component
struct About {
@State count: number = router.getParams()?.['count'] ?? 0
@State time: number = router.getParams()?.['time'] ?? 0
build() {
Column() {
Text("恭喜通关!")
.fontSize(30)
.fontWeight(FontWeight.Bold)
Text(`点击了${this.count}次，共耗时${this.time}秒`)
.opacity(0.6)
Text('超越了99%的人')
.fontColor(Color.Blue)
Button("再来一次").margin({ top: 10 })
.onClick(() => {
router.pushUrl({ url: "pages/GamePage" })
})
}
.justifyContent(FlexAlign.Center)
.height('100%')
.width('100%')
}
}

3
entry/src/main/resources/base/profile/main_pages.json
View File

@ -1,6 +1,5 @@
{
"src": [
"pages/GamePage",
"pages/OverPage"
"pages/Index"
]
}