JavaScript タイピング ゲーム コード_JavaScript スキル

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

まず、レンダリング: (追記: アートに欠陥があります)

メインコード設計:

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

 
//-------全局变量------- 
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(timevar $divs=$("

"+data[Image]+"

");
$("#main").append($divs);
//-----JQ アニメーション関数 ----
$(".divPop" Divs)。 animate(
{"top":$(window).height() - $(".divPop" Divs).height() - $(".divPop" Divs).position().top},time, function(){$("#main").empty()})
}
}
}
//--------3. 表示する文字画像を設定します。時間 ------
function set(){
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;jif(key== datas[j] 55){
$(".divPop" datas[j 1]).hide();//キーの値が等しい場合、レイヤーを非表示にします
delete datas[j]; //重複する文字を避けるために、配列内で (key==datas[j] 55) が走査されるたびに、この値を次のようにする必要があります。
count =10;
break;
}
}
//--------6. -------
function Focus(){
//----- ----ゲームインターフェイスを初期化します--------
var $selects=$( "

> ;

> ;");
$(".gameapply").append($selects);
for( var i=30;i$("#select1 ").append('' i '')
}
for(var j=1;j$("#select2 ").append('' j '')
}
//----------先頭の最初の入力のフォーカスを取得します-- ------
$(".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 の値を取得します focus
switch(e.that){
case 38://up
tabIndex-=1;
tab=tabIndex;
break;
case 40://down
tabIndex =1;
デフォルト:
}
// --------tabIndex の値を決定します focus
if (tabIndex > 0 && tabIndex $(".inputs[tabindex= " tabIndex "]").focus( ).addClass("input1"); //現在の入力がフォーカスを取得します
for(var i=0;i{
if( i==tabIndex){
break;
}
else{
$(this).removeClass("input1");
keydown(); >}
return true;
});
}
//---------- ---
関数 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 timeshows=document.getElementById("timeshow");
if(timeshows){// Web ページの速度が非常に速い場合 遅い場合、タイマーの実行中はコントロールが読み込まれない可能性があります。
if(gametimessclearInterval(time3);//タイマーを停止します
}
else{
timeshows。 =ゲームタイム;
ゲームタイム--;
}
}
//----------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; ){ //テキスト ボックスのスコアを 0 に初期化します
sum.value=count;
}


要約: 時間間隔が比較的長いため、コードがうまく最適化されていない箇所があります。つまり、文字が表示されるまでの時間間隔が長すぎます。それを修正してみることができます。コードは参照専用です
オンライン デモ:http://demo.jb51.net/js/2011/StarWars/
パッケージのダウンロード:http://www.jb51 .net /jiaoben/40902.html