本文实例为大家分享了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: 1 s; animation-duration: 1 s; -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: 2 s; animation-duration: 2 s; } .animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { -webkit-animation-duration: . 75 s; animation-duration: . 75 s; } @-webkit-keyframes zoomIn { from { opacity: 0 ; -webkit-transform: scale 3 d(. 3 , . 3 , . 3 ); transform: scale 3 d(. 3 , . 3 , . 3 ); } 50% { opacity: 1 ; } } @keyframes zoomIn { from { opacity: 0 ; -webkit-transform: scale 3 d(. 3 , . 3 , . 3 ); transform: scale 3 d(. 3 , . 3 , . 3 ); } 50% { opacity: 1 ; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } .animated { -webkit-animation-duration: 1 s; animation-duration: 1 s; -webkit-animation-fill-mode: both ; animation-fill-mode: both ; } @-webkit-keyframes shake { from, to { -webkit-transform: translate 3 d( 0 , 0 , 0 ); transform: translate 3 d( 0 , 0 , 0 ); } 10% , 30% , 50% , 70% , 90% { -webkit-transform: translate 3 d( -10px , 0 , 0 ); transform: translate 3 d( -10px , 0 , 0 ); } 20% , 40% , 60% , 80% { -webkit-transform: translate 3 d( 10px , 0 , 0 ); transform: translate 3 d( 10px , 0 , 0 ); } } @keyframes shake { from, to { -webkit-transform: translate 3 d( 0 , 0 , 0 ); transform: translate 3 d( 0 , 0 , 0 ); } 10% , 30% , 50% , 70% , 90% { -webkit-transform: translate 3 d( -10px , 0 , 0 ); transform: translate 3 d( -10px , 0 , 0 ); } 20% , 40% , 60% , 80% { -webkit-transform: translate 3 d( 10px , 0 , 0 ); transform: translate 3 d( 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