jQuery 寫的簡單打字游戲可以提示正確和錯誤的次數(shù)

更新時間：2014年07月01日 09:50:40 投稿：whsnow

這篇文章主要介紹了使用jQuery寫的簡單打字游戲可以提示正確和錯誤的次數(shù),需要的朋友可以參考下

var off_x; //橫坐標 
var count=0; //總分 
var speed=5000; //速度,默認是5秒. 
var keyErro=0; //輸入錯誤次數(shù) 
var keyRight=0; //輸入正確的次數(shù) 

//組織字母 
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"); 
//按鍵碼數(shù)組 
var arrCode=new Array(); 
for(var i=65;i<=90;i++){ 
arrCode[i-65]=i; 
} 
//隨機生產(chǎn)一個字母 
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=[]; //用數(shù)組存放顏色的樣式 
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)]; //隨機生顏色. 
} 

//每隔三秒就調(diào)用些方法生產(chǎn)字母 
function accrueChar(){ 
//把隨機出來的放在動畫隊列里 
var _sildeFun=[ 
//把要執(zhí)行的動畫依次放入一個數(shù)組里 
function(){$('#div1 div').animate({top:'+=470px'},speed,function(){ 
//當(dāng)動畫執(zhí)行完時,就刪除 
$(this).remove(); 
count-=10; 
$("input[type='text']").attr({"value":count}); 
});} 
]; 
//將函數(shù)組放入slideList動畫隊列里 
$("#div1").queue('slideList',_sildeFun); 
var _takeStart=function(){ 
//從隊列最前端移除一個隊列函數(shù)，并執(zhí)行他。 
$("#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>總數(shù):<input type="text" readonly="readonly"> 
<input type="button" value="加速++"> 
<input type="button" value="減速--"> 
<br>錯誤次數(shù):<label id="erro"></label> 
<br>正確次數(shù):<label id="right"></label> 
</div> 
</body> 
</html>

您可能感興趣的文章: