JavaScript 타이핑 게임 코드-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JavaScript 타이핑 게임 코드

高洛峰

Feb 06, 2017 am 11:04 AM

기능 모듈: 프로그램 설계:
1. 게임 시간 선택 및 카운트다운 표시 1. 전역 변수 정의
2. 영문자 수 선택 2. 게임 시간 기능 제어
🎜> 3. 통계 점수 3. 애니메이션 효과
4. 메뉴 옵션 4. 글자 그림이 나타나는 시간 설정
5. 판정 기능
6. 게임 메뉴
7. 게임 시간 옵션
8. 게임 시간 표시
9. 게임 난이도 옵션
10. 게임 점수
🎜>

메인 코드 디자인 :

//-------全局变量------- 
var data={ 
"10":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/A.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"],"11":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/B.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"],"12":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/C.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"],"13":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/D.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"], 
"14":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/E.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"],"15":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/F.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"],"16":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/G.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"],"17":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/H.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"], 
"18":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/I.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"],"19":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/J.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"],"20":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/K.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"],"21":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/L.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"], 
"22":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/M.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"],"23":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/N.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"],"24":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/O.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"],"25":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/P.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"], 
"26":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/Q.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"],"27":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/R.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"],"28":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/S.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"],"29":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/T.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"], 
"30":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/U.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"],"31":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/V.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"],"32":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/W.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"],"33":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/X.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"], 
"34":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/Y.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"],"35":["<img  src="/static/imghw/default1.png"  data-src="https://img.php.cn//upload/image/291/249/701/1486350190844834.png"  class="lazy"  src=&#39;images/Z.gif&#39;/ alt="JavaScript 타이핑 게임 코드" >"] 
}; 
var datas=new Array();//随机出现的 class样式以数组中偶数存储，图片以数组中奇数存储 
var now=new Date(); 
var Image; //随机出现图片 
var Divs;//随机出现层 
var count=0;//积分系统 
var key;//键盘的值 
var amounts=1;//出现字母图片的个数 
var gametime=30;//控制游戏的时间 
var gametimes;//时间为0 
var gametimess=30;//显示时钟变量 
var time1;//setInterval变量 
var time2=5000;//设定setInterval的时间 
var time3; 
var tab;//用来记录，传递tabindex焦点位置的值 
//--------这样写为了兼容FF浏览器------- 
var plug = { 
addEvent:function(o,e,f){ 
if(o.addEventListener){ 
o.addEventListener(e,f,false); 
} 
else if(o.attachEvent){ 
o.attachEvent("on"+e,f); 
} 
} 
} 
plug.addEvent(window,"load",function(){Focus()});//兼容FF浏览器 
//------1.控制游戏时间函数-------- 
function Gametime(){ 
for(gametimes=gametime;gametimes>=0;gametimes--) { 
window.setTimeout(&#39;Show(&#39; + gametimes + &#39;)&#39;,(gametime-gametimes+2) * 1000); 
} 
} 
function Show(gametimes){ 
if(gametimes==0){ 
clearInterval(time1);//停止游戏 
alert("游戏结束!你的得分为:"+count); 
$("#main").empty();//清除main中的div 
$(".gameapply").empty(); 
$("#select1").empty(); 
$("#select2").empty(); 
count=0;//得分清空为0 
Score();//让分数框显示为0 
Focus();//重新生成菜单选项 
} 
} 
//---------2.动画效果--------- 
function fun(){ 
datas.length=0; 
for(var i=0;i<amounts;i++){ 
Image=parseInt(Math.random() * 26)+10;//随机出现字母图片 
datas.push(Image);//图片以数组中偶数存储,从零开始 
Divs=parseInt(Math.random() * 8)+1;//随机出现层的class样式即层的不同位置 
datas.push(Divs);//样式以数组中奇数存储 
var time=parseInt(Math.random() * 2000)+3000;//完成动画的时间 
if(time<5000){ 
var $divs=$("<div class=&#39;divPop"+Divs+"&#39;>"+data[Image]+"</div>"); 
$("#main").append($divs); 
//-----JQ动画函数---- 
$(".divPop"+Divs).animate( 
{"top":$(window).height() - $(".divPop"+Divs).height() - $(".divPop"+Divs).position().top},time,function(){$("#main").empty()}) 
} 
} 
} 
//--------3.设定字母图片出现的时间------ 
function sets(){ 
time1 = setInterval(fun,time2); 
} 
//---------4.绑定键盘--------- 
//---------兼容FF浏览器--------- 
document.onkeydown = function keydown(e){ 
e = e||window.event; 
var key = e.charCode||e.keyCode 
select(key) 
} 
//---------5.判断函数--------- 
function select(key){ 
if(key==13){ 
switch(tab){ 
case 0:Gametime();Gametimeselect();time3=setInterval(countdown,1000);sets();$("#select").hide(2000);break;//开始游戏 
case 1:Gametime();Gametimeselect();time3=setInterval(countdown,1000);sets();$("#select").hide(2000);break;//开始游戏 
case 2:alert("可以在左侧设置游戏选项");break; 
case 3:window.opener=null;window.open(&#39;&#39;,&#39;_self&#39;);window.close();break;//退出游戏 
case 4:window.opener=null;window.open(&#39;&#39;,&#39;_self&#39;);window.close();break;//退出游戏 
} 
} 
for(var j=0;j<datas.length;j=j+2){//为了让data1里面样式和图片的值不重复（即奇数跟偶数的不可能重复，m的值或者k的值要相差一定的值） 
if(key==datas[j]+55){ 
$(".divPop"+datas[j+1]).hide();//key值相等,隐藏该层 
delete datas[j]; //为了避免有重复的字母，所以数组里面每遍历到一个(key==datas[j]+55)都要删除这个值 
count+=10; 
Score(); 
break; 
} 
} 
} 
//---------6.游戏菜单------- 
function Focus(){ 
//---------初始化游戏界面-------- 
var $selects=$("<div id=&#39;select&#39;><table id=\"tables\"><tr><td><input class=\"inputs\" type=\"text\"value=\"游戏开始\"/></td></tr><tr><td><input class=\"inputs\" type=\"text\" value=\"游戏选项\"/></td></tr><tr><td><input class=\"inputs\" type=\"text\" value=\"退出游戏\"/></td></tr></table></div>"); 
$(".gameapply").append($selects); 
for(var i=30;i<=300;i=i+30){ 
$("#select1").append(&#39;<option>&#39; + i+ &#39;</option>&#39;) 
} 
for(var j=1;j<=9;j++){ 
$("#select2").append(&#39;<option>&#39; + j+ &#39;</option>&#39;) 
} 
//---------开始时取得第一个input的焦点-------- 
$(".inputs:first").trigger("focus").addClass("input1"); 
tab=1;//因为第一个焦点是没法输入Enter，所以要调用键盘输入事件 
var tabIndex=1; 
//----------获取tr行数，input个数-------- 
$("#tables").find("tr").each(function(r) { 
$(this).find("input").attr("tabindex", r+1);//tabindex为焦点位置的值，赋初值为1，遍历为1-2-3-4 
}); 
//---------响应input的键盘上下操作 
$("#tables .inputs").bind("keydown", function(e){ 
tabIndex = parseInt($(this).attr("tabindex"));//取得当前tabindex焦点的值 
switch(e.which){ 
case 38://向上 
tabIndex-=1; 
tab=tabIndex; 
break; 
case 40://向下 
tabIndex+=1; 
tab=tabIndex; 
break; 
default: 
return; 
} 
//--------判断tabIndex焦点的值 
if (tabIndex > 0 && tabIndex < 4) { 
$(".inputs[tabindex=" + tabIndex + "]").focus().addClass("input1");//当前input获取焦点 
for(var i=0;i<=4;i++) 
{ 
if(i==tabIndex){ 
break; 
} 
else{ 
$(this).removeClass("input1"); 
} 
} 
keydown(); 
return false; 
} 
return true; 
}); 
} 
//--------7.游戏时间选项--------- 
function Gametimeselect(){ 
var option=document.getElementById("select1"); 
for(var i=0;i<option.length;++i){ 
if(option[i].selected) { 
gametime=option.options[i].text; 
gametimess=gametime; 
} 
} 
} 
//-----8.显示游戏时间------- 
function countdown(){ 
var timeshows=document.getElementById("timeshow"); 
if(timeshows){//如果网页速度很慢的话，可能定时器运行的时候控件还没有加载 
if(gametimess<0){ 
clearInterval(time3);//停止计时器 
} 
else{ 
timeshows.value=gametimess; 
gametimess--; 
} 
} 
} 
//--------9.游戏难度选项--------- 
function Gameselectamount(){ 
var option=document.getElementById("select2"); 
for(var i=0;i<option.length;++i){ 
if(option[i].selected) { 
amounts=option.options[i].text; 
} 
} 
} 
//---------10.游戏得分----------- 
function Score(){ 
var sum=document.getElementById("sum"); 
sum.value=count; 
if(count==0){ //初始化文本框分数为0 
sum.value=count; 
} 
}

로그인 후 복사

요약 : 시간 간격 이후 코드가 상대적으로 길어서 최적화가 잘 안된 부분이 있는데, 바로 글자가 나타나는 시간 간격이 너무 길다는 것입니다. 코드는 참고용입니다

JavaScript 타이핑 게임 코드와 관련된 더 많은 글은 PHP 중국어 홈페이지를 주목해주세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

뜨거운 도구

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7533

Cakephp 튜토리얼

1379

Steam의 계정 이름 형식은 무엇입니까?

Win11 활성화 키 영구

NYT 연결 힌트와 답변

Related knowledge

내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까? Mar 18, 2025 pm 03:12 PM

기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.

브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까? Mar 18, 2025 pm 03:14 PM

이 기사는 브라우저에서 JavaScript 성능을 최적화하기위한 전략에 대해 설명하고 실행 시간을 줄이고 페이지로드 속도에 미치는 영향을 최소화하는 데 중점을 둡니다.

프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까? Apr 04, 2025 pm 02:42 PM

프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...

브라우저 개발자 도구를 사용하여 JavaScript 코드를 효과적으로 디버그하려면 어떻게해야합니까? Mar 18, 2025 pm 03:16 PM

이 기사는 브라우저 개발자 도구를 사용하여 효과적인 JavaScript 디버깅, 중단 점 설정, 콘솔 사용 및 성능 분석에 중점을 둡니다.

누가 더 많은 파이썬이나 자바 스크립트를 지불합니까? Apr 04, 2025 am 12:09 AM

기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.