教你用JavaScript实现乘法游戏

天一秋名

<a name="x5rJo" rel="noopener">
案例介绍

欢迎来的我的小院，我是霍大侠，恭喜你今天又要进步一点点了！
我们来用JavaScript编程实战案例，做一个乘法积分游戏。乘法游戏主要通过用户输入的数值和程序计算的数值进行对比，正确积一分，错误扣一分。通过实战我们将学会JSON.parse方法、JSON.stringify方法、localStorage.setItem方法和localStorage.getItem方法。

案例演示

运行程序后用户根据题目在输入框内输入结果，点击提交后，系统判定，正确得分加一分，错误得分扣一分。

案例设计

JavaScript实战案例-乘法游戏
我们来看此案例的思维导图设计，包括需求描述，页面设计和技术架构。
其中架构设计包含了HTML，CSS，JavaScript 共三部分代码。

源码学习

进入核心代码学习，我们先来看HTML中的核心代码。

1. <form  id="form">
2.   <h4  id="score">得分</h4>
3.   <h1 id="question">1x1=?</h1>
4.   <input type="text"
5.    
6.     id="input"
7.     placeholder="输入你的答案"
8.     autofocus
9.     autocomplete="off"/>
10.   <button type="submit" >提交</button>
11. </form>

复制代码

然后我们来编写核心的JavaScript代码，通过math随机生成数字，自由组成题目。通过getElementById获得指定id的对象，使用innerText将题目、得分设置在页面上。当用户点击提交时，将用户提交的结果和程序计算的结果进行比较，两者一样得分+1，两者不同得分-1。

1. const num1=Math.ceil(Math.random()*10);
2. const num2=Math.ceil(Math.random()*10);
3. const questionEI=document.getElementById("question");
4. const inputEI=document.getElementById("input");
5. const formEI=document.getElementById("form");
6. const scoreEI=document.getElementById("score");
7. let score=JSON.parse(localStorage.getItem("score"));
8.   if(!score){
9.   score=0;
10.   }
11.   scoreEI.innerText=`得分：${score}`;
12.   questionEI.innerText=`${num1} X ${num2} = ?`;
13.   const correctAns=num1*num2;
14.   formEI.addEventListener("submit",()=>{
15.   const userAns=+inputEI.value;
16.   if(userAns===correctAns){
17.   score++;
18.   updateLocalStorage();
19.   }else{
20.   score--;
21.   updateLocalStorage();
22.   }
23.   });
24.   function updateLocalStorage() {
25.   localStorage.setItem("score",JSON.stringify(score));
26.   }

复制代码

总结思考

学习点
1、JSON.parse：将数据转换为 JavaScript 对象。
2、JSON.stringify：将 JavaScript 对象转换为字符串。
3、localStorage.setItem：将value存储到key字段
4、localStorage.getItem：获取指定key本地存储的值
问答
1、localStorage.setItem将什么存储到key字段？
2、JSON.stringify是将对象转换为字符串吗？
3、JSON.parse：将数据转换为什么对象？
关注我，跟着我每天学习一点点，让你不再枯燥，不再孤单..
全网可搜：小院里的霍大侠， 免费获取简单易懂的实战编程案例。编程/就业/副业/创业/资源。
私微信：huodaxia_xfeater
二维码： http://www.yougexiaoyuan.com/images/weixin_huodaxia.jpg
公众号：有个小院（微信公众号：yougexiaoyuan）
github：yougexiaoyuan (视频源码免费获取)
（部分素材来源于互联网，如有保护请联系作者）

来源:https://www.cnblogs.com/xFeater/p/17003919.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！