よくあるタイピング練習ゲームを、JavaScriptで作ってみました。
フォーム内を流れていく文字を、次々に打ち込んでください。
詳しい遊び方は、下記の解説をご覧下さい。
（注意）
使用する文字は、全て半角文字です。
日本語入力システムはオフにして下さい。
また、最初は大文字から始まるので、あらかじめ大文字入力にしておくと良いかも。
NN4.xをご使用の場合、文字入力が受け付けられない場合があります。
そんな時は、画面内のどこかを1度クリックしてみて下さい。
・サンプルを見る
・ソースを保存する
（右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。）
・ソースを見る
・解説を見る
[ ソース ]
<html><head>
<script language="JavaScript"><!--//
//=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=//
//= =//
//= Copyright (C) 1998-2007 WEST MiRa. All rights reserved. =//
//= WEST MiRa http://www.west-mira.jp/ =//
//= =//
//=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=//
my_speed=2500;
space="="; space2="-";
clear_moji="*=*=*=*=*=*=*=*=*=*=*=*=*=*=*";
alphabet=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","0","1","2","3","4","5","6","7","8","9",
"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");
place=new Array(4);
for(i=0; i<4; i++)place[i]=new Array(25);
level_hayasa =new Array(950,850,700,600,450,400, 350, 300, 250,200, 200, 200,150, 150, 100, 80, 60);
level_kakuritu=new Array(5, 5, 5, 5, 4, 4, 4, 4, 3, 3, 3, 3, 2, 2, 2, 1, 1);
level_nannido =new Array(26, 26, 26, 26, 26, 36, 36, 36, 36, 36, 63, 63, 63, 63, 63, 63, 63);
lebel_tennsuu =new Array(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 20);
lebel_tokutenn=new Array(80,200,390,600, 900,1200,1670,2290,3100,4220,5060,7440,9100,11200,13950,17280,24000);
//80,100,130,150, 180,200, 230, 260, 300, 350, 460, 620, 700, 800, 930, 1080, 1270
my_time=0; my_time2=0;
kekka=new Array(4);
var game_end , hayasa , kakuritu , nannido , tennsuu , tokutenn , level , game_start , now_tenn;
function Hajime()
{
for(i=0; i<4; i++)
{
for(j=0; j<25; j++)
{
if(j%2==0)place[i][j]=space;
else place[i][j]=space2;
}
document.form1.elements[i].value="";
}
game_end=1;
game_start=0;
hayasa=level_hayasa[0];
kakuritu=level_kakuritu[0];
nannido=level_nannido[0];
tennsuu=1;
tokutenn=50;
level=0;
document.form1.tokutenn.value=tokutenn;
document.form1.text4.value="";
}
function GameStart()
{
game_start=1;
now_tenn=0;
if(level==0)
{
hayasa=level_hayasa[document.form1.level.selectedIndex];
kakuritu=level_kakuritu[document.form1.level.selectedIndex];
nannido=level_nannido[document.form1.level.selectedIndex];
tennsuu=lebel_tennsuu[document.form1.level.selectedIndex];
level=document.form1.level.selectedIndex;
StringSnow(0);
clearTimeout(my_time2);
my_time2=setTimeout('game_end=0;Games();',my_speed);
}
else if(level>lebel_tokutenn.length)
{
StringSnow(2);
}
else
{
hayasa=level_hayasa[level];
kakuritu=level_kakuritu[level];
nannido=level_nannido[level];
tennsuu=lebel_tennsuu[level];
StringSnow(1);
for(i=0; i<4; i++)
for(j=0; j<25; j++)
{
if(j%2==0)place[i][j]=space;
else place[i][j]=space2;
}
clearTimeout(my_time2);
my_time2=setTimeout('game_end=0;Games();',my_speed);
}
}
function StringSnow(dotti)
{
if(document.layers)kuuhaku=" ";
else kuuhaku="";
if(dotti==0)
{
document.form1.elements[0].value=clear_moji;
document.form1.elements[1].value=kuuhaku+(level+1)+"StageStart!";
document.form1.elements[2].value=kuuhaku+"Let's Challenge!";
document.form1.elements[3].value=clear_moji;
}
else if(dotti==1)
{
document.form1.elements[0].value=clear_moji;
document.form1.elements[1].value=kuuhaku+level+"StageClear!";
document.form1.elements[2].value=kuuhaku+"YouWin!";
document.form1.elements[3].value=clear_moji;
}
else if(dotti==2)
{
document.form1.elements[0].value=clear_moji;
document.form1.elements[1].value=kuuhaku+"AllStageClear!";
document.form1.elements[2].value=kuuhaku+"YourChampion!";
document.form1.elements[3].value=clear_moji;
}
document.form1.text4.value="";
return;
}
function Games()
{
retu=Math.floor(Math.random()*4);
dotti=Math.floor(Math.random()*kakuritu);
if(dotti%2==0)place[retu][24]=alphabet[Math.floor(Math.random()*nannido)];
else place[retu][24]=space;
for(i=0; i<4; i++)
{
kekka[i]=place[i].join("");
document.form1.elements[i].value=kekka[i];
}
if(place[0][0] != space && place[0][0] != space2 || place[1][0] != space && place[1][0] != space2
|| place[2][0] != space && place[2][0] != space2 || place[3][0] != space && place[3][0] != space2)
{
tokutenn-=tennsuu;
now_tenn-=tennsuu;
}
document.form1.tokutenn.value=tokutenn;
for(i=0; i<4; i++)
{
for(j=0; j<24; j++)
place[i][j]=place[i][j+1];
if(place[i][23] == space)place[i][24]=space2;
else place[i][24]=space;
}
clearTimeout(my_time);
if(tokutenn<0)
{
game_end=1;
alert("GAME OVER...");
}
else if(now_tenn>lebel_tokutenn[level])
{
level++;
game_end=1;
GameStart();
}
if(game_end!=1)my_time=setTimeout('Games();',hayasa);
}
function MatchKey(doko)
{
tokutenn+=tennsuu;
now_tenn+=tennsuu;
if(place[doko][k-1] == space)place[doko][k]=space2;
else place[doko][k]=space;
doko=100;
return doko;
}
if(document.layer)document.captureEvents(Event.KEYPRESS);
document.onkeypress=KeyInput;
function KeyInput(my_event)
{
if(game_start==1)
{
if(document.layers)my_key=my_event.which;
else if((document.getElementById) && (!document.all))my_key=my_event.which;
else if(document.all)my_key=event.keyCode;
if((document.layers) && my_key==0)a=0;
else {
my_key=String.fromCharCode(my_key);
document.form1.text4.value=my_key;
for(k=0; k<25; k++)
{
if(place[0][k] == my_key)
{ doko=MatchKey(0); if(doko==100)break; }
else if(place[1][k] == my_key)
{ doko=MatchKey(1); if(doko==100)break; }
else if(place[2][k] == my_key)
{ doko=MatchKey(2); if(doko==100)break; }
else if(place[3][k] == my_key)
{ doko=MatchKey(3); if(doko==100)break; }
else if(place[0][k] != space && place[0][k] != space2 || place[1][k] != space && place[1][k] != space2
|| place[2][k] != space && place[2][k] != space2 || place[3][k] != space && place[3][k] != space2)
{
tokutenn-=tennsuu;
now_tenn-=tennsuu;
break;
}
}
document.form1.tokutenn.value=tokutenn;
}
}
return false;
}
//-->
</script>
</head>
<body onLoad="Hajime();">
<table cellpadding="0" cellspacing="0" border="1" align="center">
<form name="form1">
<tr align="center"><td><input type="text" size="25" name="text0"></td></tr>
<tr align="center"><td><input type="text" size="25" name="text1"></td></tr>
<tr align="center"><td><input type="text" size="25" name="text2"></td></tr>
<tr align="center"><td><input type="text" size="25" name="text3"></td></tr>
<tr align="center">
<td><br><tt><input type="text" size="2" name="text4"><br>
得 点 ：<input type="text" size="6" name="tokutenn">点<br>
レ ベ ル ：<select name="level">
<option selected>Level1<option>Level2<option>Level3<option>Level4<option>Level5
<option>Level6<option>Level7<option>Level8<option>Level9<option>Level10
</select><br><br>
<input type="button" value="START!" onClick="GameStart();">
<input type="button" value="GAME END!" onClick="game_end=1;">
<input type="button" value="RESET" onClick="kekka_reset=0;Hajime();"></tt><br><br>
</td></tr>
</form>
</table>
</body></html>
[ 解説 ]
フォームにカーソルを合わせる必要はありません。
そのまま画面上に文字を打ち込んでください。
入力した文字は、小さいフォームで確認できます。
正しい文字が入力されると、該当文字はフォーム内から消えていきます。
ただし、打ち込む順番を間違えると減点です。
キーが流れていくフォームは、4つあります。
一番左端に表示されている文字から打ち込んでいって下さい。
以下のフォームを例に挙げます。
上記のように表示されている場合、打ち込む順番は
A→B→C→D→E→F
になります。
どのキーを始めに打つのか、間違えないでください。
また、文字を打ち込まずに、最後まで文字が流れさせてしまった場合も減点になります。
レベルが上がるにつれ、正しく文字を入力した際に獲得できる得点も大きくなりますが、
ミスした時の減点数も大きくなります。
持ち点が0になったらゲームオーバーです。
ある一定の得点に達するとステージクリアとなり、次のステージに進みます。
ステージが進むと、文字が流れるスピードが速くなったり、出てくる文字の量が増えます。
また数字や小文字の入力も必要になってきます。
レベルは指定できますので、ご自分にあったレベルからチャレンジしてください。
ちなみに選択できるレベルは10までですが、実際にはその上もあります。
その領域は、ステージをクリアしていかないとチャレンジできません。
ゲームを開始するにはSTARTボタンを押して下さい。
RESETボタンを押すと獲得コイン数がクリアされ初期設定に戻りますので、押し間違えないようにして下さい。
|
