javascript实现简单打字游戏

时间：2021-05-26

本文实例为大家分享了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;}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章