首页
所有分类
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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
jQuery查询数据返回object和字符串影响原因是什么
Aug 09 Javascript
js螺旋动画效果的具体实例
Nov 15 Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 Javascript
JavaScript使用Range调色及透明度实例
Sep 25 Javascript
JS动态计算移动端rem的解决方案
Oct 14 Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
JQuery元素快速查找与操作
Apr 22 jQuery
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
微信小程序实现点击按钮后修改颜色
Dec 05 Javascript
Vue记住滚动条和实现下拉加载的完美方法
Jul 31 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
SQLite3(1) procedure(1) Tablespace(1) commit(1) pytz(1) GoFrame(3) 分布式锁(3) harbor(1) 短信验证码(1) 内置函数(1)
You might like
php 图像函数大举例（非原创）
2009/06/20 PHP
百度工程师讲PHP函数的实现原理及性能分析（一）
2015/05/13 PHP
学习YUI.Ext基础第一天
2007/03/10 Javascript
表单(FORM)的一些实用效果代码
2007/03/25 Javascript
基于jquery的滚动新闻列表
2010/06/19 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
jquery通过visible来判断标签是否显示或隐藏
2014/05/08 Javascript
jquery实现浮动在网页右下角的彩票开奖公告窗口代码
2015/09/04 Javascript
jquery设置表单元素为不可用的简单代码
2016/07/04 Javascript
纯JS焦点图特效实例(可一个页面多用)
2016/12/07 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
2017/03/31 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
vue实现微信二次分享以及自定义分享的示例
2019/03/20 Javascript
vue使用@scroll监听滚动事件时，@scroll无效问题的解决方法详解
2019/10/15 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
Python操作MySQL数据库的方法
2018/06/20 Python
浅谈Python里面小数点精度的控制
2018/07/16 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
Python分析彩票记录并预测中奖号码过程详解
2019/07/09 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
python3.5 cv2 获取视频特定帧生成jpg图片
2019/08/28 Python
python实现差分隐私Laplace机制详解
2019/11/25 Python
Python:slice与indices的用法
2019/11/25 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
Python3 requests模块如何模仿浏览器及代理
2020/06/15 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
认错检讨书
2014/10/02 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
选调生挂职锻炼工作总结
2015/10/23 职场文书
青少年法制教育心得体会
2016/01/14 职场文书
小学英语教学反思范文
2016/02/15 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
Golang 对es的操作实例
2022/04/20 Golang