17.js实现金山打字

效果图

  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>&nbsp;分
169 
170 
171     </div>
172 
173 
174 </div>
175 </body>
176 </html>

View Code

代码：

<!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="showScore">
你的分数为：<span id="score">0</span> 分

</div>

</div>
</body>
</html>