JavaScript实现打字游戏


Posted in Javascript onFebruary 19, 2021

本文实例为大家分享了JavaScript实现打字游戏的具体代码,供大家参考,具体内容如下

效果图:

JavaScript实现打字游戏

JavaScript实现打字游戏

JavaScript实现打字游戏

需求分析:

1、在char这个div里面显示要输入的字母,大写
2、在result这个div里面时时显示正确率,比如98%
3、给文档绑定按键事件
4、如果输入的内容和char里面一致,显示正确动画:animated zoomIn,并更换输入的字母
5、如果输入的内容和char里面不一致,显示错误动画:animated shake error
6、不管是正确还是错误都时时更新result里面的正确率

源代码:

HTML部分

<mian>
 <div id="char">A</div>
 <div id="result">请在按键上按下屏幕上显示的字母</div>
</mian>

css部分

1.为了实现一些特效,先创建一个animate.css文件,在封装一些动画效果放里面

/*animate.css*/
.animated {
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}

.animated.infinite {
 -webkit-animation-iteration-count: infinite;
 animation-iteration-count: infinite;
}

.animated.hinge {
 -webkit-animation-duration: 2s;
 animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
 -webkit-animation-duration: .75s;
 animation-duration: .75s;
}
@-webkit-keyframes zoomIn {
 from {
 opacity: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transform: scale3d(.3, .3, .3);
 }

 50% {
 opacity: 1;
 }
}

@keyframes zoomIn {
 from {
 opacity: 0;
 -webkit-transform: scale3d(.3, .3, .3);
 transform: scale3d(.3, .3, .3);
 }

 50% {
 opacity: 1;
 }
}

.zoomIn {
 -webkit-animation-name: zoomIn;
 animation-name: zoomIn;
}
  .animated {
 -webkit-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}
@-webkit-keyframes shake {
 from, to {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 }

 10%, 30%, 50%, 70%, 90% {
 -webkit-transform: translate3d(-10px, 0, 0);
 transform: translate3d(-10px, 0, 0);
 }

 20%, 40%, 60%, 80% {
 -webkit-transform: translate3d(10px, 0, 0);
 transform: translate3d(10px, 0, 0);
 }
}

@keyframes shake {
 from, to {
 -webkit-transform: translate3d(0, 0, 0);
 transform: translate3d(0, 0, 0);
 }

 10%, 30%, 50%, 70%, 90% {
 -webkit-transform: translate3d(-10px, 0, 0);
 transform: translate3d(-10px, 0, 0);
 }

 20%, 40%, 60%, 80% {
 -webkit-transform: translate3d(10px, 0, 0);
 transform: translate3d(10px, 0, 0);
 }
}

.shake {
 -webkit-animation-name: shake;
 animation-name: shake;
}

2.css主体代码,无动画特效版

<style>
 body {
  margin: 0;
  /*开启弹性布局,并让弹性布局中的子元素
  水平居中对齐,垂直居中对齐*/
  display: flex;
  justify-content: center;
  align-items: center;
  /*文字居中*/
  text-align: center;
  /*设置背景颜色的经像渐变*/
  background: radial-gradient(circle, #444, #111, #000);
 }

 #char {
  font-size: 400px;
  color: lightgreen;
  /*设置文字阴影*/
  /*text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色*/
  /*位置可以为负值*/
  text-shadow: 0 0 50px #666;
 }

 #result {
  font-size: 20px;
  color: #888;
 }

 /*找到id为char及类名为error的div元素*/
 #char.error {
  color: red;
 }
</style>

JavaScript部分

1.为了简化代码,先封装一些常用的自定义构造函数

<script>
// 定义一个函数:rand
// 参数:最小整数,最大整数
// 返回:两个整数之间的一个随机整数
function rand(min, max) {
 return parseInt(Math.random() * (max - min + 1)) + min;
} 
</script>

2.js主体部分,需要用到封装的函数,调用即可

<script>
 // 获取相关元素
 var charDiv = document.getElementById('char');
 var resultDiv = document.getElementById('result');

 // code用于记录页面上的字母的编码,使用全局变量,到处都可以使用
 var code, tirme;

 var rightNum = 0;//正确次数
 var wrongNum = 0;//错误次数
 // 1 在char这个div里面显示要输入的字母,大写
 showChar();
 // 3 给文档绑定按键事件
 document.onkeyup = function (e) {
 // 事件对象
 e = window.event || e;
 // 获取按键编码
 var keyCode = e.keyCode || e.which;
 // 4 如果输入的内容和char里面一致
 if (keyCode == code) {
  // 显示正确动画:animated zoomIn
  charDiv.className = "animated zoomIn";
  rightNum++;
  showChar()
 }
 // 5 如果输入的内容和char里面不一致
 else {
  // 显示错误动画:animated shake error
  charDiv.className = "animated shake error";
  wrongNum++
 }
 // 为了下一次有动画,在本次动画完后要移除类名
 setTimeout(function () {
  charDiv.className = "";
 }, 500)
 // 6 不管是正确还是错误都时时更新result里面的正确率
 // 正确率 = 正确次/总次数
 resultDiv.innerHTML = "正确率:" + parseInt(rightNum / (rightNum + wrongNum) * 100) + "%"

 }
 // 函数功能:在char这个div里面随机显示要输入的字母:大写
 function showChar() {
  // 先随机出一个字母编码
  code = rand(65, 90);
  // 变成一个字母
  var char = String.fromCharCode(code);
  // 显示在char这个div里面
  charDiv.innerHTML = char;
 }
</script>

总代码

<html>

<head>
 <meta charset="utf-8">
 <title>打字游戏</title>
 <!--引入animate.css动画库-->
 <link rel="stylesheet" href="animate.css" >
 <style>
 body {
  margin: 0;
  /*开启弹性布局,并让弹性布局中的子元素
  水平居中对齐,垂直居中对齐*/
  display: flex;
  justify-content: center;
  align-items: center;
  /*文字居中*/
  text-align: center;
  /*设置背景颜色的经像渐变*/
  background: radial-gradient(circle, #444, #111, #000);
 }

 #char {
  font-size: 400px;
  color: lightgreen;
  /*设置文字阴影*/
  /*text-shadow: 水平位置 垂直位置 模糊距离 阴影颜色*/
  /*位置可以为负值*/
  text-shadow: 0 0 50px #666;
 }

 #result {
  font-size: 20px;
  color: #888;
 }

 /*找到id为char及类名为error的div元素*/
 #char.error {
  color: red;
 }
 </style>
</head>

<body>
 <mian>
 <div id="char">A</div>
 <div id="result">请在按键上按下屏幕上显示的字母</div>
 </mian>
</body>

</html>
<script>
 // 定义一个函数:rand
 // 参数:最小整数,最大整数
 // 返回:两个整数之间的一个随机整数
 function rand(min, max) {
 return parseInt(Math.random() * (max - min + 1)) + min;
 }
</script>
<script>
 // 获取相关元素
 var charDiv = document.getElementById('char');
 var resultDiv = document.getElementById('result');

 // code用于记录页面上的字母的编码,使用全局变量,到处都可以使用
 var code, tirme;

 var rightNum = 0;//正确次数
 var wrongNum = 0;//错误次数
 // 1 在char这个div里面显示要输入的字母,大写
 showChar();
 // 3 给文档绑定按键事件
 document.onkeyup = function (e) {
 // 事件对象
 e = window.event || e;
 // 获取按键编码
 var keyCode = e.keyCode || e.which;
 // 4 如果输入的内容和char里面一致
 if (keyCode == code) {
  // 显示正确动画:animated zoomIn
  charDiv.className = "animated zoomIn";
  rightNum++;
  showChar()
 }
 // 5 如果输入的内容和char里面不一致
 else {
  // 显示错误动画:animated shake error
  charDiv.className = "animated shake error";
  wrongNum++
 }
 // 为了下一次有动画,在本次动画完后要移除类名
 setTimeout(function () {
  charDiv.className = "";
 }, 500)
 // 6 不管是正确还是错误都时时更新result里面的正确率
 // 正确率 = 正确次/总次数
 resultDiv.innerHTML = "正确率:" + parseInt(rightNum / (rightNum + wrongNum) * 100) + "%"

 }
 // 函数功能:在char这个div里面随机显示要输入的字母:大写
 function showChar() {
  // 先随机出一个字母编码
  code = rand(65, 90);
  // 变成一个字母
  var char = String.fromCharCode(code);
  // 显示在char这个div里面
  charDiv.innerHTML = char;
 }
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用ADODB.Stream转换
Jan 22 Javascript
iframe子父页面调用js函数示例
Nov 07 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
Jan 15 Javascript
基于socket.io和node.js搭建即时通信系统
Jul 30 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
Angular.JS判断复选框checkbox是否选中并实时显示
Nov 30 Javascript
JS实现图片点击后出现模态框效果
May 03 Javascript
浅谈js的解析顺序 作用域 严格模式
Oct 23 Javascript
vue 实现的树形菜的实例代码
Mar 19 Javascript
浅谈Vue3.0之前你必须知道的TypeScript实战技巧
Sep 11 Javascript
详解如何使用React Hooks请求数据并渲染
Oct 18 Javascript
JS+CSS实现动态时钟
Feb 19 #Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 #Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 #Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 #Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 #Vue.js
Vue如何实现变量表达式选择器
Feb 18 #Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 #Vue.js
You might like
php Static关键字实用方法
2010/06/04 PHP
php实现可用于mysql,mssql,pg数据库操作类
2014/12/13 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
CentOS 7.2 下编译安装PHP7.0.10+MySQL5.7.14+Nginx1.10.1的方法详解(mini版本)
2016/09/01 PHP
Yii2中添加全局函数的方法分析
2017/05/04 PHP
PHP批斗大会之缺失的异常详解
2019/07/09 PHP
javascript call和apply方法
2008/11/24 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
无阻塞加载脚本分析[全]
2011/01/20 Javascript
javascript 实现简单的table排序及table操作练习
2012/12/28 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
浅谈jQuery中height与width
2015/07/06 Javascript
jQuery 3 中的新增功能汇总介绍
2016/06/12 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
Layui Form 自定义验证的实例代码
2019/09/14 Javascript
layui form.render('select', 'test2') 更新渲染的方法
2019/09/27 Javascript
[01:53]3.19 DOTA2发布会 现场精彩Coser表演
2014/03/25 DOTA
Python输出汉字字库及将文字转换为图片的方法
2016/06/04 Python
python文本数据相似度的度量
2018/03/12 Python
Python读写/追加excel文件Demo分享
2018/05/03 Python
介绍一下UNIX启动过程
2013/11/14 面试题
预备党员思想汇报
2014/01/08 职场文书
面试后感谢信
2014/02/01 职场文书
《灯光》教学反思
2014/02/08 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
学习党的群众路线对照检查材料
2014/09/29 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书
话题作文之自信作文
2019/11/15 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
jupyter notebook保存文件默认路径更改方法汇总(亲测可以)
2021/06/09 Python
python解析json数据
2022/04/29 Python