【鸿蒙原生应用开发--ArkUI--016】Guess-number 猜数字游戏开发教程
Guess-number 猜数字游戏开发教程
项目介绍
项目背景
猜数字是一个经典的益智游戏，规则简单但富有趣味性。游戏的玩法是：系统随机生成一个1到100之间的数字，玩家通过反复猜测来找到这个数字。每次猜测后，系统会提示"太大"或"太小"，帮助玩家逐步接近正确答案。这个游戏不仅能够锻炼逻辑推理能力，还能培养耐心和策略思维。
猜数字游戏有着悠久的历史，它是计算机科学中最基础的程序之一，常被用于教学和编程入门。虽然规则简单，但其中蕴含着二分查找、概率分析等计算机科学的核心概念。通过开发这个游戏，开发者可以学习随机数生成、条件判断、数组操作等基础编程技能。
应用场景
休闲娱乐：在空闲时间玩一个小游戏放松心情。简单的规则和快速的反馈使得这个游戏适合任何年龄段的玩家。
逻辑训练：锻炼推理能力和策略思维。玩家需要根据提示信息，运用二分查找等策略来缩小猜测范围。
亲子互动：家长和孩子一起玩，增进感情。简单的规则使得小孩子也能参与，同时培养他们的数字感知能力。
编程学习：作为编程入门项目，学习基础概念。这个游戏涵盖了随机数、循环、条件判断等基础编程概念。
功能特性
随机数生成：生成1-100之间的随机整数，每次游戏开始时重新生成。
猜测提示：提示太大或太小，帮助玩家缩小范围。还会根据距离给出颜色提示。
猜测历史：记录每次猜测的结果，包括猜测的数字和提示信息。
最佳记录：记录最少猜测次数，激励玩家挑战更好的成绩。
游戏重置：开始新游戏，重新生成随机数并清空历史记录。
最终效果
应用采用紫色主题，营造神秘和探索的氛围。主界面包含：
- 顶部标题栏和新游戏按钮
- 猜测次数和最佳记录显示
- 提示信息区域
- 数字输入框和猜测按钮
- 猜测历史列表，显示每次猜测的结果
技术栈
- 开发框架：HarmonyOS NEXT (API 20+)
- 编程语言：ArkTS
- UI框架：ArkUI 声明式 UI
- 核心组件：Column, Row, List, Button, TextInput, Text
知识点讲解
1. 随机数生成
使用Math.random()生成随机数是游戏开发的基础。
// 生成1-100之间的随机整数privategenerateRandomNumber():number{// Math.random() 返回 0 到 1 之间的随机小数// 乘以 100 后范围变为 0 到 100// Math.floor() 向下取整，得到 0 到 99// 加 1 后范围变为 1 到 100returnMath.floor(Math.random()*100)+1}// 开始新游戏privatestartNewGame(){this.targetNumber=this.generateRandomNumber()this.guessInput=''this.guesses=[]this.message='猜一个1-100之间的数字'this.gameOver=falsethis.attempts=0}2. 数字比较与提示
比较猜测数字和目标数字，给出相应的提示。
privatemakeGuess(){// 解析输入constguess=parseInt(this.guessInput)// 验证输入是否为有效数字if(isNaN(guess)||guess<1||guess>100){this.message='请输入1-100之间的有效数字'return}// 检查是否已经猜过if(this.guesses.includes(guess)){this.message='你已经猜过这个数字了'return}// 记录猜测this.guesses.push(guess)this.attempts++// 比较并给出提示if(guess===this.targetNumber){this.message=`恭喜你猜对了！答案就是${this.targetNumber}`this.gameOver=truethis.updateBestScore()}elseif(guess<this.targetNumber){this.message='太小了，再大一点！'}else{this.message='太大了，再小一点！'}// 清空输入框this.guessInput=''}3. 历史记录管理
记录每次猜测的结果，方便玩家回顾。
interfaceGuessRecord{guess:numberhint:stringcolor:string}@Stateguesses:GuessRecord[]=[]// 添加猜测记录privateaddGuessRecord(guess:number){lethint=''letcolor=''if(guess===this.targetNumber){hint='✓ 正确'color='#10b981'}elseif(guess<this.targetNumber){hint='↑ 太小'color='#f59e0b'}else{hint='↓ 太大'color='#ef4444'}this.guesses.unshift({guess:guess,hint:hint,color:color})}4. 最佳记录
记录和更新最佳成绩。
@StatebestScore:number=0privateupdateBestScore(){// 如果是第一次完成游戏或者成绩更好，更新记录if(this.bestScore===0||this.attempts<this.bestScore){this.bestScore=this.attempts}}5. 距离提示
根据猜测数字与目标数字的距离给出颜色提示。
privategetHintColor(guess:number):string{constdiff=Math.abs(guess-this.targetNumber)if(diff<=5)return'#10b981'// 非常接近：绿色if(diff<=15)return'#f59e0b'// 接近：黄色return'#ef4444'// 差得远：红色}privategetHintText(guess:number):string{constdiff=Math.abs(guess-this.targetNumber)if(diff<=5)return'非常接近！'if(diff<=15)return'接近了！'return'差得远！'}6. 输入验证
验证用户输入是否为有效数字。
privatevalidateInput(input:string):boolean{constnumber=parseInt(input)// 检查是否为有效数字if(isNaN(number)){this.message='请输入有效数字'returnfalse}// 检查是否在有效范围内if(number<1||number>100){this.message='请输入1-100之间的数字'returnfalse}returntrue}7. 重复检测
检测用户是否猜过相同的数字。
privateisDuplicate(guess:number):boolean{returnthis.guesses.some(record=>record.guess===guess)}// 在 makeGuess 中使用if(this.isDuplicate(guess)){this.message='你已经猜过这个数字了'return}8. 游戏状态管理
管理游戏的各种状态。
@StatetargetNumber:number=0// 目标数字@StateguessInput:string=''// 输入框内容@Stateguesses:GuessRecord[]=[]// 猜测历史@Statemessage:string=''// 提示信息@StategameOver:boolean=false// 游戏是否结束@Stateattempts:number=0// 猜测次数@StatebestScore:number=0// 最佳记录9. 列表渲染
使用列表显示猜测历史。
List(){ForEach(this.guesses,(record:GuessRecord,index:number)=>{ListItem(){Row(){Text(`#${index+1}`).fontSize(14).fontColor('#64748b').width('15%')Text(`${record.guess}`).fontSize(18).fontWeight(FontWeight.Bold).fontColor(record.color).width('30%')Text(record.hint).fontSize(14).fontColor(record.color).width('30%')Text(this.getHintText(record.guess)).fontSize(12).fontColor('#64748b').width('25%')}.width('100%').padding(12).backgroundColor('#ffffff').borderRadius(8).margin({bottom:4})}})}.width('100%').height(200)10. 动画效果
为游戏添加简单的动画效果。
// 胜利时的动画Text('🎉').fontSize(80).scale({x:this.gameOver?1:0}).animation({duration:500,curve:Curve.EaseOut})// 输入框震动效果（输入错误时）TextInput({text:this.guessInput}).translate({x:this.shakeAnimation?10:0}).animation({duration:100})完整代码解析
页面结构
┌─────────────────────────────────┐ │ [猜数字游戏] [新游戏] │ ├─────────────────────────────────┤ │ 猜测次数: 3 最佳记录: 5次 │ ├─────────────────────────────────┤ │ ┌───────────────────────────┐ │ │ │ 猜一个1-100之间的数字 │ │ │ │ │ │ │ │ ┌─────────────────────┐ │ │ │ │ │ 50 │ │ │ │ │ └─────────────────────┘ │ │ │ │ │ │ │ │ [猜测] │ │ │ └───────────────────────────┘ │ ├─────────────────────────────────┤ │ 猜测历史 │ │ #1 50 ↑ 太小 接近了！ │ │ #2 75 ↓ 太大 接近了！ │ │ #3 65 ✓ 正确 非常接近！ │ └─────────────────────────────────┘核心方法
1. 开始新游戏
privatestartNewGame(){this.targetNumber=Math.floor(Math.random()*100)+1this.guessInput=''this.guesses=[]this.message='猜一个1-100之间的数字'this.gameOver=falsethis.attempts=0}2. 猜测数字
privatemakeGuess(){constguess=parseInt(this.guessInput)if(isNaN(guess)||guess<1||guess>100){this.message='请输入1-100之间的有效数字'return}if(this.guesses.some(r=>r.guess===guess)){this.message='你已经猜过这个数字了'return}this.guesses.unshift({guess:guess,hint:guess===this.targetNumber?'✓ 正确':guess<this.targetNumber?'↑ 太小':'↓ 太大',color:guess===this.targetNumber?'#10b981':guess<this.targetNumber?'#f59e0b':'#ef4444'})this.attempts++if(guess===this.targetNumber){this.message=`恭喜你猜对了！答案就是${this.targetNumber}`this.gameOver=trueif(this.bestScore===0||this.attempts<this.bestScore){this.bestScore=this.attempts}}elseif(guess<this.targetNumber){this.message='太小了，再大一点！'}else{this.message='太大了，再小一点！'}this.guessInput=''}3. 获取提示颜色
privategetHintColor(guess:number):string{constdiff=Math.abs(guess-this.targetNumber)if(diff<=5)return'#10b981'if(diff<=15)return'#f59e0b'return'#ef4444'}常见问题与解决方案
问题1：输入非数字出错
现象：在输入框中输入字母或特殊符号时，程序出现错误。
解决方案：
constguess=parseInt(this.guessInput)if(isNaN(guess)){this.message='请输入有效数字'return}问题2：重复猜测
现象：可以多次猜测同一个数字。
解决方案：
if(this.guesses.some(r=>r.guess===guess)){this.message='你已经猜过这个数字了'return}问题3：输入超出范围
现象：可以输入小于1或大于100的数字。
解决方案：
if(guess<1||guess>100){this.message='请输入1-100之间的数字'return}扩展学习
可添加功能
难度选择
- 简单模式：1-50范围
- 中等模式：1-100范围
- 困难模式：1-1000范围
提示功能
- 显示数字范围提示
- 显示奇偶提示
- 显示大小区间提示
动画效果
- 数字翻转动画
- 胜利庆祝动画
- 错误提示动画
音效
- 猜测音效
- 胜利音效
- 错误音效
多人模式
- 轮流猜测
- 多人竞赛
- 排行榜
总结
通过本教程，您学会了：
随机数生成：如何使用 Math.random() 生成指定范围的随机数。
数字比较：如何比较数字并给出相应的提示。
历史记录：如何记录和显示猜测历史。
最佳记录：如何记录和更新最佳成绩。
输入验证：如何验证用户输入的有效性。
状态管理：如何管理游戏的各种状态。
这些知识点可以应用于各种游戏和交互式应用的开发。