【引言】
打地鼠游戏是一款经典的休闲游戏，玩家需要在地鼠出现时快速点击它们以获得分数。使用鸿蒙框架创建组件、管理状态、实现基本的动画效果以及处理用户交互。本文将详细介绍游戏的结构、核心算法以及代码实现。注意完整代码在最后面。
【项目概述】
游戏的主要功能包括：
1. 地鼠组件的定义：通过Hamster结构体定义了地鼠的外观，包括身体、眼睛等各个部分的样式，并支持根据单元格的宽度动态调整地鼠的尺寸。
2. 单元格类Cell：定义了游戏中的单个单元格，它具有表示地鼠是否显示的状态，并可以设置显示地鼠时的缩放选项。此外，Cell类中还包含了一些方法，比如setSelectedTrueTime()用于设置地鼠显示的时间戳，checkTime()则用来检测地鼠是否应该因为超过了预定的停留时间而被隐藏。
3. 游戏主组件Index：这是游戏的主要入口组件，它维护了游戏的核心状态，如动画间隔、出现的地鼠数量、地鼠的停留时间等。此外，它还包括了开始游戏(startGame)和结束游戏(endGame)的方法，这些方法负责初始化游戏状态和重置游戏数据。
4. 游戏界面构建：在Index组件的build方法中，定义了游戏的界面布局，包括显示计时器、得分板以及游戏区域内的各个单元格。
5. 时间控制与地鼠显示逻辑：通过TextTimer组件来控制游戏的时间，每经过一定的时间间隔，就会随机选择一些单元格显示地鼠。同时，游戏逻辑还包括了在地鼠被点击时增加玩家的得分，并执行相应的动画效果。
6. 用户交互：用户可以通过点击显示地鼠的单元格来获得分数，点击事件触发后，地鼠会被隐藏，并且游戏得分会被更新。
综上所述，该代码提供了一个完整的打地鼠游戏框架，包括地鼠的外观设计、游戏逻辑处理、时间控制以及用户交互等多个方面的功能。
【环境准备】
电脑系统：windows 10
开发工具：DevEco Studio NEXT Beta1 Build Version: 5.0.3.806
工程版本：API 12
真机：Mate 60 Pro
语言：ArkTS、ArkUI
【算法分析】
1. 随机抽取算法
在游戏中，需要随机选择多个地鼠出现的位置。通过洗牌算法随机抽取可用位置的索引。
let availableIndexList: number[] = []; // 存储可用的索引
for (let i = 0; i < this.cells.length; i++) {
if (!this.cells[i].isSelected) {
availableIndexList.push(i); // 添加到可用索引列表
}
}
// 洗牌算法
for (let i = 0; i < availableIndexList.length; i++) {
let index = Math.floor(Math.random() * (availableIndexList.length - i));
let temp = availableIndexList[availableIndexList.length - i - 1];
availableIndexList[availableIndexList.length - i - 1] = availableIndexList[index];
availableIndexList[index] = temp;
}2. 停留时间检查算法
在每个时间间隔内检查地鼠的停留时间，如果超过设定的停留时间，则将地鼠隐藏。
if (elapsedTime % 10 == 0) { // 每间隔100毫秒检查一次
for (let i = 0; i < this.cells.length; i++) {
this.cells[i].checkTime(this.hamsterStayDuration); // 检查每个单元格的停留时间
}
}3. 游戏结束处理算法
当游戏时间结束时，显示得分并重置游戏状态。
if (elapsedTime * 10 == this.gameDuration) { // 如果计时结束
let currentScore = this.currentScore; // 获取当前得分
this.getUIContext().showAlertDialog({ // 显示结果对话框
title: '游戏结束',
message: `得分：${currentScore}`,
confirm: {
defaultFocus: true,
value: '我知道了',
action: () => {}
},
alignment: DialogAlignment.Center,
});
this.endGame(); // 结束游戏
}【完整代码】
import { curves, window } from '@kit.ArkUI' // 导入所需的库和模块
// 定义地鼠组件
@Component
struct Hamster {
@Prop cellWidth: number // 定义一个属性，表示单元格的宽度
build() {
Stack() { // 创建一个堆叠布局
// 身体
Text()
.width(`${this.cellWidth / 2}lpx`) // 设置宽度为单元格宽度的一半
.height(`${this.cellWidth / 3 * 2}lpx`) // 设置高度为单元格高度的2/3
.backgroundColor("#b49579") // 设置背景颜色
.borderRadius({ topLeft: '50%', topRight: '50%' }) // 设置圆角
.borderColor("#2a272d") // 设置边框颜色
.borderWidth(1) // 设置边框宽度
// 嘴巴
Ellipse()
.width(`${this.cellWidth / 4}lpx`) // 设置嘴巴的宽度
.height(`${this.cellWidth / 5}lpx`) // 设置嘴巴的高度
.fillOpacity(1) // 设置填充不透明度
.fill("#e7bad7") // 设置填充颜色
.stroke("#563e3f") // 设置边框颜色
.strokeWidth(1) // 设置边框宽度
.margin({ top: `${this.cellWidth / 6}lpx` }) // 设置上边距
// 左眼睛
Ellipse()
.width(`${this.cellWidth / 9}lpx`) // 设置左眼睛的宽度
.height(`${this.cellWidth / 6}lpx`) // 设置左眼睛的高度
.fillOpacity(1) // 设置填充不透明度
.fill("#313028") // 设置填充颜色
.stroke("#2e2018") // 设置边框颜色
.strokeWidth(1) // 设置边框宽度
.margin({ bottom: `${this.cellWidth / 3}lpx`, right: `${this.cellWidth / 6}lpx` }) // 设置下边距和右边距
// 右眼睛
Ellipse()
.width(`${this.cellWidth / 9}lpx`) // 设置右眼睛的宽度
.height(`${this.cellWidth / 6}lpx`) // 设置右眼睛的高度
.fillOpacity(1) // 设置填充不透明度
.fill("#313028") // 设置填充颜色
.stroke("#2e2018") // 设置边框颜色
.strokeWidth(1) // 设置边框宽度
.margin({ bottom: `${this.cellWidth / 3}lpx`, left: `${this.cellWidth / 6}lpx` }) // 设置下边距和左边距
// 左眼瞳
Ellipse()
.width(`${this.cellWidth / 20}lpx`) // 设置左眼瞳的宽度
.height(`${this.cellWidth / 15}lpx`) // 设置左眼瞳的高度
.fillOpacity(1) // 设置填充不透明度
.fill("#fefbfa") // 设置填充颜色
.margin({ bottom: `${this.cellWidth / 2.5}lpx`, right: `${this.cellWidth / 6}lpx` }) // 设置下边距和右边距
// 右眼瞳
Ellipse()
.width(`${this.cellWidth / 20}lpx`) // 设置右眼瞳的宽度
.height(`${this.cellWidth / 15}lpx`) // 设置右眼瞳的高度
.fillOpacity(1) // 设置填充不透明度
.fill("#fefbfa") // 设置填充颜色
.margin({ bottom: `${this.cellWidth / 2.5}lpx`, left: `${this.cellWidth / 6}lpx` }) // 设置下边距和左边距
}.width(`${this.cellWidth}lpx`).height(`${this.cellWidth}lpx`) // 设置组件的宽度和高度
}
}
// 定义单元格类
@ObservedV2
class Cell {
@Trace scaleOptions: ScaleOptions = { x: 1, y: 1 }; // 定义缩放选项
@Trace isSelected: boolean = false // true表示显示地鼠，false表示隐藏地鼠
cellWidth: number // 单元格宽度
selectTime: number = 0 // 选择时间
constructor(cellWidth: number) { // 构造函数
this.cellWidth = cellWidth // 初始化单元格宽度
}
setSelectedTrueTime() { // 设置选择时间
this.selectTime = Date.now() // 记录当前时间
this.isSelected = true // 设置为选中状态
}
checkTime(stayDuration: number) { // 检查停留时间
if (this.isSelected) { // 如果当前是选中状态
if (Date.now() - this.selectTime >= stayDuration) { // 如果停留时间超过设定值
this.selectTime = 0 // 重置选择时间
this.isSelected = false // 设置为未选中状态
}
}
}
}
// 定义文本计时器修饰符类
class MyTextTimerModifier implements ContentModifier<TextTimerConfiguration> {
constructor() {}
applyContent(): WrappedBuilder<[TextTimerConfiguration]> { // 应用内容
return wrapBuilder(buildTextTimer) // 返回构建文本计时器的函数
}
}
// 构建文本计时器的函数
@Builder
function buildTextTimer(config: TextTimerConfiguration) {
Column() {
Stack({ alignContent: Alignment.Center }) { // 创建一个堆叠布局，内容居中对齐
Circle({ width: 150, height: 150 }) // 创建一个圆形
.fill(config.started ? (config.isCountDown ? 0xFF232323 : 0xFF717171) : 0xFF929292) // 根据状态设置填充颜色
Column() {
Text(config.isCountDown ? "倒计时" : "正计时").fontColor(Color.White) // 显示计时状态
Text(
(config.isCountDown ? "剩余" : "已经过去了") + (config.isCountDown ?
(Math.max(config.count / 1000 - config.elapsedTime / 100, 0)).toFixed(0) // 计算剩余时间
: ((config.elapsedTime / 100).toFixed(0)) // 计算已过去时间
) + "秒"
).fontColor(Color.White) // 显示时间
}
}
}
}
// 定义游戏主组件
@Entry
@Component
struct Index {
@State animationIntervalCount: number = 0 // 动画间隔计数
@State appearanceCount: number = 4 // 每次出现的地鼠数量
@State animationInterval: number = 1000 // 地鼠出现的间隔时间
@State hamsterStayDuration: number = 1500 // 地鼠停留时间
@State gameDuration: number = 30000 // 游戏总时长
@State randomPositionIndex: number = 0 // 随机位置
@State cells: Cell[] = [] // 存储地鼠单元格
@State cellWidth: number = 100 // 单元格宽度
@State currentScore: number = 0 // 当前游戏得分
@State timerModifier: MyTextTimerModifier = new MyTextTimerModifier() // 计时器修饰符
countdownTimerController: TextTimerController = new TextTimerController() // 倒计时控制器
timerController: TextTimerController = new TextTimerController() // 正计时控制器
aboutToAppear(): void {
// 设置当前app以横屏方式显示
window.getLastWindow(getContext()).then((windowClass) => {
windowClass.setPreferredOrientation(window.Orientation.LANDSCAPE) // 设置为横屏
})
// 显示10个地鼠坑位
for (let i = 0; i < 10; i++) {
this.cells.push(new Cell(this.cellWidth)) // 初始化10个单元格
}
}
endGame() { // 结束游戏
this.animationIntervalCount = 0 // 重置动画间隔计数
this.currentScore = 0 // 重置得分
for (let i = 0; i < this.cells.length; i++) {
this.cells[i].isSelected = false // 隐藏所有地鼠
}
this.countdownTimerController.reset() // 重置倒计时
this.timerController.reset() // 重置正计时
}
startGame() { // 开始游戏
this.endGame() // 结束当前游戏，重置所有状态
this.countdownTimerController.start() // 启动倒计时控制器
this.timerController.start() // 启动正计时控制器
}
build() { // 构建游戏界面
Row() { // 创建一个水平布局
// 显示时间与得分
Column({ space: 30 }) { // 创建一个垂直布局，设置间距
// 总时长
Column({ space: 5 }) { // 创建一个垂直布局，设置间距
Text(`倒计时长(秒)`).fontColor(Color.Black) // 显示倒计时长度的文本
Counter() { // 创建一个计数器组件
Text(`${this.gameDuration / 1000}`) // 显示游戏总时长（秒）
.fontColor(Color.Black) // 设置字体颜色
}
.width(300) // 设置计数器宽度
.onInc(() => { // 增加按钮的点击事件
this.gameDuration += 1000; // 每次增加1秒
}).onDec(() => { // 减少按钮的点击事件
this.gameDuration -= 1000; // 每次减少1秒
this.gameDuration = this.gameDuration < 1000 ? 1000 : this.gameDuration; // 确保最小值为1秒
});
}
// 每次出现个数
Column({ space: 5 }) { // 创建一个垂直布局，设置间距
Text(`每次出现(个)`).fontColor(Color.Black) // 显示每次出现的地鼠数量的文本
Counter() { // 创建一个计数器组件
Text(`${this.appearanceCount}`) // 显示每次出现的地鼠数量
.fontColor(Color.Black) // 设置字体颜色
}
.width(300) // 设置计数器宽度
.onInc(() => { // 增加按钮的点击事件
this.appearanceCount += 1; // 每次增加1个
}).onDec(() => { // 减少按钮的点击事件
this.appearanceCount -= 1; // 每次减少1个
this.appearanceCount = this.appearanceCount < 1 ? 1 : this.appearanceCount; // 确保最小值为1
});
}
// 地鼠每隔多长时间显示
Column({ space: 5 }) { // 创建一个垂直布局，设置间距
Text(`出现间隔(毫秒)`).fontColor(Color.Black) // 显示地鼠出现间隔的文本
Counter() { // 创建一个计数器组件
Text(`${this.animationInterval}`) // 显示地鼠出现的间隔时间
.fontColor(Color.Black) // 设置字体颜色
}
.width(300) // 设置计数器宽度
.onInc(() => { // 增加按钮的点击事件
this.animationInterval += 100; // 每次增加100毫秒
}).onDec(() => { // 减少按钮的点击事件
this.animationInterval -= 100; // 每次减少100毫秒
this.animationInterval = this.animationInterval < 100 ? 100 : this.animationInterval; // 确保最小值为100毫秒
});
}
// 地鼠停留时间
Column({ space: 5 }) { // 创建一个垂直布局，设置间距
Text(`停留间隔(毫秒)`).fontColor(Color.Black) // 显示地鼠停留时间的文本
Counter() { // 创建一个计数器组件
Text(`${this.hamsterStayDuration}`) // 显示地鼠的停留时间
.fontColor(Color.Black) // 设置字体颜色
}
.width(300) // 设置计数器宽度
.onInc(() => { // 增加按钮的点击事件
this.hamsterStayDuration += 100; // 每次增加100毫秒
}).onDec(() => { // 减少按钮的点击事件
this.hamsterStayDuration -= 100; // 每次减少100毫秒
this.hamsterStayDuration = this.hamsterStayDuration < 100 ? 100 : this.hamsterStayDuration; // 确保最小值为100毫秒
});
}
}.layoutWeight(1).padding({ left: 50 }) // 设置布局权重和左边距
// 游戏区
Flex({ wrap: FlexWrap.Wrap }) { // 创建一个可换行的弹性布局
ForEach(this.cells, (cell: Cell, index: number) => { // 遍历所有单元格
Stack() { // 创建一个堆叠布局
// 洞
Ellipse()
.width(`${this.cellWidth / 1.2}lpx`) // 设置洞的宽度
.height(`${this.cellWidth / 2.2}lpx`) // 设置洞的高度
.fillOpacity(1) // 设置填充不透明度
.fill("#020101") // 设置填充颜色
.stroke("#020101") // 设置边框颜色
.strokeWidth(1) // 设置边框宽度
.margin({ top: `${this.cellWidth / 2}lpx` }) // 设置上边距
// 地鼠
Hamster({ cellWidth: this.cellWidth }) // 创建地鼠组件
.visibility(cell.isSelected ? Visibility.Visible : Visibility.None) // 根据状态设置可见性
.scale(cell.scaleOptions) // 设置缩放选项
}.width(`${this.cellWidth}lpx`).height(`${this.cellWidth}lpx`) // 设置堆叠布局的宽度和高度
.margin({ left: `${index == 0 || index == 7 ? this.cellWidth / 2 : 0}lpx` }) // 设置左边距
.onClick(() => { // 点击事件
if (cell.isSelected) { // 如果当前单元格是选中状态
animateToImmediately({ // 执行动画
duration: 200, // 动画持续时间
curve: curves.springCurve(10, 1, 228, 30), // 动画曲线
onFinish: () => { // 动画结束后的回调
cell.isSelected = false // 隐藏地鼠
cell.scaleOptions = { x: 1.0, y: 1.0 }; // 重置缩放
this.currentScore += 1 // 增加得分
}
}, () => {
cell.scaleOptions = { x: 0, y: 0 }; // 动画开始时缩放到0
})
}
})
})
}.width(`${this.cellWidth * 4}lpx`) // 设置游戏区的宽度
// 操作按钮
Column({ space: 20 }) { // 创建一个垂直布局，设置间距
// 倒计时
TextTimer({ isCountDown: true, count: this.gameDuration, controller: this.countdownTimerController }) // 创建倒计时组件
.contentModifier(this.timerModifier) // 应用计时器修饰符
.onTimer((utc: number, elapsedTime: number) => { // 定义计时器的回调
// 每隔指定时间随机显示地鼠
if (elapsedTime * 10 >= this.animationInterval * this.animationIntervalCount) { // 判断是否达到显示地鼠的时间
this.animationIntervalCount++ // 增加动画间隔计数
// 获取可以出现的位置集合
let availableIndexList: number[] = [] // 存储可用的索引
for (let i = 0; i < this.cells.length; i++) { // 遍历所有单元格
if (!this.cells[i].isSelected) { // 如果当前单元格未被选中
availableIndexList.push(i) // 添加到可用索引列表
}
}
// 根据每次出现次数 appearanceCount 利用洗牌算法随机抽取
for (let i = 0; i < availableIndexList.length; i++) { // 遍历可用索引列表
let index = Math.floor(Math.random() * (availableIndexList.length - i)) // 随机选择一个索引
let temp = availableIndexList[availableIndexList.length - i - 1] // 交换位置
availableIndexList[availableIndexList.length - i - 1] = availableIndexList[index]
availableIndexList[index] = temp
}
// 随机抽取 appearanceCount，取前几个已经打乱好的顺序
for (let i = 0; i < availableIndexList.length; i++) { // 遍历可用索引列表
if (i < this.appearanceCount) { // 如果索引小于每次出现的数量
this.cells[availableIndexList[i]].setSelectedTrueTime() // 设置选中的单元格为显示状态
}
}
}
if (elapsedTime % 10 == 0) { // 每隔100毫秒检查一次
console.info('检查停留时间是否已过，如果过了就隐藏地鼠') // 输出调试信息
for (let i = 0; i < this.cells.length; i++) { // 遍历所有单元格
this.cells[i].checkTime(this.hamsterStayDuration) // 检查每个单元格的停留时间
}
}
if (elapsedTime * 10 >= this.gameDuration) { // 如果计时结束
let currentScore = this.currentScore // 获取当前得分
this.getUIContext().showAlertDialog({ // 显示结果对话框
// 显示结果页
title: '游戏结束', // 对话框标题
message: `得分：${currentScore}`, // 显示得分信息
confirm: { // 确认按钮配置
defaultFocus: true, // 默认焦点
value: '我知道了', // 按钮文本
action: () => { // 点击后的动作
// 这里可以添加点击确认后的逻辑
}
},
onWillDismiss: () => { // 关闭前的动作
// 这里可以添加关闭前的逻辑
},
alignment: DialogAlignment.Center, // 对齐方式为中心
});
this.endGame() // 结束游戏
}
})
Text(`当前得分：${this.currentScore}`) // 显示当前得分
Button('开始游戏').clickEffect({ level: ClickEffectLevel.LIGHT }).onClick(() => { // 创建开始游戏按钮
this.startGame() // 点击后开始游戏
})
Button('结束游戏').clickEffect({ level: ClickEffectLevel.LIGHT }).onClick(() => { // 创建结束游戏按钮
this.endGame() // 点击后结束游戏
})
}.layoutWeight(1) // 设置布局权重
}
.height('100%') // 设置整体高度为100%
.width('100%') // 设置整体宽度为100%
.backgroundColor("#61ac57") // 设置背景颜色
.justifyContent(FlexAlign.SpaceBetween) // 设置内容对齐方式
}
}
