JavaScriptゲーム探検広場

JavaScriptゲームプログラミング講座

一文字タイピング

一文字ずつタイピングを行うゲームです。
時間制限を設けることで、よりゲーム性を高めています。

【HTMLソースコード】

<body onkeydown="keydown()">
<center>
<div id="qsKeyPrint">&nbsp;</div>
<div id="kekka">&nbsp;</div>
<div id="keyPrint>&nbsp;</div>
<br>
<input name="start" type="button" value=" Start " onClick="JavaScript:gameStart()">
</body>

【JavaScriptゲームソースコード】

var gameFlg=false;
var timer;
var qsKeyCode;
var keyCode;
var kekka;
var startTime;
var qsCount=0;
var correctCount=0;

function gameStart() {
        var startDate=new Date;
        startTime=startDate.getTime();
        qsCount=0;
        correctCount=0;
        startTime=0;
        timer=setInterval("nextChar();", 1000);
        gameFlg=true;
}

function keydown() {
        var keyPrint;
        if(gameFlg==true){
                keyCode=window.event.keyCode;
                
                if(qsKeyCode==keyCode){
                        kekka="OK";
                        correctCount+=1;
                        startTime=1000;
                        nextChar();
                        keyPrint="";
                }else{
                        kekka="NG";
                        keyPrint=String.fromCharCode(keyCode);
                }
                document.getElementById('keyPrint').innerHTML=keyPrint;
                document.getElementById('kekka').innerHTML=kekka;
        }
}

function nextChar() {
        var startDate;
        var nowDate=new Date;
        var nowTime=Math.floor(nowDate.getTime()-startTime);
        if(nowTime>1000){
                qsKeyCode=Math.floor(Math.random()*36+1);
                if(qsKeyCode<=10){
                        qsKeyCode=qsKeyCode+47;
                }else{
                        qsKeyCode=qsKeyCode+54;
                }
                startDate=new Date;
                startTime=startDate.getTime();
                qsCount+=1;
                if(qsCount >= 21){
                        gameStop();
                }else{
                        document.getElementById('kekka').innerHTML="&nbsp;";
                        document.getElementById('qsKeyPrint').innerHTML=String.fromCharCode(qsKeyCode);
                }
        }
}

function gameStop() {
        clearInterval(timer);
        alert(correctCount + "/" + (qsCount-1));
        document.getElementById('kekka').innerHTML="&nbsp;";
        document.getElementById('qsKeyPrint').innerHTML="&nbsp;";
        gameFlg=false;
}

StartボタンがクリックされたらgameStart()メソッドを呼び出します。
gameStart()メソッドでは、nextChar()メソッドを1秒間隔で呼び出すようにタイマーをセットし、起動します。

一文字が表示される時間は1秒とし、1秒経過すると自動的に別の一文字に表示が変わるようにします。
nextChar()メソッドでは、呼ばれる度に現在時間を取得し、一文字が表示されてからの経過時間を計ります。
もし、一秒以上経過していたら、新しい文字コードをランダムに取得し、表示させる一文字を変えます。

nextChar()メソッドはキー入力イベントが発生し、入力されたキーと表示されている一文字が一致したときにも呼び出されます。
その際は、一文字が表示されてから一秒経過していなくても、次の一文字に表示を変えます。
キーボードから入力されたキーは、window.event.keyCodeプロパティで取得します。

合計20文字表示されるとゲームは終了し、結果を出力します。

＜＜フラッシュ暗算ゲーム	タイピングゲーム＞＞
JavaScriptゲームプログラミング講座