JavaScriptゲーム探検広場

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

フラッシュ暗算

フラッシュ暗算ゲームを作成しながら、JavaScriptでのゲームプログラミング方法について触れて行きます。
プログラムの内容は、いたってシンプルです。

【HTMLソースコード】

<div id="number">&nbsp;</div>
<input type="button" onClick="JavaScript:gameStart();" value="スタート">
<br>
<br>
<div id="kaito">&nbsp;</div>
<input type="button" onClick="JavaScript:inputKaito(7);" value="　7　">
<input type="button" onClick="JavaScript:inputKaito(8);" value="　8　">
<input type="button" onClick="JavaScript:inputKaito(9);" value="　9　">
<br>
<input type="button" onClick="JavaScript:inputKaito(4);" value="　4　">
<input type="button" onClick="JavaScript:inputKaito(5);" value="　5　">
<input type="button" onClick="JavaScript:inputKaito(6);" value="　6　">
<br>
<input type="button" onClick="JavaScript:inputKaito(1);" value="　1　">
<input type="button" onClick="JavaScript:inputKaito(2);" value="　2　">
<input type="button" onClick="JavaScript:inputKaito(3);" value="　3　">
<br>
<input type="button" onClick="JavaScript:inputKaito(0);" value="　0　">
<br>
<br>
<input type="button" onClick="JavaScript:del();" value="クリア">
<input type="button" onClick="JavaScript:anser();" value="解答">

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

var timer=0;
var speed=1000;
var gameFlag=false;
var number;
var maxNumber=0;
var count=4;
var correctAns=0;
var kaito="";
var correctCnt=0;
function gameStart() {
        if(gameFlag==false){
                correctAns=0;
                kaito="";
                document.getElementById('kaito').innerHTML="&nbsp;";
                maxNumber=100*(correctCnt+1);
                speed=1500;
                timer=setInterval("nextCount();", speed);
                gameFlag=true;
        }
}
function nextCount() {
        if(count>=0){
                number=Math.floor(Math.random()*maxNumber+1);
                correctAns=correctAns+number;
                document.getElementById('number').innerHTML=number;
                count-=1;
        }else{
                gameFlag=false;
                clearInterval(timer);
                document.getElementById('number').innerHTML="&nbsp;";
                count=4;
        }
}
function inputKaito(num) {
        if(gameFlag==false && maxNumber>0){
                kaito=(kaito+"") + (num+"");
                document.getElementById('kaito').innerHTML=kaito;
        }
}
function del() {
        kaito="";
        document.getElementById('kaito').innerHTML="&nbsp;";
}
function anser() {
        if(gameFlag==false && kaito!=""){
                if(correctAns==kaito){
                        correctCnt+=1;
                        w=window.open("ok.html", "正解", "width=200,height=100");
                }else{
                        w=window.open("ng.html", "不正解", "width=200,height=100");
                }
        }
}

スタートボタンをクリックするとgameStart()メソッドに処理が移ります。
gameStart()メソッド内では、1.5秒間隔でnextCount()メソッドが呼び出されるようタイマーを設定し起動します。

1.5秒間隔で呼び出されるnextCount()メソッドでは、ランダムな数値を生成し、その数値をHTML上に表示させます。
数値の桁数は2桁から始まり、問題に正解するごとに増えて行きます。

数値は4つ表示され、4つ表示が終わるとタイマーを止めます。
その後、解答を1～9までのボタンを使い入力します。
入力が終わった後、解答ボタンを押すとanser()メソッドを呼び出し、正解・不正解の判定を行います。
正解だった場合はok.htmlファイルを開き、不正解であればng.htmlファイルを開きます。

	一文字タイピングゲーム＞＞
JavaScriptゲームプログラミング講座