案例介绍

欢迎来的我的小院,我是霍大侠,恭喜你今天又要进步一点点了!
我们来用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 (视频源码免费获取)
(部分素材来源于互联网,如有保护请联系作者)

教你用JavaScript实现乘法游戏的更多相关文章

  1. 12岁的少年教你用Python做小游戏

    首页 资讯 文章 频道 资源 小组 相亲 登录 注册       首页 最新文章 经典回顾 开发 设计 IT技术 职场 业界 极客 创业 访谈 在国外 - 导航条 - 首页 最新文章 经典回顾 开发 ...

  2. tyvj1014 乘法游戏

    描述 乘法游戏是在一行牌上进行的.每一张牌包括了一个正整数.在每一个移动中,玩家拿出一张牌,得分是用它的数字乘以它左边和右边的数,所以不允许拿第1张和最后1张牌.最后一次移动后,这里只剩下两张牌.   ...

  3. 青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 10(排行榜界面&界面管理)

    继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...

  4. TYVJ 1014 乘法游戏

    做题记录:2016-08-15 16:10:14 背景 太原成成中学第2次模拟赛 第四道 描述 乘法游戏是在一行牌上进行的.每一张牌包括了一个正整数.在每一个移动中,玩家拿出一张牌,得分是用它的数字乘 ...

  5. JAVASCRIPT开发HTML5游戏--斗地主(网络对战PART4)

    继之前用游戏引擎(青瓷引擎)做了斗地主单机版游戏之后,这里分享下使用socket.io来实现网络对战,代码可已放到github上,在此谈谈自己整个的开发思路吧. 客户端代码 服务端代码 (点击图片进入 ...

  6. javascript开发HTML5游戏--斗地主(单机模式part3)

    最近学习使用了一款HTML5游戏引擎(青瓷引擎),并用它尝试做了一个斗地主的游戏,简单实现了单机对战和网络对战,代码可已放到github上,在此谈谈自己如何通过引擎来开发这款游戏的. 客户端代码 服务 ...

  7. javascript开发HTML5游戏--斗地主(单机模式part2)

    最近学习使用了一款HTML5游戏引擎(青瓷引擎),并用它尝试做了一个斗地主的游戏,简单实现了单机对战和网络对战,代码可已放到github上,在此谈谈自己如何通过引擎来开发这款游戏的. 客户端代码 服务 ...

  8. codevs 1966 乘法游戏

    1966 乘法游戏  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题目描述 Description 乘法游戏是在一行牌上进行的.每一张牌包括了一个正整数.在每 ...

  9. JavaScript实现乘法表

    JavaScript实现乘法表 <script type="text/javascript">        function c(n,m)        {      ...

  10. 【转】javascript 小数乘法结果错误处理

    一.用js计算 12.32 * 7  结果是多少? 答案:86.24000000000001   为什么会出现这种问题?怎么解决? js在处理小数的乘除法的时候有一个bug,解决的方法可以是:将小数变 ...

随机推荐

  1. Spring笔记三

    Spring-03 1. AOP 1.1 概念 ​ AOP为Aspect Oriented Programming的缩写,意为:面向切面编程.他是一种可以在不修改原来的核心代码的情况下给程序动态统一进 ...

  2. ARC144 D - AND OR Equation

    ARC144 D - AND OR Equation Solution 首先可以猜测和答案仅和每一个二进制位以及\(f(0)\)有关系,不妨把按位\(\operatorname{AND}\)和按位\( ...

  3. 某OA系统需要提供一个假条审批的模块,如果员工请假天数小于3天,主任可以审批该请假条;如果员工请假天数大于等于3天,小于10天,经理可以审批;如果员工请假天数大于等于10天,小于30天,总经理可以审批

    某OA系统需要提供一个假条审批的模块,如果员工请假天数小于3天,主任可以审批该请假条:如果员工请假天数大于等于3天,小于10天,经理可以审批:如果员工请假天数大于等于10天,小于30天,总经理可以审批 ...

  4. 后端框架的学习----mybatis框架(5、分页)

    七.分页 简单使用 1.在要使用Log4j的类中,导入包import org.apache.log4j.Logger; 2.日志对象,参数为当前类的class static Logger logger ...

  5. 齐博x1云市场注意事项

    安装云市场应用注意事项 大到频道,小到插件甚至钩子及风格都可以在线安装,在线升级. 但是有一个大家务必注意的地方,就是重装系统后,再安装有可能导致重复收费. 这个问题是可以解决的.当然如果不是重装系统 ...

  6. C# 7.0 添加和增强的功能【基础篇】

    C# 7.0 版是与 Visual Studio 2017 一起发布. 虽然该版本继承和发展了C# 6.0,但不包含编译器即服务. 一.out 变量 以前我们使用out变量必须在使用前进行声明,C# ...

  7. 前端JS获取路由地址里的参数QueryString取值

    参数的获取 声明一个函数 //参数name是路由参数 engNo function getQueryString(name) { var reg = new RegExp("(^|& ...

  8. Mybatis-Plus多表联查

    表格结构: CREATE TABLE `ssmpdemo`.`person_test` ( `id` varchar(32) CHARACTER SET utf8 COLLATE utf8_gener ...

  9. IIS 配置集中式证书模块实现网站自动绑定证书文件

    在 Windows 环境下如果采用 IIS 作为 网站服务器时,常规的网站绑定 HTTPS 需要一个一个站点手动选择对应的证书绑定,而且证书过期之后更换证书时也是需要一个个重新绑定操作,无法便捷的做到 ...

  10. 修复 docker build 错误 "ERROR: No build stage in current context"

    若 docker build 时遇到了错误 "ERROR: No build stage in current context",则有可能是没有将 FROM 命令语句放置在第一行. ...