这篇文章主要介绍了javascript实现简单打字游戏的方法，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
具体内容如下
<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="game.js"></script> </head> <body> <div id="msg"></div> <input id="startBtn" 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 class="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; }感谢你能够认真阅读完这篇文章，希望小编分享的“javascript实现简单打字游戏的方法”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
