jQuery 写的简单打字游戏可以提示正确和错误的次数

前端技术 2023/09/09 JavaScript 
var off_x; //横坐标 
var count=0; //总分 
var speed=5000; //速度,默认是5秒. 
var keyErro=0; //输入错误次数 
var keyRight=0; //输入正确的次数 

//组织字母 
var charArray=new Array(\"A\", \"B\", \"C\", \"D\", \"E\", \"F\", \"G\", \"H\", \"I\", \"J\", \"K\", \"L\", \"M\", \"N\", \"O\", \"P\", \"Q\", \"R\", \"S\", \"T\", \"U\", \"V\", \"W\", \"X\", \"Y\", \"Z\"); 
//按键码数组 
var arrCode=new Array(); 
for(var i=65;i<=90;i++){ 
arrCode[i-65]=i; 
} 
//随机生产一个字母 
var randomChar=function(){ 
off_x=Math.random()*500+5; //在div横坐标 
//off_y=Math.random()*500-10; //在div纵坐标 
var c=charArray[parseInt(Math.random()*25)]; //随机生成一个字母 
var charHtml=\" <div class=\'char\' id=\'\"+c+\"\' style=\'left: \"+off_x+\"px;color:\"+colorBox()+\"\'>\"+c+\"</div>\"; 
$(\"#div1\").append(charHtml); 
}; 

var colorBox=function(){ 
Color=[]; //用数组存放颜色的样式 
Color[0]=\"#ff2211\"; 
Color[1]=\"#ff3311\"; 
Color[2]=\"#ff5511\"; 
Color[3]=\"#ff8811\"; 
Color[4]=\"#ffBB99\"; 
Color[5]=\"#1ff4f1\"; 
Color[6]=\"#ff5566\"; 
Color[7]=\"#668899\"; 
Color[8]=\"#99BBfA\"; 
Color[9]=\"#fECECC\"; 
return Color[parseInt(Math.random()*10)]; //随机生颜色. 
} 

//每隔三秒就调用些方法生产字母 
function accrueChar(){ 
//把随机出来的放在动画队列里 
var _sildeFun=[ 
//把要执行的动画依次放入一个数组里 
function(){$(\'#div1 div\').animate({top:\'+=470px\'},speed,function(){ 
//当动画执行完时,就删除 
$(this).remove(); 
count-=10; 
$(\"input[type=\'text\']\").attr({\"value\":count}); 
});} 
]; 
//将函数组放入slideList动画队列里 
$(\"#div1\").queue(\'slideList\',_sildeFun); 
var _takeStart=function(){ 
//从队列最前端移除一个队列函数，并执行他。 
$(\"#div1\").dequeue(\"slideList\"); 
}; 

function randCharHandle(){ 
randomChar(); 
_takeStart(); 

} 
randCharHandle(); 
} 

//健码的处理 
function keyCode(event){ 
var keyValue = event.keyCode; 
var flag=false; 
//alert(keyValue); 
for(var i=0;i<=arrCode.length;i++){ 
if(keyValue==arrCode[i]&&$(\"#\"+charArray[i]+\"\").text()!=\"\"){ 

//选对后停止一秒 
$(\"#\"+charArray[i]+\"\").stop(1000).remove(); 
//选对就加10分 
count+=10; 
$(\"input[type=\'text\']\").attr({\"value\":count}); 
$(\"#right\").text(keyRight); 

flag=true; 
break; 
} 
} 
if(flag){ 
flag=false; 
keyRight++; 
$(\"#right\").text(keyRight); 

}else{ 
keyErro++; 
$(\"#erro\").text(keyErro); 
} 
} 

$(function(){ 

//加速 
$(\"input[value=\'加速++\']\").click(function(){ 
if(speed>0) 
speed-=1000; 
}); 

//减速 
$(\"input[value=\'减速--\']\").click(function(){ 
speed+=1000; 
}); 


}); 
window.setInterval(\"accrueChar()\",1500);

/*******************************************HTML页面***************************************************/ 

<html> 
<head> 
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"> 
<script type=\"text/javascript\" src=\"../../jQuery/jquery-1.8.3.js\"></script> 
<script type=\"text/javascript\" src=\"test.js\"></script> 
<title>打字游戏</title> 
<style type=\"text/css\"> 
#div1{ 
border: 2px red solid; 
width:500px; 
height: 500px; 
background-color: black; 
} 
.char{ 
width: 20px; 
height:20px; 
position:absolute; 
font: 40px; 

} 
</style> 
</head> 
<body onkeypress=\"keyCode(event)\"> 
<div id=\"div1\"> 

</div> 
<div> 
<br>总数:<input type=\"text\" readonly=\"readonly\"> 
<input type=\"button\" value=\"加速++\"> 
<input type=\"button\" value=\"减速--\"> 
<br>错误次数:<label id=\"erro\"></label> 
<br>正确次数:<label id=\"right\"></label> 
</div> 
</body> 
</html>

本文地址：https://www.stayed.cn/item/24487

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案