【鸿蒙原生应用开发--ArkUI--016】Guess-number 猜数字游戏开发教程

Guess-number 猜数字游戏开发教程项目介绍项目背景猜数字是一个经典的益智游戏规则简单但富有趣味性。游戏的玩法是系统随机生成一个1到100之间的数字玩家通过反复猜测来找到这个数字。每次猜测后系统会提示太大或太小帮助玩家逐步接近正确答案。这个游戏不仅能够锻炼逻辑推理能力还能培养耐心和策略思维。猜数字游戏有着悠久的历史它是计算机科学中最基础的程序之一常被用于教学和编程入门。虽然规则简单但其中蕴含着二分查找、概率分析等计算机科学的核心概念。通过开发这个游戏开发者可以学习随机数生成、条件判断、数组操作等基础编程技能。应用场景休闲娱乐在空闲时间玩一个小游戏放松心情。简单的规则和快速的反馈使得这个游戏适合任何年龄段的玩家。逻辑训练锻炼推理能力和策略思维。玩家需要根据提示信息运用二分查找等策略来缩小猜测范围。亲子互动家长和孩子一起玩增进感情。简单的规则使得小孩子也能参与同时培养他们的数字感知能力。编程学习作为编程入门项目学习基础概念。这个游戏涵盖了随机数、循环、条件判断等基础编程概念。功能特性随机数生成生成1-100之间的随机整数每次游戏开始时重新生成。猜测提示提示太大或太小帮助玩家缩小范围。还会根据距离给出颜色提示。猜测历史记录每次猜测的结果包括猜测的数字和提示信息。最佳记录记录最少猜测次数激励玩家挑战更好的成绩。游戏重置开始新游戏重新生成随机数并清空历史记录。最终效果应用采用紫色主题营造神秘和探索的氛围。主界面包含顶部标题栏和新游戏按钮猜测次数和最佳记录显示提示信息区域数字输入框和猜测按钮猜测历史列表显示每次猜测的结果技术栈开发框架HarmonyOS NEXT (API 20)编程语言ArkTSUI框架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.targetNumberthis.generateRandomNumber()this.guessInputthis.guesses[]this.message猜一个1-100之间的数字this.gameOverfalsethis.attempts0}2. 数字比较与提示比较猜测数字和目标数字给出相应的提示。privatemakeGuess(){// 解析输入constguessparseInt(this.guessInput)// 验证输入是否为有效数字if(isNaN(guess)||guess1||guess100){this.message请输入1-100之间的有效数字return}// 检查是否已经猜过if(this.guesses.includes(guess)){this.message你已经猜过这个数字了return}// 记录猜测this.guesses.push(guess)this.attempts// 比较并给出提示if(guessthis.targetNumber){this.message恭喜你猜对了答案就是${this.targetNumber}this.gameOvertruethis.updateBestScore()}elseif(guessthis.targetNumber){this.message太小了再大一点}else{this.message太大了再小一点}// 清空输入框this.guessInput}3. 历史记录管理记录每次猜测的结果方便玩家回顾。interfaceGuessRecord{guess:numberhint:stringcolor:string}Stateguesses:GuessRecord[][]// 添加猜测记录privateaddGuessRecord(guess:number){lethintletcolorif(guessthis.targetNumber){hint✓ 正确color#10b981}elseif(guessthis.targetNumber){hint↑ 太小color#f59e0b}else{hint↓ 太大color#ef4444}this.guesses.unshift({guess:guess,hint:hint,color:color})}4. 最佳记录记录和更新最佳成绩。StatebestScore:number0privateupdateBestScore(){// 如果是第一次完成游戏或者成绩更好更新记录if(this.bestScore0||this.attemptsthis.bestScore){this.bestScorethis.attempts}}5. 距离提示根据猜测数字与目标数字的距离给出颜色提示。privategetHintColor(guess:number):string{constdiffMath.abs(guess-this.targetNumber)if(diff5)return#10b981// 非常接近绿色if(diff15)return#f59e0b// 接近黄色return#ef4444// 差得远红色}privategetHintText(guess:number):string{constdiffMath.abs(guess-this.targetNumber)if(diff5)return非常接近if(diff15)return接近了return差得远}6. 输入验证验证用户输入是否为有效数字。privatevalidateInput(input:string):boolean{constnumberparseInt(input)// 检查是否为有效数字if(isNaN(number)){this.message请输入有效数字returnfalse}// 检查是否在有效范围内if(number1||number100){this.message请输入1-100之间的数字returnfalse}returntrue}7. 重复检测检测用户是否猜过相同的数字。privateisDuplicate(guess:number):boolean{returnthis.guesses.some(recordrecord.guessguess)}// 在 makeGuess 中使用if(this.isDuplicate(guess)){this.message你已经猜过这个数字了return}8. 游戏状态管理管理游戏的各种状态。StatetargetNumber:number0// 目标数字StateguessInput:string// 输入框内容Stateguesses:GuessRecord[][]// 猜测历史Statemessage:string// 提示信息StategameOver:booleanfalse// 游戏是否结束Stateattempts:number0// 猜测次数StatebestScore:number0// 最佳记录9. 列表渲染使用列表显示猜测历史。List(){ForEach(this.guesses,(record:GuessRecord,index:number){ListItem(){Row(){Text(#${index1}).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.targetNumberMath.floor(Math.random()*100)1this.guessInputthis.guesses[]this.message猜一个1-100之间的数字this.gameOverfalsethis.attempts0}2. 猜测数字privatemakeGuess(){constguessparseInt(this.guessInput)if(isNaN(guess)||guess1||guess100){this.message请输入1-100之间的有效数字return}if(this.guesses.some(rr.guessguess)){this.message你已经猜过这个数字了return}this.guesses.unshift({guess:guess,hint:guessthis.targetNumber?✓ 正确:guessthis.targetNumber?↑ 太小:↓ 太大,color:guessthis.targetNumber?#10b981:guessthis.targetNumber?#f59e0b:#ef4444})this.attemptsif(guessthis.targetNumber){this.message恭喜你猜对了答案就是${this.targetNumber}this.gameOvertrueif(this.bestScore0||this.attemptsthis.bestScore){this.bestScorethis.attempts}}elseif(guessthis.targetNumber){this.message太小了再大一点}else{this.message太大了再小一点}this.guessInput}3. 获取提示颜色privategetHintColor(guess:number):string{constdiffMath.abs(guess-this.targetNumber)if(diff5)return#10b981if(diff15)return#f59e0breturn#ef4444}常见问题与解决方案问题1输入非数字出错现象在输入框中输入字母或特殊符号时程序出现错误。解决方案constguessparseInt(this.guessInput)if(isNaN(guess)){this.message请输入有效数字return}问题2重复猜测现象可以多次猜测同一个数字。解决方案if(this.guesses.some(rr.guessguess)){this.message你已经猜过这个数字了return}问题3输入超出范围现象可以输入小于1或大于100的数字。解决方案if(guess1||guess100){this.message请输入1-100之间的数字return}扩展学习可添加功能难度选择简单模式1-50范围中等模式1-100范围困难模式1-1000范围提示功能显示数字范围提示显示奇偶提示显示大小区间提示动画效果数字翻转动画胜利庆祝动画错误提示动画音效猜测音效胜利音效错误音效多人模式轮流猜测多人竞赛排行榜总结通过本教程您学会了随机数生成如何使用 Math.random() 生成指定范围的随机数。数字比较如何比较数字并给出相应的提示。历史记录如何记录和显示猜测历史。最佳记录如何记录和更新最佳成绩。输入验证如何验证用户输入的有效性。状态管理如何管理游戏的各种状态。这些知识点可以应用于各种游戏和交互式应用的开发。