代码如下 :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>打字游戏</title>
<style type="text/css">
b{
position:absolute;
}
</style>
<script type="text/javascript">
function startGame(){
var words = "QWERTYUIOPASDFGHJKLZXCVBNM";//要生成的所有字母
var wordArray = [];//存放产生的字母的数组
var makeWordPer = 500;//字母产生的间隔时间
var downPer=200;//字母下落间隔时间
var downLen = 10;//每次下落的距离
var colors = ["red","green","blue","orange"];//字母可能出现的颜色
//点击开始游戏后隐藏按钮
var btn = document.getElementById("startBtn");//获得按钮元素
btn.style.display="none";
//周期性生成字母
setInterval(function(){
var index = Math.random()*26;//字母在字符串中的索引
var word = words.charAt(index);//获得生成的字母
var b = document.createElement("b");
b.innerHTML=word;//将获得的字母添加到<b>标签中去
var width = document.documentElement.clientWidth;//浏览器宽度
b.style.left = Math.random()*width-20+"px";//字母出现位置,预留20px防止字母显示到页面外
b.style.top = "0px";
b.style.color = colors[parseInt(Math.random()*colors.length)];//字母颜色随机产生
wordArray.push(b);
document.body.appendChild(b);
},makeWordPer);
//让字母向下掉
setInterval(function(){
for(var i = 0;i<wordArray.length;i++){
var w = wordArray[i];//取到<b>标签
var oldTop = parseInt(w.style.top);
var newTop = oldTop+downLen;
var pageHeight = parseInt(document.documentElement.clientHeight)-20;//页面高度,同样预留20
if(pageHeight>newTop){
w.style.top = newTop+"px";//设置新的top值,实现字母掉落效果
}else{
//若字母落到底部则消失
w.parentNode.removeChild(w);
wordArray.splice(i,1);
i--;//恢复索引
var score = document.getElementById("score");
score.innerHTML = parseInt(score.innerHTML)-20;//失败一次得分减少20
if(parseInt(score.innerHTML)<-100){
location.href = "game.html";//失分超过100则重新开始游戏
}
}
}
},downPer);
//为页面添加键盘事件监听
document.documentElement.οnkeydοwn=function(event){
var keyCode = event.keyCode;
var b = String.fromCharCode(keyCode);
for(var i = 0;i<wordArray.length;i++){
var j = wordArray[i].innerHTML;
if(j==b){//若按键正确,则消除屏幕上的字母
wordArray[i].parentNode.removeChild(wordArray[i]);
wordArray.splice(i,1);
var score = document.getElementById("score");
score.innerHTML = parseInt(score.innerHTML)+10;//正确消除一次得分增加10
}
}
}
}
</script>
</head>
<body>
<button id="startBtn" style="color:red" οnclick="startGame()">
开始游戏
</button>
得分:<span id="score">0</span>
</body>
</html>
