JavaScript タイピング ゲームのコード例

今年の前半は独学でJavaScriptを学び、その後小さなタイピングゲームを作ってプレイしました

機能モジュール: プログラミング:
1. ゲーム時間を選択してカウントダウンを表示できます 1. グローバル変数を定義します
2. 表示する英語文字を選択できます 数字 2. ゲーム時間機能を制御します
3. スコア統計 3. アニメーション効果
4. メニューオプション 4. 文字の絵が表示される時間を設定します
5. 判定機能
6 . ゲームメニュー
7. ゲーム時間オプション
8. ゲーム時間を表示
9. ゲーム難易度オプション
10. ゲームスコア

まずレンダリング: (PS: アートは欠陥です)

メインコードデザイン:

コードは次のとおりです:

//-------全局变量------- 
var data={ 
"10":["<img src=&#39;images/A.gif&#39;/>"],"11":["<img src=&#39;images/B.gif&#39;/>"],"12":["<img src=&#39;images/C.gif&#39;/>"],"13":["<img src=&#39;images/D.gif&#39;/>"], 
"14":["<img src=&#39;images/E.gif&#39;/>"],"15":["<img src=&#39;images/F.gif&#39;/>"],"16":["<img src=&#39;images/G.gif&#39;/>"],"17":["<img src=&#39;images/H.gif&#39;/>"], 
"18":["<img src=&#39;images/I.gif&#39;/>"],"19":["<img src=&#39;images/J.gif&#39;/>"],"20":["<img src=&#39;images/K.gif&#39;/>"],"21":["<img src=&#39;images/L.gif&#39;/>"], 
"22":["<img src=&#39;images/M.gif&#39;/>"],"23":["<img src=&#39;images/N.gif&#39;/>"],"24":["<img src=&#39;images/O.gif&#39;/>"],"25":["<img src=&#39;images/P.gif&#39;/>"], 
"26":["<img src=&#39;images/Q.gif&#39;/>"],"27":["<img src=&#39;images/R.gif&#39;/>"],"28":["<img src=&#39;images/S.gif&#39;/>"],"29":["<img src=&#39;images/T.gif&#39;/>"], 
"30":["<img src=&#39;images/U.gif&#39;/>"],"31":["<img src=&#39;images/V.gif&#39;/>"],"32":["<img src=&#39;images/W.gif&#39;/>"],"33":["<img src=&#39;images/X.gif&#39;/>"], 
"34":["<img src=&#39;images/Y.gif&#39;/>"],"35":["<img src=&#39;images/Z.gif&#39;/>"] 
}; 
var datas=new Array();//随机出现的 class样式以数组中偶数存储，图片以数组中奇数存储 
var now=new Date(); 
var Image; //随机出现图片 
var ps;//随机出现层 
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中的p 
$(".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);//图片以数组中偶数存储,从零开始 
ps=parseInt(Math.random() * 8)+1;//随机出现层的class样式即层的不同位置 
datas.push(ps);//样式以数组中奇数存储 
var time=parseInt(Math.random() * 2000)+3000;//完成动画的时间 
if(time<5000){ 
var $ps=$("<p class=&#39;pPop"+ps+"&#39;>"+data[Image]+"</p>"); 
$("#main").append($ps); 
//-----JQ动画函数---- 
$(".pPop"+ps).animate( 
{"top":$(window).height() - $(".pPop"+ps).height() - $(".pPop"+ps).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){ 
$(".pPop"+datas[j+1]).hide();//key值相等,隐藏该层 
delete datas[j]; //为了避免有重复的字母，所以数组里面每遍历到一个(key==datas[j]+55)都要删除这个值 
count+=10; 
Score(); 
break; 
} 
} 
} 
//---------6.游戏菜单------- 
function Focus(){ 
//---------初始化游戏界面-------- 
var $selects=$("<p 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></p>"); 
$(".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 中国語 Web サイトの他の関連記事を参照してください。