教你用 JavaScript 实现乘法游戏

2022-12-02
河北
本文字数：1290 字
阅读完需：约 4 分钟

案例介绍

欢迎来的我的小院，我是霍大侠，恭喜你今天又要进步一点点了！

我们来用 JavaScript 编程实战案例，做一个乘法积分游戏。乘法游戏主要通过用户输入的数值和程序计算的数值进行对比，正确积一分，错误扣一分。通过实战我们将学会 JSON.parse 方法、JSON.stringify 方法、localStorage.setItem 方法和 localStorage.getItem 方法。

案例演示

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

案例设计

JavaScript实战案例-乘法游戏

我们来看此案例的思维导图设计，包括需求描述，页面设计和技术架构。

其中架构设计包含了 HTML，CSS，JavaScript 共三部分代码。

源码学习

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

<form class="form" id="form">  <h4 class="score" id="score">得分</h4>  <h1 id="question">1x1=?</h1>  <input type="text"    class="input"    id="input"    placeholder="输入你的答案"    autofocus    autocomplete="off"/>  <button type="submit" class="btn">提交</button></form>

复制代码

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

const num1=Math.ceil(Math.random()*10);const num2=Math.ceil(Math.random()*10);const questionEI=document.getElementById("question");const inputEI=document.getElementById("input");const formEI=document.getElementById("form");const scoreEI=document.getElementById("score");let score=JSON.parse(localStorage.getItem("score"));  if(!score){  score=0;  }  scoreEI.innerText=`得分：${score}`;  questionEI.innerText=`${num1} X ${num2} = ?`;  const correctAns=num1*num2;  formEI.addEventListener("submit",()=>{  const userAns=+inputEI.value;  if(userAns===correctAns){  score++;  updateLocalStorage();  }else{  score--;  updateLocalStorage();  }  });  function updateLocalStorage() {  localStorage.setItem("score",JSON.stringify(score));  }

复制代码

总结思考

学习点

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 (视频源码免费获取)

（部分素材来源于互联网，如有保护请联系作者）

发布于: 刚刚阅读数: 6

原文链接:【http://xie.infoq.cn/article/b283eba9ae8ba3e89fe1f71df】。文章转载请联系作者。

小院里的霍大侠

关注

还未添加个人签名 2020-09-02 加入

还未添加个人简介

发布

暂无评论

创作场景