<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>传智打字游戏</title> <style type="text/css"> .label{ position:absolute;left: 0px; } </style> <script type="text/javascript" src="https://www.jb51.net/game.js"></script> </head> <body> <div></div> <input type="button" value="开始游戏" οnclick="startGame(this)"/> <input type="button" value="停止游戏" οnclick="stopGame()"/> </body> </html>
var CODE = "QWERTYUIOPASDFGHJKLZXCVBNM"; var codeArray = []; var number = 0; //创建随机字母 function createCode(){ //0-25 var index = parseInt(Math.random()*26); return CODE.charAt(index); }; //创建显示label方法 function createLabel(code){ /** * <label> A </label> */ var label = document.createElement("label"); label.className = "label"; label.style.top = "50px"; label.innerHTML = code; label.code = code; var html = document.documentElement; //所有label标签的x坐标 var labelX = parseInt(Math.random()*html.clientWidth); if(labelX>100){ labelX-=20; } label.style.left = labelX+"px"; return label; } window.onload = function(){ document.getElementById("startBtn").disabled = false; //注册键盘事件 document.documentElement.οnkeydοwn=function(event){ var keyCode = event.keyCode; //获取按下的吗 var code = String.fromCharCode(keyCode);//A-Z for ( var i = 0; i < codeArray.length; i++) { //label标签 var label = codeArray[i]; if(label.code==code){ clearInterval(label.interval_id); label.parentNode.removeChild(label); codeArray.splice(i,1); number+=10; document.getElementById("msg").innerHTML = number+"分"; break; } } }; }; //让label标签慢慢的从上向下移动 function runLabelTop(label){ //获取页面的高度 var height = Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight); label.interval_id = setInterval(function(){ //50px var top = parseInt(label.style.top); top+=1; //判断label是否已经超过页面的高度 if(top>height-30){ removeLabel(label,false); }else{ label.style.top = top+"px"; } },10); } //flag = false用户没有按下该字母 function removeLabel(label,flag){ clearInterval(label.interval_id); label.parentNode.removeChild(label); codeArray.shift(); number-=20; document.getElementById("msg").innerHTML = number+"分"; } var game_id = null; //开始游戏 function startGame(startButton){ startButton.disabled = true; game_id = setInterval(function(){ //创建要显示的字符 var code =createCode(); //创建一个label显示字符 var label = createLabel(code); //让label标签慢慢向下移动,修改标签的style.top属性 runLabelTop(label); //把label标签节加入到页面中 document.body.appendChild(label); codeArray.push(label); },1000); } //停止游戏 function stopGame(){ clearInterval(game_id); for ( var i = 0; i < codeArray.length; i++) { clearInterval(codeArray[i].interval_id); codeArray[i].parentNode.removeChild(codeArray[i]); } codeArray = []; document.getElementById("startBtn").disabled = false; }