初期設定

ゲーム開始前には初期設定を行う必要があります。今回はシンプルなゲームですので、特別なオブジェクトなどは用意せず単純にグローバル変数を使って処理します。

まず、表示する文字を配列変数movieTitleに入れておきます。この時に、適度に正しい正解の文字(マイコミジャーナル)もちりばめておきます。というのも、乱数を使って表示する都合上、配列要素に正解が１つしかないと、ほとんどの場合において不正解の文字が表示されてしまうためです。正解の文字であるマイコミジャーナルは変数okTitleに入れておきます。

movieTitleとokTitleの文字は自由に変更できます。SOMYでもSQNYでも自由に設定して認識力を鍛えましょう。何問やるかは変数maxCountの値で指定できます。10となっていますが、100にすれば100回連続してやることになります。100回にしてしまうと、今度は集中力を鍛えるゲームになってしまう可能性もあります。

ゲーム開始前の状態。ゲーム開始ボタンを押すとゲームが始まる

コード01

var movieTitle = [  // 表示するまぎらわしい単語
    "マイコミジャーナル",
    "カケコミジャーナル", "ヨミコミジャーナル",
    "コミコミジャーナル", "マイコミキャーナル", "マイコミジャーナル",
    "マイコミジャーナレ", "マイコミジャーナル",
    "マイロミジャーナル", "ウリコミジャーナル", "マイコミジャーナル",
    "マイコ三ジャーナル", "マイコミジャーナル"
];
var okTitle = "マイコミジャーナル";  // 正解の文字
var startTime;  // 時間を入れる変数
var gameFlag = false;   // 最初はゲーム中ではないのでfalseにする
var score = 0;  // スコアは0点にする
var count = 0;  //　回数をカウントする変数
var maxCount = 10;  // 表示する単語の数
var startFlag = false;  // 最初に○か×ボタンが押された時からカウント開始
var lockFlag = false;   // ロックフラグ

まぎらわしい文字の表示

ゲームが開始されたら、画面にまぎらわしい文字を表示します。Math.random()で生成した乱数値に配列変数movieTitleの数(要素数)をかけ算します。ただ、これでは小数値になってしまうのでMath.floor()を使って整数化します。これが以下の2行になります。

var n = Math.floor(Math.random() * movieTitle.length);
document.getElementById("mTitle").innerHTML = movieTitle[n];

ただ、関数setTitle()では、これ以外の処理も書かれています。何問目かを表示する処理と、ゲームオーバーかどうかの判定も行っています。これまでと基本的に同じですが、「ボタンのロック処理」が含まれているのが異なる点です。ボタンのロック処理があるのは、不正解の時に一定時間ボタンが押せないようにペナルティを課しているためです。ロック機構がないと○×ボタンが連打された時に連続してチェックを行う関数が呼び出され、さらに関数setTitle()も呼び出されてしまうためです。こうなると、次々とまぎらわしい文字が表示され想定した問題数を超えてしまいます。そこで、lockFlagという変数を用意し不正解の時には連続してボタンが押されても無視するようにしているのです。

コード02

function setTitle(){
    var n = Math.floor(Math.random() * movieTitle.length);
    document.getElementById("mTitle").innerHTML = movieTitle[n];
    count++;
    document.getElementById("qNum").innerHTML = count + "問目";
    lockFlag = false;   // ロック解除
    if (count <= maxCount) return;  // 指定したカウント以下なら関数から抜ける
    document.getElementById("qNum").innerHTML = "ゲーム終了";
    var time = ((new Date()).getTime() - startTime) / 1000;
    gameFlag = false;   // ゲーム終了であることを示す
    alert("ゲームオーバー：得点は"+score+"点で、秒数は"+time+"秒でした。");
    document.getElementById("startButton").style.visibility = "visible";
    }