2012年11月7日水曜日

ハイローゲーム3桁対応(改)

前回のハイローゲームで、数値入力時に[0]を最初に入力すると3桁入力できないバグが見つかりました。

ハイローゲーム3桁(改)

要するに、入力を変数でカウントアップしていたのですが、[0][1]や[0][0][1]は数値としては1なので、カウントだけ上がって桁数が増えない状態になっていました。


    function doNumButton(n) {
      if (cntNum < 3) {
        inpNum = inpNum*10 + n;
        cntNum++;
      }
      showNumber();
    }

正しくは、[0][1][2]の次に[3]を入力したら123としたいので、次のように変更しました。

    function doNumButton(n) {
      if (inpNum < 100) {       // 3桁目まで入力可能
        inpNum = inpNum*10 + n;
      }
      showNumber();
    }

つまり表示している数値の桁数で判定するように変更したわけです。

さて、バグ修正だけではなんなので、ついでにキー入力にも対応してみました。
アンドロイドとしてはキー入力なんて関係ないのですが、PCで操作するときは、いちいちマウスで操作するよりもキーのほうが楽です。



    document.onkeypress = function(e)
    {
        var code = e.charCode;
        var key = String.fromCharCode(e.keyCode);
        if (code == 0x0D) {
          doExeButton();
        } else if (key == "-") {
        doClrButton();
        } else if ((key >= "0") && (key <= "9")) {
          doNumButton(Number(key));
        }
    }

キー入力のイベントで、押されたキーに応じて対応するボタンの処理を呼び出しています。
0x0DはEnterキーのキーコードです。Enterキーを押すと決定ボタンの処理を行うようにしました。
-キーはクリアボタン、0~9のキーはそれぞれ対応する数字のボタンです。

2012年11月3日土曜日

準備

ネットブックはウブントゥを載せて販売するのが正しいと思う・・・という偏った意見は置いといて、企業買収で今まで使えていたものが、ある日突然使えなくなるという事が度々発生しています。困ったものです。
ちなみにハッピー2は、エイサー製のネットブックの名前です。
ネタがUbuntu11.10の時点のものなので、今は違うかも・・・機会があれば確認してみます。

2012年10月26日金曜日

ドロイド


唐沢寿明は映画CASSHERNの敵の親玉ですね。
しかし、八王子君の想像しているものは少し違うようですが・・・。

2012年10月25日木曜日

やるぜっ!アンドロ軍

主人公は八王子くん、メガネをかけているのは菊名先輩です。
八王子くんは20代、何で知ったんでしょうね?
菊名先輩は40代なので知ってて当然ですが・・・。

2012年10月14日日曜日

開発環境

今まで雑誌やWEBを見ながらやってきたのですが、いい加減まとまった情報が欲しくなってきたので、本を買ってきました。

読んでいると、なんとなく8ビット機時代のBASIC入門を思い出します。

今の統合開発環境は、いろんな手段でエラーを教えてくれます。入力する前に候補を出してくれたり、エラー箇所を教えてくれたり、デバッグの支援をしてくれます。

ところが、エディタ+ブラウザでHTML5を書き始めると、エラーは「動かない」ということでしか分かりません。この状態は8ビット機時代のBASICと同じです。いや、BASICならエラーが表示されるのでそれ以下かもしれません。

とりあえず入力支援機能が欲しかったので、HTMLエディタを探したのですが、なかなかいいものが見つかりません。

結局、手になじんでいるEclipseを使うことにしました。これならこの後Android SDKを使うときにもそのまま使い続けることが出来ます。

実行環境にChromeを使っていて思い出したのが、デベロッパーツールの存在です。設定-ツール-デベロッパーツール(D)で表示されます。

これがあると、HTMLファイル内にエラーがあるとその行を教えてくれます。これだけで全然作りやすさが違います。

ということで、もう少しWEBアプリを続けようと思います。

2012年10月11日木曜日

ハイローゲーム3桁対応

ちょっと考えたらできてしまいました。

ハイローゲーム3桁

入力途中の状態を作るため、表示用のエリアを作り、履歴表示の部分を小さめにします。


  <p id="temp" style="font-size:25px;text-align:center;"></p>
  <p id="info" style="font-size:20px;text-align:center;"></p>


数字を3桁入力するために、決定ボタンを追加します。また、入力をキャンセルするためにクリアボタンも作ります。


    <button id="exekey" onClick="doExeButton()">決定</button>
    <button id="exekey" onClick="doClrButton()">クリア</button>


数字ボタンが押された時は、押された数字を3桁まで覚えておき、tempに表示します。


    function doNumButton(n) {
      if (cntNum < 3) {
        inpNum = inpNum*10 + n;
        cntNum++;
      }
      showNumber();
    }


tempへの表示は他でも使うので関数showNumber()としています。


    function showNumber() {
      $("temp").innerHTML = inpNum;
    }

クリアボタンが押された時は、それまでに入力された内容をクリアして表示を更新します。

    function doClrButton() {
        cntNum = 0;
        inpNum = 0;
        showNumber();
    }

決定ボタンが押された時の動作は、1桁の時の数字が押された処理と同様の処理になります。

    function doExeButton() {
      count++;
      for (i=max-1; i>0; i--) {
        tryNumber[i] = tryNumber[i-1];
      }
      tryNumber[0] = inpNum;
      showHistory();
      if (inpNum == ans) {
        alert("あたりです!");
        location.reload();
      }
      doClrButton();
    }

履歴表示は1桁の時と同じです。

    function showHistory() {
      var str = "";
      for (i=0; i<max; i++) {
        if (tryNumber[i] < 0) {
          str = str + "<br>";
        } else {
          str = str + tryNumber[i];
          if (tryNumber[i] > ans) {
              str = str + " 大<br>";
          } else if (tryNumber[i] < ans) {
              str = str + " 小<br>";
          } else {
              str = str + " 正解<br>";
          }
        }
      }
      $("info").innerHTML = str + count + "回";
    }

問題作成は、0~999の値になるので、*1000に変わっています。

    function getRandom1000() {
        var r = Math.floor(Math.random() * 1000);
        return (r);
    }

これで3桁のハイローゲームになりました。
まぁ、ハイローと言いつつ、大小と表示しているのですが(笑

ハイローゲームでも

西暦和暦変換が一段落したので、とりあえずゲームを作ってみました。
といっても、遊べるレベルのものではありませんが・・・。

ハイ・アンド・ロー・ゲームというものです。


相手が隠している数字を予想し、その予想した数字が答えよりも大きい場合はハイ(High)、小さい場合はロー(Low)と答えるので、何回で答えを当てられるかという遊びです。

最初は処理を簡単にするために、1桁の数字とします。

遊びとしては物足りないのですが、作りやすさとしては2桁以上の時と大違いになります。

入力にはボタンを10個用意しました。それぞれ0から9までの数字に対応します。

    <button id="tenkey" onClick="doNumButton(0)">0</button>
    <button id="tenkey" onClick="doNumButton(1)">1</button>
    <button id="tenkey" onClick="doNumButton(2)">2</button>
    <button id="tenkey" onClick="doNumButton(3)">3</button>
    <button id="tenkey" onClick="doNumButton(4)">4</button>
    <br>
    <button id="tenkey" onClick="doNumButton(5)">5</button>
    <button id="tenkey" onClick="doNumButton(6)">6</button>
    <button id="tenkey" onClick="doNumButton(7)">7</button>
    <button id="tenkey" onClick="doNumButton(8)">8</button>
    <button id="tenkey" onClick="doNumButton(9)">9</button>
    <br>

電話配列か電卓配列の3×3+1の形式にしたかったのですが、画面サイズの関係で2列にしています。解像度の高い機種を使っている人は好きな配列にすると使いやすいかもしれません。

例えば、電話配列なら

    <button id="tenkey" onClick="doNumButton(1)">1</button>
    <button id="tenkey" onClick="doNumButton(2)">2</button>
    <button id="tenkey" onClick="doNumButton(3)">3</button>
    <br>
    <button id="tenkey" onClick="doNumButton(4)">4</button>
    <button id="tenkey" onClick="doNumButton(5)">5</button>
    <button id="tenkey" onClick="doNumButton(6)">6</button>
    <br>
    <button id="tenkey" onClick="doNumButton(7)">7</button>
    <button id="tenkey" onClick="doNumButton(8)">8</button>
    <button id="tenkey" onClick="doNumButton(9)">9</button>
    <br>
    <button id="tenkey" onClick="doNumButton(0)">0</button>

となります。

ボタンサイズを個別に指定する方法がわからなかったので、CSSで指定しています。

  <style type="text/css">
    #tenkey{font-size: 25px;width: 50px; height:50px;}
  </style>

ボタンが押されると、doNumButton(n)を実行して表示と判定を行います。

表示は、過去5回分までの履歴と、その数字の大小、そして今の回数を表示します。
判定は、入力された数字が正解かどうかを調べて正解ならば通知してリロードしています。
リロードすると初期化されて次の問題が表示されることになります。

    function doNumButton(n) {
      count++;
      for (i=max-1; i>0; i--) {
        tryNumber[i] = tryNumber[i-1];
      }
      tryNumber[0] = n;
      showHistory();
      if (n == ans) {
        alert("あたりです!");
        location.reload();
      }
    }

過去5回分の履歴は配列にとってあり、入力のたびに後ろへずらし、先頭を最新の値にしています。それを表示用の領域へ出力すると、スクロールしているように見えます。

未入力部分は-1としておき、それを判定して表示しないようにしています。

    function showHistory() {
      var str = "";
      for (i=0; i<max; i++) {
        if (tryNumber[i] < 0) {
          str = str + "<br>";
        } else {
          str = str + tryNumber[i];
          if (tryNumber[i] > ans) {
              str = str + " 大<br>";
          } else if (tryNumber[i] < ans) {
              str = str + " 小<br>";
          } else {
              str = str + " 正解<br>";
          }
        }
      }
      $("info").innerHTML = str + count + "回";
    }

1桁以上にすると入力部分が厄介になるのですが、気が向いたらやってみます。
それよりも、そろそろSDKが使いたくなって来ました。