返回发烧友论坛
发 帖  

[文章]鸿蒙初体验（三）：使用JS FA应用写一个简单的猜数字游戏

李永每
2020-12-21 14:23:46
阅读量0
鸿蒙系统
0
0
关于HarmonyOS 2.0相关应用软件的安装和使用可以参考鸿蒙初体验（一）：从安装到第一个程序 Hello HarmonyOS
关于HarmonyOS 2.0JS FA应用的开发和结构可以参考鸿蒙初体验（二）：使用JS FA应用的chart组件画一个简单线性图

一、创建项目
首先我们打开DevEco Studio新建一个Js项目

二、编写代码 1.第一种写法：通过input组件的事件change去监听输入的值进行比较
index.css
  1. .container {
  2.     flex-direction:column;
  3.     width: 100%;
  4.     height: 100%;
  5. }
复制代码
index.hml
  1. <div class ="container">
  2.     <text class="text">猜数字</text>
  3.     <text>请输入1到100的实数：</text>
  4.         <input type="text" name="number" id="number" @change="guess"></input>
  5. </div>
复制代码
index.js
  1. import prompt from '@system.prompt';
  2. export default {
  3.     data(){
  4.         return {
  5.             ran: parseInt(Math.random()*100)
  6.         }
  7.     },
  8.     guess(num){
  9.         var number = num.text;
  10.         if (number < 0 || number > 100) {
  11.             prompt.showToast({
  12.                 message: '请输入1到100的实数',
  13.                 duration: 2000,
  14.             });
  15.         } else if (this.ran == number) {
  16.             prompt.showToast({
  17.                 message: '恭喜你猜对了，你猜的数字是' + this.ran,
  18.                 duration: 2000,
  19.             });
  20.         } else if (this.ran > number) {
  21.             prompt.showToast({
  22.                 message: '很遗憾，你猜小了',
  23.                 duration: 2000,
  24.             });
  25.         } else if (this.ran < number) {
  26.             prompt.showToast({
  27.                 message: '很遗憾，你猜大了',
  28.                 duration: 2000,
  29.             });
  30.         }
  31.     }
  32. }
复制代码

效果图：

  这种每一次输入就会提示一下，不推荐使用，这里只是试一下change事件，我觉得输入完成后使用手动点击校验更好一点，那么就使用下面这种写法。
2.第二种写法：通过绑定value点击事件进行比较
index.css
  1. .container {
  2.     flex-direction:column;
  3.     width: 100%;
  4.     height: 100%;
  5. }
复制代码
index.hml
  1. <div class ="container">
  2.     <text class="text">猜数字</text>
  3.     <text>请输入1到100的实数：</text>
  4.         <input type="text" name="number" id="number" value="{{value}}"></input>
  5.     <button @click="guess">提交</button>
  6. </div>
复制代码
index.js
  1. import prompt from '@system.prompt';
  2. export default {
  3.     data(){
  4.         return {
  5.             ran: parseInt(Math.random()*100),
  6.             value:""
  7.         }
  8.     },
  9.     guess(){
  10.         var number = this.value;
  11.         if (number < 0 || number > 100) {
  12.             prompt.showToast({
  13.                 message: '请输入1到100的实数',
  14.                 duration: 2000,
  15.             });
  16.         } else if (this.ran == number) {
  17.             prompt.showToast({
  18.                 message: '恭喜你猜对了，你猜的数字是' + this.ran,
  19.                 duration: 2000,
  20.             });
  21.         } else if (this.ran > number) {
  22.             prompt.showToast({
  23.                 message: '很遗憾，你猜小了',
  24.                 duration: 2000,
  25.             });
  26.         } else if (this.ran < number) {
  27.             prompt.showToast({
  28.                 message: '很遗憾，你猜大了',
  29.                 duration: 2000,
  30.             });
  31.         }
  32.     }
  33. }
复制代码

效果图：

文章转自：文化沙漠麦七
举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友