鴻蒙初體驗(yàn)（三）：使用JS FA應(yīng)用寫一個(gè)簡(jiǎn)單的猜數(shù)字游戲

小嵌

鴻蒙初體驗(yàn)（三）：使用JS FA應(yīng)用寫一個(gè)簡(jiǎn)單的猜數(shù)字游戲,   
關(guān)于HarmonyOS 2.0相關(guān)應(yīng)用軟件的安裝和使用可以參考鴻蒙初體驗(yàn)（一）：從安裝到第一個(gè)程序 Hello HarmonyOS

關(guān)于HarmonyOS 2.0JS FA應(yīng)用的開發(fā)和結(jié)構(gòu)可以參考鴻蒙初體驗(yàn)（二）：使用JS FA應(yīng)用的chart組件畫一個(gè)簡(jiǎn)單線性圖


一、創(chuàng)建項(xiàng)目 首先我們打開DevEco Studio新建一個(gè)Js項(xiàng)目




二、編寫代碼
1.第一種寫法：通過input組件的事件change去監(jiān)聽輸入的值進(jìn)行比較 index.css

• .container {
    
  
•     flex-direction:column;
    
  
•     width: 100%;
    
  
•     height: 100%;
    
  
• }
  

復(fù)制代碼 index.hml

• <div class =“container“>
    
  
•     <text class=“text“>猜數(shù)字</text>
    
  
•     <text>請(qǐng)輸入1到100的實(shí)數(shù)：</text>
    
  
•         <input type=“text“ name=“number“ id=“number“ @change=“guess“></input>
    
  
• </div>
  

復(fù)制代碼 index.js

• import prompt from \“@system.prompt\“;
    
  
• export default {
    
  
•     data（）{
    
  
•         return {
    
  
•             ran: parseInt（Math.random（）*100）
    
  
•         }
    
  
•     },
    
  
•     guess（num）{
    
  
•         var number = num.text;
    
  
•         if （number < 0 || number > 100） {
    
  
•             prompt.showToast（{
    
  
•                 message: \“請(qǐng)輸入1到100的實(shí)數(shù)\“,
    
  
•                 duration: 2000,
    
  
•             }）;
    
  
•         } else if （this.ran == number） {
    
  
•             prompt.showToast（{
    
  
•                 message: \“恭喜你猜對(duì)了，你猜的數(shù)字是\“ + this.ran,
    
  
•                 duration: 2000,
    
  
•             }）;
    
  
•         } else if （this.ran > number） {
    
  
•             prompt.showToast（{
    
  
•                 message: \“很遺憾，你猜小了\“,
    
  
•                 duration: 2000,
    
  
•             }）;
    
  
•         } else if （this.ran < number） {
    
  
•             prompt.showToast（{
    
  
•                 message: \“很遺憾，你猜大了\“,
    
  
•                 duration: 2000,
    
  
•             }）;
    
  
•         }
    
  
•     }
    
  
• }
    
  
• 
  

復(fù)制代碼

效果圖：



   這種每一次輸入就會(huì)提示一下，不推薦使用，這里只是試一下change事件，我覺得輸入完成后使用手動(dòng)點(diǎn)擊校驗(yàn)更好一點(diǎn)，那么就使用下面這種寫法。
2.第二種寫法：通過綁定value點(diǎn)擊事件進(jìn)行比較 index.css

• .container {
    
  
•     flex-direction:column;
    
  
•     width: 100%;
    
  
•     height: 100%;
    
  
• }
  

復(fù)制代碼 index.hml

• <div class =“container“>
    
  
•     <text class=“text“>猜數(shù)字</text>
    
  
•     <text>請(qǐng)輸入1到100的實(shí)數(shù)：</text>
    
  
•         <input type=“text“ name=“number“ id=“number“ value=“{{value}}“></input>
    
  
•     <button @click=“guess“>提交</button>
    
  
• </div>
  

復(fù)制代碼 index.js

• import prompt from \“@system.prompt\“;
    
  
• export default {
    
  
•     data（）{
    
  
•         return {
    
  
•             ran: parseInt（Math.random（）*100）,
    
  
•             value:““
    
  
•         }
    
  
•     },
    
  
•     guess（）{
    
  
•         var number = this.value;
    
  
•         if （number < 0 || number > 100） {
    
  
•             prompt.showToast（{
    
  
•                 message: \“請(qǐng)輸入1到100的實(shí)數(shù)\“,
    
  
•                 duration: 2000,
    
  
•             }）;
    
  
•         } else if （this.ran == number） {
    
  
•             prompt.showToast（{
    
  
•                 message: \“恭喜你猜對(duì)了，你猜的數(shù)字是\“ + this.ran,
    
  
•                 duration: 2000,
    
  
•             }）;
    
  
•         } else if （this.ran > number） {
    
  
•             prompt.showToast（{
    
  
•                 message: \“很遺憾，你猜小了\“,
    
  
•                 duration: 2000,
    
  
•             }）;
    
  
•         } else if （this.ran < number） {
    
  
•             prompt.showToast（{
    
  
•                 message: \“很遺憾，你猜大了\“,
    
  
•                 duration: 2000,
    
  
•             }）;
    
  
•         }
    
  
•     }
    
  
• }
    
  
• 
  

復(fù)制代碼

效果圖：

文章轉(zhuǎn)自：文化沙漠麥七