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

关于HarmonyOS 2.0相关应用软件的安装和使用可以参考鸿蒙初体验：从安装到第一个程序 Hello HarmonyOS
关于HarmonyOS 2.0JS FA应用的开发和结构可以参考鸿蒙初体验（二）：使用JS FA应用的chart组件画一个简单线性图

一、创建项目

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

二、编写代码

1.第一种写法：通过input组件的事件change去监听输入的值进行比较

index.css

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

index.hml

<div class ="container">
    <text class="text">猜数字</text>
    <text>请输入1到100的实数：</text>
	<input type="text" name="number" id="number" @change="guess"></input>
</div>

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: '请输入1到100的实数',
                duration: 2000,
            });
        } else if (this.ran == number) {
   
            prompt.showToast({
   
                message: '恭喜你猜对了，你猜的数字是' + this.ran,
                duration: 2000,
            });
        } else if (this.ran > number) {
   
            prompt.showToast({
   
                message: '很遗憾，你猜小了',
                duration: 2000,
            });
        } else if (this.ran < number) {
   
            prompt.showToast({
   
                message: '很遗憾，你猜大了',
                duration: 2000,
            });
        }
    }
}

效果图：

这种每一次输入就会提示一下，不推荐使用，这里只是试一下change事件，我觉得输入完成后使用手动点击校验更好一点，那么就使用下面这种写法。

2.第二种写法：通过绑定value点击事件进行比较

index.css

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

index.hml

<div class ="container">
    <text class="text">猜数字</text>
    <text>请输入1到100的实数：</text>
	<input type="text" name="number" id="number" value="{
    {value}}"></input>
    <button @click="guess">提交</button>
</div>

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: '请输入1到100的实数',
                duration: 2000,
            });
        } else if (this.ran == number) {
   
            prompt.showToast({
   
                message: '恭喜你猜对了，你猜的数字是' + this.ran,
                duration: 2000,
            });
        } else if (this.ran > number) {
   
            prompt.showToast({
   
                message: '很遗憾，你猜小了',
                duration: 2000,
            });
        } else if (this.ran < number) {
   
            prompt.showToast({
   
                message: '很遗憾，你猜大了',
                duration: 2000,
            });
        }
    }
}

效果图：