Web“波”2.0 -2ページ目

計算機能 & その他機能【第五回目】

みなさんこんにちは！

今週で第五回目となるこのHTML5コラム。
今週は、第二回に引き続きまして
私、フリーエンジニアの板敷が担当させて頂きます。　よろしくお願いします！

前々回は手塚さんによるドラッグ&ドロップAPIの解説、
前回は遠藤さんによるCSS3アニメーションの解説が主でしたが、
今週は残りの計算関連処理についての解説をしていきたいと思います。

今週の内容は前回までとは異なり、HTML5関連の機能は使われていないため
若干の地味さは否めません・・・。　が、その代わり！　
完成した計算ゲームをいよいよダウンロードすることが可能になりますっ！！

すごく楽しみですね！　そうでもないですか？　ちょっと大げさ過ぎましたね。。。
ともあれ、早速進めて行きましょう！

答え生成処理

まずは答え生成処理を見て行きましょう。　リスト1にコードを示します。

リスト1 setAnswer関数

/*
 * 答え生成関数
 * 
 * 答えを生成し、systemAnswer要素の
 * innerText値として設定する。
 * 生成される答えは、0以上の整数であること。
 */
function setAnswer() {
  var answer = null;

  while (true) {
    // (1)
    var num1 = 
      Math.floor(Math.random() * MAX_NUM) + 1;
       
    var num2 = 
      Math.floor(Math.random() * MAX_NUM) + 1;
    
    // (2)
    var operationIndex = 
      Math.floor(Math.random() * 4);
       
    var sytemOperation = 
      OPERATION_INDEX_ARRAY[operationIndex];

    // (3)
    answer = 
      String(eval(num1 + sytemOperation + num2));

    // 正規表現(0以上の整数)
    if (answer.match(/^[0-9]+$/)) { 
      break;    // (4)
    }
  }

  // (5)
  var systemAnswer = 
    document.getElementById("systemAnswer");
    
  systemAnswer.innerText = answer;
  systemAnswer.style.display = "inline";
}

(1) 1～10の整数から、2つ数値をランダムに取得します。
(定数MAX_NUMは、このゲームで選択可能な数値の最大値[10]を示します)

var num1 = Math.floor(Math.random() * MAX_NUM) + 1;
var num2 = Math.floor(Math.random() * MAX_NUM) + 1;

(2) 0～3の整数から、1つ数値をランダムに取得します。
取得した値を、連想配列OPERATION_INDEX_ARRAYのキーとして値を参照することで、
対応する四則演算値(+, -, *, /)が取得できるという仕組みです。

// 文字列(+,-,*,/)を取得
var operationIndex = Math.floor(Math.random() * 4);
var sytemOperation = 
  OPERATION_INDEX_ARRAY[operationIndex];

(3) 1 & 2で得られた数式を計算し、答えを取得します。
答えは後に正規表現関数を利用するために、文字列型に変換しておきます。

answer = String(eval(num1 + sytemOperation + num2));

(4) 3で得られた答えが0以上の整数値であった場合、答えを確定します。
そうでない場合は、無限ループで1～3の処理を繰り返します。

 // 正規表現(0以上の整数)
  if (answer.match(/^[0-9]+$/)) { 
　　break;  // 答えを確定し、ループを抜ける
}

(5) 確定した答えを"systemAnswer"要素のテキスト値に設定し、画面上に表示します。

var systemAnswer = 
  document.getElementById("systemAnswer");
  
systemAnswer.innerText = answer;
systemAnswer.style.display = "inline";

答え合わせ & 結果アニメーション表示処理

次は答え合わせ & 結果アニメーション表示関数です。　リスト2にコードを示します。

リスト2 checkAnswer関数

/*
 * 答え合わせ & 結果画像設定関数
 * 
 * setAnswerで生成された答えと、ユーザにより設定された
 * 数式の答えが一致するか確認する。
 * 答えの正解/不正解毎に、対応する画像を設定する。
 */
function checkAnswer() {
  // (1)
  var systemAnswer = 
    document.getElementById(
      "systemAnswer").innerText;
    
  // (2)
  var userAnswer = 
    eval(selectedLeftNum1 
      + selectedOperation + selectedLeftNum2);

  // (3)
  if (systemAnswer == userAnswer) {
    document.getElementById("resultImage").src = 
      "images/brain_good.jpg";
    
  } else {
    document.getElementById("resultImage").src = 
      "images/ooops.jpg";
  }
  
  // (4)
  document.getElementById(
    "msgArea").style.display = "block";
}

(1) setAnswer関数で生成した答えをsystemAnswer要素から取得します。

var systemAnswer = 
  document.getElementById(
    "systemAnswer").innerText;

(2) ユーザが設定した計算式を実行します。

var userAnswer = 
  eval(selectedLeftNum1 
    + selectedOperation + selectedLeftNum2);

(3) 1 & 2の値を比較し、一致した場合は正解用画像を resultImageにセットし、
一致しない場合は不正解用画像をセットします。

if (systemAnswer == userAnswer) {
　　document.getElementById("resultImage").src = 
        "images/brain_good.jpg";
    
} else {
　　document.getElementById("resultImage").src = 
        "images/ooops.jpg";
}

(4) msgAreaを表示状態にし、結果画像を表示させます。
なお、msgArea用のスタイルとしてCSS3のアニメーションが設定されているため、
画像はアニメーション表示されることに注意しましょう。

document.getElementById(
  "msgArea").style.display = "block";

答え合わせ実行可能判定処理

最後に、上記の答え合わせ処理が実行可能であるかどうかを判定する関数です。　リスト3にコードを示します。

リスト3 isReadyToCalculate関数

/*
 * 答え合わせ可能かどうかの判定
 * 
 * ※答え合わせは以下の条件を満たす場合、可能となる
 * 
 * ・左辺値1が選択されている
 * ・左辺値2が選択されている
 * ・四則演算値が選択されている
 */
function isReadyToCalculate() {
  // (1)
  if (selectedLeftNum1 != null    // 左辺値1
    && selectedLeftNum2 != null   // 左辺値2
    && selectedOperation != null) { // 四則演算値
       
    return true; // 答え合わせ可能
  }
  
  return false; // 答え合わせ不可能
}

この関数では、以下の条件が全て満たされている場合にtrueを返却します。

左辺値1が選択されている
左辺値2が選択されている
四則演算値が選択されている

計算ゲーム完成！！

計算関連処理についての解説は以上です。

文章での解説が主でしたので、動きがイメージしづらい部分も多かったのではないでしょうか？

と言うことで、冒頭でもお伝えしました通り、
満を持して計算ゲームを公開したいと思います！！

以下からダウンロード可能ですので、ぜひ実際に動きを確かめて見てください。
(ブラウザ以外は特別な環境設定が不要な点も、HTML5の魅力ですね！)

ダウンロードはこちらから

※なお、この計算ゲームはChrome16以降での動作を確認しています。
最新のChromeはこちらからダウンロード可能です。

以上で、計算ゲームの紹介、解説、公開を終了いたします。
ありがとうございました！

計算機能 & その他機能 【第五回目】

計算機能 & その他機能【第五回目】