首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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实现打字游戏

- Author -

一颗不甘坠落的流星

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
Jan 15 Javascript
ScrollDown的基本操作示例
Jun 09 Javascript
Jquery实现的一种常用高亮效果示例代码
Jan 28 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
jQuery对象和DOM对象之间相互转换的方法介绍
Feb 28 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
jQuery实现一个简单的验证码功能
Jun 26 jQuery
微信小程序中的店铺评分组件及vue中用svg实现的评分显示组件
Nov 16 Javascript
JS/HTML5游戏常用算法之路径搜索算法 A*寻路算法完整实例
Dec 14 Javascript
vue Element左侧无限级菜单实现
Jun 10 Javascript
如何使JavaScript休眠或等待
Apr 27 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
queue(1) RecyclerView(1) 腾讯云(1) 内存池(1) 九宫格(5) TaiShan(1) Hadoop(1) JDK(1) 云服务器(1) Foreign Key(1)
You might like
关于Intype一些小问题的解决办法
2008/03/28 PHP
PHP中SESSION使用中的一点经验总结
2012/03/30 PHP
php-fpm.conf配置文件中文说明详解及重要参数说明
2018/10/10 PHP
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
js获取页面description的方法
2015/05/21 Javascript
原生javascript实现自动更新的时间日期
2016/02/12 Javascript
JavaScript中访问id对象 属性的方式访问属性(实例代码)
2016/10/28 Javascript
AngularJS extend用法详解及实例代码
2016/11/15 Javascript
JS匿名函数类生成方式实例分析
2016/11/26 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
ES6中Math对象新增的方法实例详解
2017/04/25 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
Three.js基础学习之场景对象
2017/09/27 Javascript
Python的print用法示例
2014/02/11 Python
python学习之matplotlib绘制散点图实例
2017/12/09 Python
Django基础知识与基本应用入门教程
2018/07/20 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
Python实现的插入排序，冒泡排序，快速排序，选择排序算法示例
2019/05/04 Python
基于python进行抽样分布描述及实践详解
2019/09/02 Python
基于Pytorch SSD模型分析
2020/02/18 Python
解决Python Matplotlib绘图数据点位置错乱问题
2020/05/16 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
python中pickle模块浅析
2020/12/29 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
Python3+Appium安装及Appium模拟微信登录方法详解
2021/02/16 Python
向全球直邮输送天然健康产品：iHerb.com
2020/05/03 全球购物
法国包包和行李箱销售网站：Bagage24.fr
2020/03/24 全球购物
经贸专业毕业生求职信范文
2014/05/01 职场文书
护理医院见习报告
2014/11/03 职场文书
红旗渠导游词
2015/02/09 职场文书
2015年班组长工作总结
2015/04/10 职场文书
毕业论文答辩开场白和结束语
2015/05/27 职场文书
十月围城观后感
2015/06/08 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
应届生们该怎么书写求职信？
2019/07/05 职场文书
详解Vue的列表渲染
2021/11/20 Vue.js