JavaScript 타이핑 게임 code_javascript 기술-JS 튜토리얼-php.cn

JavaScript 타이핑 게임 code_javascript 기술

WBOY

풀어 주다： 2016-05-16 17:57:55

원래의

1367명이 탐색했습니다.

기능 모듈 : 프로그램 설계 :
1. 게임 시간 선택 및 카운트다운 표시 1. 전역 변수 정의
2. 표시되는 영문자 수 선택 2. 게임 시간 기능 제어
3. 통계 점수 3. 애니메이션 효과
4. 메뉴 옵션 4. 글자 그림이 나타나는 시간 설정
5. 판정 기능
6. 게임 메뉴
7. 게임 시간 옵션
8. 게임 시간 표시
　　　　　　　9. 게임 난이도 옵션
　　　　　10. 게임 점수
　
먼저 렌더링: (PS: 아트에 결함이 있습니다)
JavaScript 타이핑 게임 code_javascript 기술
메인 코드 디자인:

코드 복사 코드는 다음과 같습니다.

//-------全局变量-------
var data={
"10":["

"],"11":["

"],"12":["

"],"13":["

"],
"14":["

"],"15":["

"],"16":["

"],"17":["

"],
"18":["

"],"19":["

"],"20":["

"],"21":["

"],
"22":["

"],"23":["

"],"24":["

"],"25":["

"],
"26":["

"],"27":["

"],"28":["

"],"29":["

"],
"30":["

"],"31":["

"],"32":["

"],"33":["

"],
"34":["

"],"35":["

"]
};
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('Show(' + gametimes + ')',(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;iImage=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=$("

"+data[Image]+"

");
$("#main").append($divs);
//----JQ 애니메이션 기능----
$(".divPop" Divs). 애니메이션(
{"top":$(window).height() - $(".divPop" Divs).height() - $(".divPop" Divs).position().top},time, function(){$("#main").empty()})
}
}
}
//---------3. 시간 ------
함수 세트(){
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("게임 옵션은 다음에서 설정할 수 있습니다. left" );break;
case 3:window.opener=null;window.open('','_self');window.close();break;//게임 종료
case 4:window .opener= null;window.open('','_self');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();//키 값 같으면 레이어를 숨깁니다
delete datas[j]; //문자 중복을 피하기 위해 배열에서 a (key==datas[j] 55)를 탐색할 때마다 이 값은 다음과 같아야 합니다. 삭제됨
count =10;
Score();
break
}
}
//---------6. -------
Focus 함수(){
//------ ----게임 인터페이스 초기화---------
var $selects=$( "

< ;td>

$(".gameapply").append($selects);
for( var i=30;i<=300;i=i 30){
$("#select1 ").append('')
}
for(var j=1;j<=9;j ){
$("#select2 ").append('')
}
//---------처음 부분에서 첫 번째 입력의 포커스를 가져옵니다.-- ------
$(".inputs:first").trigger("focus").addClass ("input1")
tab=1;//첫 번째에는 Enter를 입력할 수 없기 때문입니다. 포커스가 있는 경우 키보드 입력 이벤트를 호출해야 합니다.
var tabIndex=1
//------ -----tr 행 수와 입력 수를 가져옵니다------ --
$("#tables").find("tr").each(function(r) {
$ (this).find("input").attr("tabindex", r 1 );//tabindex는 초점 위치 값이고 초기 값은 1로 할당되며 순회는 1-2-3-4
})
//------- --입력 키보드 위아래 작업에 대한 응답
$("#tables .inputs").bind("keydown", function(e){
tabIndex =parseInt($(this).attr("tabindex "));//현재 tabindex 포커스 값 가져오기
switch(e.which){
case 38://up
tabIndex-=1;
tab=tabIndex;
break;
case 40://down
tabIndex =1;
tab=tabIndex;
기본값:
return ; --------tabIndex 포커스 값 결정
if (tabIndex > 0 && tabIndex < 4) {
$(".inputs[tabindex= " tabIndex "]").focus( ).addClass("input1"); //현재 입력이 포커스를 얻습니다
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;iif( option[i].selected) {
gametime=option.options[i].text;
gametimess=gametime;
}
}
//-- -8. -----
function countdown(){
var timesshows=document.getElementById("timeshow");
if(timeshows){//웹 페이지 속도가 매우 빠른 경우 느린 경우 , 타이머가 실행 중일 때 컨트롤이 로드되지 않을 수 있습니다.
if(gametimess<0){
clearInterval(time3);//타이머 중지
}
else{
times 값이 표시됩니다. =gametimess;
gametimess--;
}
}
//---------9. 🎜>function Gameselectamount(){
var option=document.getElementById("select2")
for(var i=0;iif(option[i ] .selected) {
amounts=option.options[i].text;
}
}
}
//---------10. ---------
함수 Score(){
var sum=document.getElementById("sum")
sum.value=count
if(count== 0; ){ //텍스트 상자 점수를 0으로 초기화
sum.value=count
}
}

요약: 시간 간격이 상대적으로 길어서 코드가 최적화되지 않은 부분이 있습니다. 즉, 문자가 나타나는 간격이 너무 길다는 것입니다. 그것을 고치려고 노력할 수 있습니다. 코드는 참조용입니다.
온라인 데모:http://demo.jb51.net/js/2011/StarWars/
패키지 다운로드: http://www.jb51 .net /jiaoben/40902.html