服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - js教程 - JavaScript实现打字游戏

JavaScript实现打字游戏

2022-01-21 15:22一颗不甘坠落的流星 js教程

这篇文章主要为大家详细介绍了JavaScript实现打字游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

效果图:

JavaScript实现打字游戏

JavaScript实现打字游戏

JavaScript实现打字游戏

需求分析:

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

源代码:

HTML部分

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

css部分

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
/*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主体代码,无动画特效版

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<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.为了简化代码,先封装一些常用的自定义构造函数

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<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>

总代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/qq_45677671/article/details/113653752

延伸 · 阅读

精彩推荐
  • js教程原生JavaScript实现留言板

    原生JavaScript实现留言板

    这篇文章主要为大家详细介绍了原生JavaScript实现留言板,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    栋栋很优秀啊5442021-12-29
  • js教程微信小程序onShareTimeline()实现分享朋友圈

    微信小程序onShareTimeline()实现分享朋友圈

    这篇文章主要给大家介绍了关于微信小程序onShareTimeline()实现分享朋友圈的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定...

    远航_6122021-12-27
  • js教程JS相册图片抖动放大展示效果的示例代码

    JS相册图片抖动放大展示效果的示例代码

    这篇文章主要介绍了JS相册图片抖动放大展示效果的示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...

    weixin_339631896692022-01-12
  • js教程JS实现选项卡插件的两种写法(jQuery和class)

    JS实现选项卡插件的两种写法(jQuery和class)

    这篇文章主要为大家详细介绍了JS实现选项卡插件的两种写法:jQuery和class,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参...

    南柯Seven11992021-12-22
  • js教程微信小程序实现登录注册功能

    微信小程序实现登录注册功能

    这篇文章主要介绍了微信小程序实现登录注册功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    保护我方豆豆5382021-12-22
  • js教程前端经常会用到的JavaScript方法封装

    前端经常会用到的JavaScript方法封装

    前端经常会用到的JavaScript方法封装都有哪些呢?我们一起来看一下吧!...

    Find一只程序猿11382021-12-30
  • js教程JS+CSS实现动态时钟

    JS+CSS实现动态时钟

    这篇文章主要为大家详细介绍了JS+CSS实现动态时钟,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    易点都不懒4992022-01-21
  • js教程JavaScript canvas实现雨滴特效

    JavaScript canvas实现雨滴特效

    这篇文章主要为大家详细介绍了JavaScript canvas实现雨滴特效,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    huangdong19317012021-12-29