教你用JavaScript实现乘法游戏
案例介绍
欢迎来的我的小院,我是霍大侠,恭喜你今天又要进步一点点了!
我们来用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实现乘法游戏的更多相关文章
- 12岁的少年教你用Python做小游戏
首页 资讯 文章 频道 资源 小组 相亲 登录 注册 首页 最新文章 经典回顾 开发 设计 IT技术 职场 业界 极客 创业 访谈 在国外 - 导航条 - 首页 最新文章 经典回顾 开发 ...
- tyvj1014 乘法游戏
描述 乘法游戏是在一行牌上进行的.每一张牌包括了一个正整数.在每一个移动中,玩家拿出一张牌,得分是用它的数字乘以它左边和右边的数,所以不允许拿第1张和最后1张牌.最后一次移动后,这里只剩下两张牌. ...
- 青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 10(排行榜界面&界面管理)
继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...
- TYVJ 1014 乘法游戏
做题记录:2016-08-15 16:10:14 背景 太原成成中学第2次模拟赛 第四道 描述 乘法游戏是在一行牌上进行的.每一张牌包括了一个正整数.在每一个移动中,玩家拿出一张牌,得分是用它的数字乘 ...
- JAVASCRIPT开发HTML5游戏--斗地主(网络对战PART4)
继之前用游戏引擎(青瓷引擎)做了斗地主单机版游戏之后,这里分享下使用socket.io来实现网络对战,代码可已放到github上,在此谈谈自己整个的开发思路吧. 客户端代码 服务端代码 (点击图片进入 ...
- javascript开发HTML5游戏--斗地主(单机模式part3)
最近学习使用了一款HTML5游戏引擎(青瓷引擎),并用它尝试做了一个斗地主的游戏,简单实现了单机对战和网络对战,代码可已放到github上,在此谈谈自己如何通过引擎来开发这款游戏的. 客户端代码 服务 ...
- javascript开发HTML5游戏--斗地主(单机模式part2)
最近学习使用了一款HTML5游戏引擎(青瓷引擎),并用它尝试做了一个斗地主的游戏,简单实现了单机对战和网络对战,代码可已放到github上,在此谈谈自己如何通过引擎来开发这款游戏的. 客户端代码 服务 ...
- codevs 1966 乘法游戏
1966 乘法游戏 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 乘法游戏是在一行牌上进行的.每一张牌包括了一个正整数.在每 ...
- JavaScript实现乘法表
JavaScript实现乘法表 <script type="text/javascript"> function c(n,m) { ...
- 【转】javascript 小数乘法结果错误处理
一.用js计算 12.32 * 7 结果是多少? 答案:86.24000000000001 为什么会出现这种问题?怎么解决? js在处理小数的乘除法的时候有一个bug,解决的方法可以是:将小数变 ...
随机推荐
- [题解] Atcoder AGC 005 F Many Easy Problems NTT,组合数学
题目 观察当k固定时答案是什么.先假设每个节点对答案的贡献都是\(\binom{n}{k}\),然后再减掉某个点没有贡献的选点方案数.对于一个节点i,它没有贡献的方案数显然就是所有k个节点都选在i连出 ...
- 条件期望:Conditional Expectation 举例详解之入门之入门之草履虫都说听懂了
我知道有很多人理解不了 "条件期望" (Conditional Expectation) 这个东西,有的时候没看清把随机变量看成事件,把 \(\sigma\)-algebra 看成 ...
- 空 Maven项目转成 Web项目 & SpringMVC调用其他 Module中的方法可能会遇到的小问题
SpringMVC调用其他 模块内的方法的 坑 下次别在阴沟里翻船啦.. 一共花费 4个小时,解决项目中的这个问题 OMG 1. 首先是 Maven新建工程 一般使用 Maven都是先创建 空工程 当 ...
- Python函数-2V2
一.导入 $$ f ( x , y ) = 2 x + 3 y $$ 上面括号里面的就是数学公式里的自变量,自变量就相当于函数里的参数. 二.为什么要有参数 如果一个大楼里有两种尺寸不一的窗户,显然在 ...
- 驱动开发:内核通过PEB得到进程参数
PEB结构(Process Envirorment Block Structure)其中文名是进程环境块信息,进程环境块内部包含了进程运行的详细参数信息,每一个进程在运行后都会存在一个特有的PEB结构 ...
- OnionArch - 如何实现更新指定字段的通用Handler
博主最近失业在家,找工作之余,自己动手写了个洋葱架构(整洁架构)解决方案,以总结和整理以前的项目经验,起名叫OnionArch,其目的是为了更好的实现采用DDD(领域驱动分析)和命令查询职责分离(CQ ...
- Vue学习之--------消息订阅和发布、基础知识和实战应用(2022/8/24)
文章目录 1.基础知识 2.代码实例 2.1 main.js 2.2 School.vue 2.3 Student.vue 2.4 App.vue 3.全局事件总线通信改为消息的订阅和发布 3.1 核 ...
- 基于 Redis 生成分布式订单号
环境依赖: //spingBoot <version>2.6.6</version> //jdk11 <dependency> <groupId>org ...
- 搭建harbor私有仓库
2-1.项目说明 Harbor是一个用于存储和分发Docker镜像的企业级Registry服务器,由VMware开源,其通过添加一些企业必需的功能特性,例如安全.标识和管理等,扩展了开源 Docke ...
- 开箱即用 yyg-cli(脚手架工具):快速创建 vue3 组件库和vue3 全家桶项目
1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...