html简单打字游戏,javascript实现的简单打字游戏-优快云博客

本文介绍了一个使用JavaScript编写的简单打字游戏，该游戏通过不断生成随机字母并要求玩家按键匹配来提升打字速度与准确性。文章详细展示了游戏的核心代码逻辑，包括随机字母生成、显示、计分机制及游戏流程控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

传智打字游戏

.label{

position:absolute;left: 0px;

}

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){

/**

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;

}