jQuery 寫(xiě)的簡(jiǎn)單打字游戲可以提示正確和錯(cuò)誤的次數(shù)
var off_x; //橫坐標(biāo) var count=0; //總分 var speed=5000; //速度,默認(rèn)是5秒. var keyErro=0; //輸入錯(cuò)誤次數(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; } //隨機(jī)生產(chǎn)一個(gè)字母 var randomChar=function(){ off_x=Math.random()*500+5; //在div橫坐標(biāo) //off_y=Math.random()*500-10; //在div縱坐標(biāo) var c=charArray[parseInt(Math.random()*25)]; //隨機(jī)生成一個(gè)字母 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)]; //隨機(jī)生顏色. } //每隔三秒就調(diào)用些方法生產(chǎn)字母 function accrueChar(){ //把隨機(jī)出來(lái)的放在動(dòng)畫(huà)隊(duì)列里 var _sildeFun=[ //把要執(zhí)行的動(dòng)畫(huà)依次放入一個(gè)數(shù)組里 function(){$('#div1 div').animate({top:'+=470px'},speed,function(){ //當(dāng)動(dòng)畫(huà)執(zhí)行完時(shí),就刪除 $(this).remove(); count-=10; $("input[type='text']").attr({"value":count}); });} ]; //將函數(shù)組放入slideList動(dòng)畫(huà)隊(duì)列里 $("#div1").queue('slideList',_sildeFun); var _takeStart=function(){ //從隊(duì)列最前端移除一個(gè)隊(duì)列函數(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()!=""){ //選對(duì)后停止一秒 $("#"+charArray[i]+"").stop(1000).remove(); //選對(duì)就加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頁(yè)面***************************************************/
<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>錯(cuò)誤次數(shù):<label id="erro"></label> <br>正確次數(shù):<label id="right"></label> </div> </body> </html>
相關(guān)文章
jquery實(shí)現(xiàn)動(dòng)態(tài)畫(huà)圓
這篇文章主要給大家分享了一段jquery實(shí)現(xiàn)動(dòng)態(tài)畫(huà)圓代碼,需要的朋友可以參考下2014-12-12jQuery簡(jiǎn)單操作cookie的插件實(shí)例
這篇文章主要介紹了jQuery簡(jiǎn)單操作cookie的插件,以實(shí)例形式分析了jQuery操作cookie的插件功能定義與使用技巧,需要的朋友可以參考下2016-01-01jquery簡(jiǎn)單插件制作(fn.extend)完整實(shí)例
這篇文章主要介紹了jquery簡(jiǎn)單插件制作(fn.extend)方法,結(jié)合完整實(shí)例形式分析了jQuery fn.extend擴(kuò)展插件的實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-05-05Jquery ajax請(qǐng)求導(dǎo)出Excel表格的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇Jquery ajax請(qǐng)求導(dǎo)出Excel表格的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06jQuery學(xué)習(xí)筆記之Ajax用法實(shí)例詳解
這篇文章主要介紹了jQuery學(xué)習(xí)筆記之Ajax用法,結(jié)合實(shí)例形式較為詳細(xì)的分析總結(jié)了jQuery中ajax的相關(guān)使用技巧,包括ajax請(qǐng)求、載入、處理、傳遞等,需要的朋友可以參考下2015-12-12基于Bootstrap和jQuery構(gòu)建前端分頁(yè)工具實(shí)例代碼
本文給大家介紹基于Bootstrap和jQuery構(gòu)建前端分頁(yè)工具實(shí)例代碼,包括前端分頁(yè)的優(yōu)缺點(diǎn)和解決辦法,對(duì)jquery bootstrap分頁(yè)知識(shí)感興趣的朋友一起通過(guò)本文學(xué)習(xí)吧2016-11-11Tab頁(yè)界面,用jQuery及Ajax技術(shù)實(shí)現(xiàn)
從桌面開(kāi)發(fā)的時(shí)代開(kāi)始,Tab頁(yè)就是一個(gè)優(yōu)異的界面布局形式,兼有菜單的樣式和充分復(fù)用有限的界面的優(yōu)點(diǎn)。2009-09-09