Web覚書トップ > JavaScript サンプル > 『超簡単1文字タイピングゲームを作ってみよう1』
説明

1文字のタイピングゲームを作ってみます。 ランダムに英文字を選択して、正解と不正解をカウントします。

実行例
得点:  ミス:

文字:

ここに入力: ←ここにカーソルを当てると開始、外すと終了です

コード
var cntPoint;
var cntMiss;
var keyWord;
var entWord = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"

function gameStart(obj){
	cntPoint = 0;
	obj.form.point.value = cntPoint;
	cntMiss = 0;
	obj.form.miss.value = cntMiss;
	setWord(obj);
}
function gameEnd(obj){
	var mess = "あなたの記録は、";
	mess += eval(cntPoint + cntMiss) + " 回中 ";
	mess += cntPoint + " 点 でした";
	window.alert(mess);
	obj.form.word.value = "";
}
function setWord(obj){
	var rnd = Math.floor(Math.random() * 26);
	keyWord = entWord.charAt(rnd);
	obj.form.word.value = keyWord;
}
function chkWord(obj){
	var word = obj.value.toUpperCase();
	obj.value = "";
	if (keyWord == word) {
		cntPoint++;
		obj.form.point.value = cntPoint;
		setWord(obj);
	} else {
		cntMiss++;
		obj.form.miss.value = cntMiss;
		setWord(obj);
	}
}
<FORM>
得点:
<INPUT type="text" name="point" value="0" onForcus="this.Blur();">
ミス:
<INPUT type="text" name="miss" value="0" onForcus="this.Blur();">
文字:
<INPUT type="text" name="word" value="" onForcus="this.Blur();">
ここに入力:
<INPUT type="text"
 onKeyUp="chkWord(this);" onFocus="gameStart(this);" onBlur="gameEnd(this);">
←ここにカーソルを当てると開始、外すと終了です
</FORM>

解説&ステップアップ

入力用のテキストボックスにフォーカスを当てるとゲーム開始。外すと終了です。
終了時には点数をメッセージボックスで表示しています。

動作確認

IE5.0(win)、IE5.5(win)、NN4.7(win)

© hyork@yahoo.co.jp (2001. 3.13)