效果图
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>金山打字游戏4</title>
6 <style type="text/css">
7 * {
8 margin: 0;
9 padding: 0;
10 }
11
12 body {
13 background: url(img/wall1.jpg);
14 position: absolute;
15
16 }
17
18 #g_title {
19 800px;
20 height: 50px;
21 color: #ffffff;
22 text-align: center;
23 }
24
25 #showText {
26 1000px;
27 height: 500px;
28 background: #ffffff;
29 position: absolute;
30 left: 100px;
31 border: 3px dashed black;
32 overflow: hidden;
33 }
34
35 #showScore {
36 800px;
37 height: 100px;
38 background: #ffffff;
39 position: absolute;
40 left: 100px;
41 top: 580px;
42 font-size: 50px;
43 text-align: center;
44 font-family: '微软雅黑';
45 color: #666666;
46 line-height: 80px;
47 border: 3px dashed black;
48 }
49
50 .btn {
51 position: absolute;
52 40px;
53 height: 40px;
54 overflow: hidden;
55 }
56
57 </style>
58 <script type="text/javascript">
59 var chars = new Array('a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z');
60 var score = 0;
61 //获取展示区域
62 var div = document.getElementById("showText");
63 function initPage() {
64 createChars();
65 downChar();
66
67 }
68
69
70 //创建字母
71 function createChars() {
72 window.setInterval(function () {
73 div = document.getElementById("showText");
74 var result = Math.random() * 26 + "";
75 result = result.split(".");
76 //创建button
77 var btn = document.createElement("input");
78 btn.type = "button";
79 btn.value = chars[result[0]];
80
81 btn.className = "btn";
82 btn.style.top = "50px";
83 btn.style.left = parseInt(Math.random() * 860 + 40) + "px";
84 btn.style.font = "bold 30px 宋体";
85 btn.style.color = "white";
86
87 btn.style.background = "url(img/" + (Math.random() * 3 + 1 + "").split(".")[0] + ".png)";
88 // btn.style.backgroundSize="40px 40px";
89
90 div.appendChild(btn);
91 }, 900);
92
93 }
94
95
96 //字母下落操作
97 function downChar() {
98 //获取展示区域
99 var div = document.getElementById("showText");
100 //一秒下落40px
101 window.setInterval(function () {
102 //获取所有的字母
103 var btns = div.childNodes;
104 for (var i = 0; i < btns.length; i++) {
105 var btn = btns[i];
106 //判断它是不是元素节点
107 //元素节点1 属性节点2 文本节点3
108 if (1 == btn.nodeType) {
109 var top = parseInt(btn.style.top);
110 var left = parseInt(btn.style.left);
111 if (top < 460) {
112 btn.style.top = top + 40 + "px";
113 btn.style.left = left + "px";
114
115 } else {
116 div.removeChild(btn);
117 score -= 10;
118 document.getElementById("score").innerHTML = score;
119 }
120
121
122 }
123
124
125 }
126
127 }, 1000);
128
129 }
130 //按下键盘后 相应操作
131 window.onkeyup = function () {
132 //获取显示区域
133 var div = document.getElementById("showText");
134 //获取按下键盘的值
135 var eve = window.event || event;
136 var code = eve.keyCode;
137 //获取显示区域创建出来的按钮
138 var btns = div.childNodes;
139 //遍历节点
140 for (var i = 0; i < btns.length; i++) {
141 //获取节点
142 var btn = btns[i];
143 if (1 == btn.nodeType) {
144 if (btn.value == chars[code - 65]) {
145
146 div.removeChild(btn);
147 score += 10;
148 document.getElementById("score").innerHTML = score;
149 break;
150 }
151 }
152
153 }
154
155
156 }
157
158
159 </script>
160 </head>
161 <body onload="initPage()">
162 <div id="game">
163 <div id="g_title"><h1>打字游戏</h1></div>
164
165 <div id="showText"></div>
166
167 <div id="showScore">
168 你的分数为:<span id="score">0</span> 分
169
170
171 </div>
172
173
174 </div>
175 </body>
176 </html>
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>金山打字游戏4</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: url(img/wall1.jpg);
position: absolute;
}
#g_title {
800px;
height: 50px;
color: #ffffff;
text-align: center;
}
#showText {
1000px;
height: 500px;
background: #ffffff;
position: absolute;
left: 100px;
border: 3px dashed black;
overflow: hidden;
}
#showScore {
800px;
height: 100px;
background: #ffffff;
position: absolute;
left: 100px;
top: 580px;
font-size: 50px;
text-align: center;
font-family: '微软雅黑';
color: #666666;
line-height: 80px;
border: 3px dashed black;
}
.btn {
position: absolute;
40px;
height: 40px;
overflow: hidden;
}
</style>
<script type="text/javascript">
var chars = new Array('a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z');
var score = 0;
//获取展示区域
var div = document.getElementById("showText");
function initPage() {
createChars();
downChar();
}
//创建字母
function createChars() {
window.setInterval(function () {
div = document.getElementById("showText");
var result = Math.random() * 26 + "";
result = result.split(".");
//创建button
var btn = document.createElement("input");
btn.type = "button";
btn.value = chars[result[0]];
btn.className = "btn";
btn.style.top = "50px";
btn.style.left = parseInt(Math.random() * 860 + 40) + "px";
btn.style.font = "bold 30px 宋体";
btn.style.color = "white";
btn.style.background = "url(img/" + (Math.random() * 3 + 1 + "").split(".")[0] + ".png)";
// btn.style.backgroundSize="40px 40px";
div.appendChild(btn);
}, 1000);
}
//字母下落操作
function downChar() {
//获取展示区域
var div = document.getElementById("showText");
//一秒下落40px
window.setInterval(function () {
//获取所有的字母
var btns = div.childNodes;
for (var i = 0; i < btns.length; i++) {
var btn = btns[i];
//判断它是不是元素节点
//元素节点1 属性节点2 文本节点3
if (1 == btn.nodeType) {
var top = parseInt(btn.style.top);
var left = parseInt(btn.style.left);
if (top < 460) {
btn.style.top = top + 40 + "px";
btn.style.left = left + "px";
} else {
div.removeChild(btn);
score -= 10;
document.getElementById("score").innerHTML = score;
}
}
}
}, 1000);
}
//按下键盘后 相应操作
window.onkeyup = function () {
//获取显示区域
var div = document.getElementById("showText");
//获取按下键盘的值
var eve = window.event || event;
var code = eve.keyCode;
//获取显示区域创建出来的按钮
var btns = div.childNodes;
//遍历节点
for (var i = 0; i < btns.length; i++) {
//获取节点
var btn = btns[i];
if (1 == btn.nodeType) {
if (btn.value == chars[code - 65]) {
div.removeChild(btn);
score += 10;
document.getElementById("score").innerHTML = score;
break;
}
}
}
}
</script>
</head>
<body onload="initPage()">
<div id="game">
<div id="g_title"><h1>打字游戏</h1></div>
<div id="showText"></div>
<div id="showScore">
你的分数为:<span id="score">0</span> 分
</div>
</div>
</body>
</html>