JavaScriptゲーム探検広場

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

タイピングゲーム

文字列のタイピングを行うゲームです。
時間制限内に表示された文字列全てを入力することができればゲームクリアとなります。

【HTMLソースコード】

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

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

var gameFlg=false;
var timer;
var qsKeyCode;
var keyCode;
var kekka;
var startTime;
var qsCount=0;
var correctCount=0;
var qsNo;
var qsCharCount;
var qsString=new Array();
var ansString="";
var missCount;

qsString[0]="JAVASCRIPTGAMESAMPLE";
qsString[1]="GAMEPROGRAMMINGLANGUAGE";
qsString[2]="BLINDTOUCHTYPING";
qsString[3]="HOMEPAGEWELLCOME";
qsString[4]="JAVASCRIPTGAMEADVENTURE";

function gameStart() {
        var startDate=new Date;
        startTime=startDate.getTime();
        qsCount=0;
        correctCount=0;
        qsNo=0;
        qsCharCount=0;
        missCount=0;
        ansString="";
        document.getElementById('ansStrPrint').innerHTML="";
        timer=setInterval("nextString();", 100);
        nextChar();
        gameFlg=true;
}

function keydown() {
        var keyPrint;

        if(gameFlg==true){
                keyCode=window.event.keyCode;
                
                if(qsKeyCode==keyCode){
                        kekka="OK";
                        ansString=ansString + String.fromCharCode(keyCode);
                        document.getElementById('ansStrPrint').innerHTML=ansString;
                        nextChar();
                        keyPrint="";
                }else{
                        kekka="NG";
                        missCount+=1;
                        keyPrint=String.fromCharCode(keyCode);
                }
                document.getElementById('keyPrint').innerHTML=keyPrint;
                document.getElementById('kekka').innerHTML=kekka;
        }
}

function nextChar() {
        qsKeyCode=qsString[qsNo].charCodeAt(qsCharCount++);
        document.getElementById('qsStrPrint').innerHTML=qsString[qsNo];
        qsCount+=1;
        if(qsCount > qsString[qsNo].length){
                correctCount+=1;
                startTime=0;
                nextString();
        }
}

function nextString() {
        var startDate;
        var nowDate=new Date;
        var nowTime=Math.floor(nowDate.getTime()-startTime);
        document.getElementById('time').innerHTML=nowTime;
        if(nowTime>7000){
                clearInterval(timer);
                qsNo+=1;
                if(qsString.length>qsNo){
                        gameFlg=false;
                        startDate=new Date;
                        startTime=startDate.getTime();
                        ansString="";
                        qsCount=0;
                        qsCharCount=0;
                        document.getElementById('qsStrPrint').innerHTML=qsString[qsNo];
                        document.getElementById('ansStrPrint').innerHTML="&nbsp;";
                        gameFlg=true;
                        timer=setInterval("nextString();", 100);
                        nextChar();
                }else{
                        gameStop();
                }
        }
}

function gameStop() {
        var kekkaComent="";
        clearInterval(timer);

        if(qsString.length<=correctCount){
                kekkaComent="合格！";
        }else{
                kekkaComent="不合格！";
        }
        document.getElementById('qsStrPrint').innerHTML=kekkaComent;
        document.getElementById('ansStrPrint').innerHTML="タイプミス回数:" + missCount; 
        document.getElementById('time').innerHTML="&nbsp;";
        document.getElementById('kekka').innerHTML="&nbsp;";
        gameFlg=false;
}

問題となる文字列を配列で管理します。

文字列が表示される時間は7秒間とし、7秒経過すると自動的に次の文字列に表示が変わるようにします。
nextString()メソッドでは、呼ばれる度に現在時間を取得し、経過時間を表示します。
もし、7秒以上経過したら、次の文字列を表示します。

全ての文字列の表示が終わると、結果画面に変わります。
全問、制限時間内でタイピングすることができたら合格となります。
ミスしたタイプ回数もあわせて表示します。

＜＜フラッシュゲーム
JavaScriptゲームプログラミング講座